is invalid, so the chat could not have lived in it. */
.qkb .rail-cta {
position: relative; overflow: hidden; border-radius: var(--q-rad); padding: 18px; color: #fff; text-decoration: none; display: block;
background: radial-gradient(120% 140% at 85% 0%, rgba(110, 231, 183, 0.18), transparent 55%), linear-gradient(135deg, var(--q-primary) 0%, var(--q-green-hover) 58%, #062019 100%);
box-shadow: 0 18px 40px -20px rgba(6, 32, 25, 0.55);
}
/* `>`, and it is load-bearing. سلطان's answer bubble is `.qa-bot`, which the widget paints
`background: var(--q-surface-1)` - WHITE - and gives no colour of its own, and the markdown it
renders is `` and `
`. A descendant selector here is (0,2,1) and matches those elements
directly, so the card's white copy colour landed on white bubbles and سلطان's answers were
unreadable (founder, 2026-08-28: "why are the answers in #fff (the text)?"). The chat wrapper's
own colour reset cannot save them - an element with a directly-matching rule ignores what its
ancestor inherited. Confining the card's type to its OWN children is the fix; the chat then
takes its colour from `.qa-wrap`, which sets it correctly. */
.qkb .rail-cta > h2 { font: 800 15px/1.3 var(--q-font); margin: 0 0 5px; color: #fff; }
.qkb .rail-cta > p { font: 500 12.5px/1.55 var(--q-font); color: rgba(255, 255, 255, 0.85); margin: 0 0 12px; }
.qkb .rail-cta .go { display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px/1 var(--q-font); background: rgba(255, 255, 255, 0.16); padding: 9px 14px; border-radius: 999px; transition: background .15s ease; color: #fff; }
.qkb .rail-cta .go svg { width: 14px; height: 14px; }
.qkb .rail-cta:hover .go { background: rgba(255, 255, 255, 0.24); }
/* `button.` is load-bearing, same trap as .qkb-hero-ask below: Hello Elementor's reset styles
`[type="button"]` at (0,1,0) and loads AFTER plugin CSS, so it beats a bare class on source
order and the trigger would render as a grey theme button inside a green card. */
.qkb .rail-cta button.go { border: 0; cursor: pointer; font-family: var(--q-font); appearance: none; -webkit-appearance: none; }
.qkb .rail-cta button.go[aria-expanded="true"] { background: rgba(255, 255, 255, 0.28); }
/* The chevron points INTO the card when closed and DOWN once the chat is open, so the control
says which way it is about to move rather than just changing colour. */
.qkb .rail-cta button.go svg { transition: transform .15s ease; }
.qkb .rail-cta button.go[aria-expanded="true"] svg { transform: rotate(-90deg); }
/* The chat, unfolded inside the card. .qa-wrap is qimah-ask's own root: it ships
`max-width:760px; margin-inline:auto`, which is right in a main column and pointless in a
316px rail, and its own border/shadow would draw a second card inside this one. */
/* A belt-and-braces reset, not the load-bearing one - that is the `>` on the two type rules
above. `.qa-wrap` sets its own colour, so the widget is already correct; this only covers
anything that reaches the chat by inheritance rather than by its own rule. */
.qkb .rail-cta .qkb-sultan-chat { margin-top: 14px; color: var(--q-text); }
/* No letter avatar (founder, 2026-08-28). The widget renders `.qa-avatar` as an ![]()
when the
persona has a picture and falls back to its INITIAL when it does not - and the psu persona has
none configured, so the disc read as a bare «س». Hidden only in the no-image case, so this
corrects itself the day qimah-ask gets an avatar rather than suppressing it forever.
Scoped to `.qkb-sultan-chat`, NOT to the rail: templates/parts/sultan-chat.php is the single
mount used by BOTH the question page's rail and the `/kb/` landing, and the founder asked for
the letter gone on the landing too - one selector covers both by construction. */
.qkb .qkb-sultan-chat .qa-avatar:not(:has(img)) { display: none; }
.qkb .rail-cta .qa-wrap { max-width: 100%; box-shadow: none; }
/* .qa-log ships min-height:220px; max-height:60vh and scrolls itself. Capped tighter here so the
whole card still fits a short laptop viewport inside the sticky rail - otherwise the composer,
which is the only part that matters, is the part that falls off the bottom. */
.qkb .rail-cta .qa-log { min-height: 180px; max-height: min(46vh, 340px); }
/* ---- سلطان OPEN: the card gets out of the way -------------------------------
Closed, .rail-cta is a dark-green invitation and that is right. Open, it was framing a white
chat widget inside a green gradient - two surfaces fighting, and the widget is the thing you
came for. Open, the card stops being a card: no gradient, no shadow, no padding.
The heading and the sub-line are REMOVED rather than recoloured. They are `color:#fff` and
would be invisible on the light ground, and «ما لقيت جوابك؟» is a pitch - it has done its job
the moment the conversation is on screen. The toggle stays as the panel's header and its close
control, and its label becomes «إغلاق» (see setLabel() in qimah-kb.js).
EVERY rule below is scoped to `.rail-cta--live`, the modifier the template adds only when the
live chat is mounted. The guest button shares `data-qkb-sultan-toggle`, so a LOGGED-OUT reader
pressing «اسأل سلطان» also puts `.is-sultan-open` on the rail - and stripping the green there
turned `.qkb-sultan-guest` (white type on translucent white, built FOR the dark card) into an
invisible login note. Caught by Codex on PR #90, confirmed against the markup before fixing.
z-index 9995 is chosen, not arbitrary: ABOVE .qkb-curator-fab (9990) so the chat wins the
bottom corner, and BELOW the site header (10001) and the page-transition overlay (9999) - the
chat must never cover the nav. */
.qkb .q-rail.is-sultan-open .rail-cta--live {
background: none; box-shadow: none; padding: 0;
position: relative; z-index: 9995;
}
.qkb .q-rail.is-sultan-open .rail-cta--live > h2,
.qkb .q-rail.is-sultan-open .rail-cta--live > p { display: none; }
.qkb .q-rail.is-sultan-open .rail-cta--live .qkb-sultan-chat { margin-top: 0; }
/* The toggle, restyled for the light ground it now sits on. Full width and space-between so it
reads as the panel's header bar rather than a button that lost its card. */
.qkb .q-rail.is-sultan-open .rail-cta--live button.go,
.qkb .q-rail.is-sultan-open .rail-cta--live button.go[aria-expanded="true"] {
display: flex; width: 100%; justify-content: space-between; margin-bottom: 10px;
background: var(--q-surface-2); color: var(--q-text);
border: 1px solid var(--q-border); border-radius: 10px; padding: 10px 13px;
}
.qkb .q-rail.is-sultan-open .rail-cta--live:hover button.go { background: var(--q-surface-3); }
/* BOTH bottom-corner pills step aside while the chat is open - two, then three, competing calls
to action in one corner was the real problem, and z-index alone only decides who covers whom.
`:has()` is already used in this stylesheet (.qa-avatar:not(:has(img))).
`.qkb-curator-fab` is ours; its rule is emitted inline in wp_footer AFTER this file, so the win
there is specificity, not order.
`.qfb-launch` is the site's «عندك ملاحظة» widget and is NOT ours - it lives in no repo on this
machine and is absent from the anonymous page HTML, so its own z-index could never be read.
That is exactly why it is hidden rather than out-stacked: `display:none` does not care what
z-index it carries. Matched on the base class only - it ships `.qfb-launch.qfb-glow`, and
`qfb-glow` is a presentation modifier that may come and go. If the widget is ever renamed this
rule silently stops working, which is the honest failure mode: the pill comes back, nothing
breaks. */
body:has(.q-rail.is-sultan-open .rail-cta--live) .qkb-curator-fab,
body:has(.q-rail.is-sultan-open .rail-cta--live) .qfb-launch { display: none; }
/* Guest note: what a logged-out reader gets instead of the chat (founder, 2026-08-28). */
.qkb .qkb-sultan-guest { margin-top: 14px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); }
.qkb .qkb-sultan-guest p { margin: 0 0 11px; font: 600 13px/1.65 var(--q-font); color: #fff; }
.qkb .qkb-sultan-guest .qkb-sultan-guest-btn {
display: inline-flex; align-items: center; justify-content: center; width: 100%;
background: #fff; color: var(--q-primary); text-decoration: none;
font: 700 13px/1 var(--q-font); padding: 11px 16px; border-radius: 999px;
transition: filter .15s ease;
}
.qkb .qkb-sultan-guest .qkb-sultan-guest-btn:hover { filter: brightness(0.94); text-decoration: none; }
/* With سلطان open, the rail is HIS - the related-questions and course-chip boxes fold away. This
is the سند behaviour the founder pointed at: the lesson panel swaps its tree out for the chat
rather than stacking them. It is also what keeps a 316px sticky column from having to hold a
chat AND two lists inside one viewport height. */
@media (min-width: 960px) {
.qkb .q-rail.is-sultan-open .rail-box { display: none; }
}
/* ---------- typeahead search (PR-05) ---------- */
.qkb-search { position: relative; margin: 0 0 18px; }
.qkb-search-input {
width: 100%; font: 500 14px/1 var(--q-font); color: var(--q-text); background: var(--q-surface-1);
border: 1px solid var(--q-border); border-radius: 12px; padding: 12px 16px;
}
.qkb-search-input:focus { outline: 2px solid var(--q-primary); outline-offset: 1px; }
.qkb-search-results {
position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 20;
background: var(--q-surface-1); border: 1px solid var(--q-border); border-radius: 12px;
box-shadow: 0 10px 26px -14px rgba(16, 40, 32, 0.3); overflow: hidden;
}
.qkb-search-item {
display: block; padding: 10px 14px; font: 600 13px/1.4 var(--q-font); color: var(--q-text);
text-decoration: none; unicode-bidi: plaintext;
}
.qkb-search-item:hover, .qkb-search-item.is-active { background: var(--q-surface-2); color: var(--q-primary); }
.qkb-search-empty, .qkb-search-hint { padding: 10px 14px; font: 500 12px/1.4 var(--q-font); color: var(--q-muted); }
/* Topbar instance: compact pill with an inline magnifier, matching the shell's utility chrome.
(The inline/hero instances keep the base look above.) */
.qkb-search--topbar { margin: 0; max-width: 300px; }
.qkb-search--topbar .qkb-search-input {
border-radius: 999px; padding: 9px 14px; padding-left: 38px; font-size: 13.5px; /* physical left: the input is dir=auto (logical sides flip while typing Arabic) but the icon is fixed left */
background: var(--q-surface-2); border-color: transparent;
transition: background .13s, border-color .13s, box-shadow .13s;
}
.qkb-search--topbar .qkb-search-input:hover { background: var(--q-surface-1); border-color: var(--q-border); }
.qkb-search--topbar .qkb-search-input:focus { background: var(--q-surface-1); }
.qkb-search--topbar::before {
content: ''; position: absolute; left: 13px; top: 50%; margin-top: -8px;
width: 16px; height: 16px; background: var(--q-muted); pointer-events: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
.qkb *, .qkb *::before, .qkb *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* ==================================================================
Visitor landing home (/kb/) - v3 mix: dot-pattern hero + glass search,
overlapping emerald stage cards, accent-bar/caret Q&A. Neutrals ride the
theme --q-* tokens (light+dark); the emerald ramp is page-scoped so the
rest of qimah.net keeps its forest --q-primary. No icon web-font.
================================================================== */
.qkb-home {
max-width: 1200px; margin-inline: auto;
/* Room at BOTH ends (founder, 2026-08-27). The page sat flush against the site
header at the top and the dark footer band at the bottom, so the hero read as
glued to the nav and the last section as cut off rather than finished. The same
value at both ends, and it matches the rhythm between the page's own sections -
so the page is spaced like its own contents. */
margin-block: clamp(28px, 3.5vw, 48px) clamp(48px, 6vw, 88px);
/* Ink for the hero + stage cards, which are a dark green surface in BOTH
themes - so this is deliberately NOT --q-primary, which would render
forest-on-dark-green in light mode. 10.85:1 on the hero. */
--qkb-on-dark: #7fe3b4;
/* Qimah brand tokens only (BRD: no random colors): forest --q-primary, its lighter
companion --q-primary-2, and the theme gold literal held in reserve for accents. */
--acc: var(--q-primary); --acc-500: var(--q-primary); --acc-2: var(--q-primary-2); --gold: #d4a017;
--acc-soft-bg: color-mix(in srgb, var(--q-primary) 8%, transparent); --acc-soft-bd: color-mix(in srgb, var(--q-primary) 22%, transparent);
--gold-text: #9c7410; --gold-soft-bg: rgba(212, 160, 23, 0.12); --gold-soft-bd: rgba(212, 160, 23, 0.28);
}
/* Only the gold is overridden for dark now. The accent variables above are the
brand token itself, and the token lifts to #2DB87A in dark on its own
(qimah-theme 1.32.0) - this block used to restate it as var(--qkb-on-dark) because it
did not. Gold has no theme token yet, so it stays a literal here. */
html[data-theme="dark"] .qkb-home {
--gold-text: #e8b53d; --gold-soft-bg: rgba(212, 160, 23, 0.16); --gold-soft-bd: rgba(212, 160, 23, 0.3);
}
.qkb-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.qkb-home a:focus-visible, .qkb-home button:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
/* PR-21: the same, for every other KB surface. The rule above is scoped to .qkb-home, so a
single-question page had NO focus indication on any link at all - measured on
/kb/how-to-register-courses/: 9 focusable links where the computed outline, box-shadow,
background and border were byte-identical focused and unfocused. Uses --q-primary rather
than --acc because --acc is itself defined inside the .qkb-home block and resolves to
nothing here; the fallback keeps the indicator alive even if that token moves again. */
.qkb a:focus-visible,
.qkb button:focus-visible,
.qkb input:focus-visible,
.qkb textarea:focus-visible,
.qkb select:focus-visible,
.qkb [tabindex]:focus-visible,
.qkb-suggest-toast a:focus-visible,
.qkb-suggest-toast button:focus-visible { outline: 3px solid var(--q-primary, #1e6649); outline-offset: 2px; }
/* The toast renders in wp_footer, OUTSIDE .qkb (class-qkb-submissions-admin.php), so the
selectors above would never have reached it - and the theme's own
`button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30,102,73,.4) }` then paints
a green glow on the toast's own #1e6649 background at 1.0:1 while removing the outline. A
writer tabbing to the dismiss ✕ saw nothing at all. It is listed explicitly above, and needs
a light ring because it sits on the brand fill rather than on the page. */
.qkb-suggest-toast a:focus-visible,
.qkb-suggest-toast button:focus-visible { outline-color: var(--q-on-primary, #fff); }
/* WCAG 1.4.11 wants 3:1 against the ADJACENT colour, and outline-offset puts the ring on the
CONTAINER's background. Two containers inside .qkb are dark even in light mode, where a
#1e6649 ring measures 2.48:1 on the hero and as little as 1.20:1 on the CTA card. --qkb-on-dark
is the token already used for content on those surfaces (11.03:1 / 5.34:1). */
.qkb-hero :focus-visible,
.qkb-cta-card :focus-visible { outline-color: var(--qkb-on-dark, #7fe3b4); }
/* Dark mode. Without this the ring is #1e6649 on --q-bg #0d2119 (2.44:1) and on --q-surface-1
#15352b (1.94:1). It currently survives only because the theme ships
`html[data-theme="dark"] :focus-visible { outline-color: #34d399 }` at the SAME specificity
and its stylesheet happens to load after this one - a tie broken by enqueue order, which is
not something to leave load-bearing. Stated here so the KB owns its own contrast. */
html[data-theme="dark"] .qkb a:focus-visible,
html[data-theme="dark"] .qkb button:focus-visible,
html[data-theme="dark"] .qkb input:focus-visible,
html[data-theme="dark"] .qkb textarea:focus-visible,
html[data-theme="dark"] .qkb select:focus-visible,
html[data-theme="dark"] .qkb [tabindex]:focus-visible { outline-color: var(--qkb-on-dark, #7fe3b4); }
/* ---- hero: dark-green dot-pattern card ---- */
.qkb-hero {
position: relative; border-radius: 28px; margin-bottom: 0;
padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 64px);
color: #fff;
background:
radial-gradient(760px circle at 100% 0%, rgba(79, 138, 135, 0.30), transparent 55%),
radial-gradient(600px circle at 0% 100%, color-mix(in srgb, var(--q-primary) 36%, transparent), transparent 55%),
#062019;
box-shadow: 0 40px 80px -40px rgba(6, 32, 25, 0.6);
}
/* interactive constellation canvas replaces the old dot pattern */
.qkb-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; z-index: 0; pointer-events: none; }
.qkb-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.qkb-hero-main { text-align: start; }
.qkb-eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 700 13px/1 var(--q-font); background: rgba(20, 83, 45, 0.5); border: 1px solid rgba(22, 101, 52, 0.9); color: #bbf7d0; padding: 8px 16px; border-radius: 999px; margin-bottom: clamp(20px, 3vw, 32px); }
.qkb-ping { position: relative; display: inline-flex; width: 8px; height: 8px; flex-shrink: 0; }
.qkb-ping-a { position: absolute; inset: 0; border-radius: 50%; background: var(--qkb-on-dark); opacity: 0.75; animation: qkb-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
.qkb-ping-b { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--q-primary-2); }
@keyframes qkb-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.qkb-hero h1 { font: 900 clamp(34px, 6vw, 72px)/1.25 var(--q-font); letter-spacing: -0.02em; margin: 0 0 clamp(16px, 2vw, 24px); color: #fff; text-wrap: balance; }
.qkb-hero h1 .qkb-grad { background: linear-gradient(to left, var(--qkb-on-dark), #cfeee0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qkb-hero-sub { font: 500 clamp(16px, 2vw, 22px)/1.6 var(--q-font); color: rgba(220, 252, 231, 0.8); margin: 0 0 clamp(28px, 3.5vw, 44px); max-width: 40ch; }
/* glass search bar wrapping the reused typeahead + a "search now" affordance */
.qkb-hero-search { display: flex; align-items: center; gap: 6px; max-width: 660px; padding: 10px; border-radius: 28px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); transition: background 0.3s ease, border-color 0.3s ease; }
.qkb-hero-search:focus-within { background: #fff; border-color: #fff; }
.qkb-hero-search-ic { flex-shrink: 0; padding-inline: 12px 4px; color: #bbf7d0; transition: color 0.3s ease; }
.qkb-hero-search-ic svg { width: 26px; height: 26px; display: block; }
.qkb-hero-search:focus-within .qkb-hero-search-ic { color: var(--q-primary); }
.qkb-hero-search .qkb-search { flex: 1; margin: 0; }
.qkb-hero-search .qkb-search-input { background: transparent; border: none; color: #fff; font: 500 clamp(15px, 1.8vw, 18px)/1.4 var(--q-font); padding: clamp(12px, 1.6vw, 16px) 6px; min-height: auto; box-shadow: none; }
.qkb-hero-search .qkb-search-input::placeholder { color: rgba(187, 247, 208, 0.7); }
.qkb-hero-search .qkb-search-input:focus { outline: none; }
.qkb-hero-search:focus-within .qkb-search-input { color: #1e293b; }
.qkb-hero-search:focus-within .qkb-search-input::placeholder { color: #94a3b8; }
/* `button.` on these rules is load-bearing, not style. Hello Elementor ships
reset.css with `[type="button"], [type="submit"], button { background:
transparent }` - specificity (0,1,0), a TIE with a bare class - and it loads
AFTER plugin CSS, so source order handed it every button we styled by class
alone. The «ابحث الآن» button had been rendering with no fill since it was
written. Naming the element takes these to (0,1,1) and they win.
Do not "simplify" the element away. Same trap as the theme's form-control
rules; see qimah-theme CLAUDE.md. */
button.qkb-hero-search-btn { flex-shrink: 0; cursor: pointer; border: none; background: var(--q-primary); color: var(--q-on-primary, #fff); font: 700 clamp(14px, 1.6vw, 17px)/1 var(--q-font); padding: 0 clamp(18px, 2.4vw, 32px); align-self: stretch; min-height: 48px; border-radius: 16px; white-space: nowrap; transition: background 0.15s ease; }
button.qkb-hero-search-btn:hover { background: var(--q-green-hover); }
.qkb-hero-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(22px, 3vw, 32px); font: 500 14px/1 var(--q-font); }
.qkb-hero-pop .lbl { color: rgba(187, 247, 208, 0.6); }
.qkb-hero-pop a { text-decoration: none; color: #dcfce7; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 8px 16px; border-radius: 999px; transition: background 0.15s ease; }
.qkb-hero-pop a:hover { background: rgba(255, 255, 255, 0.12); }
/* decorative floating cards - desktop only, presentational */
@media (min-width: 1000px) { .qkb-hero-art { display: block; position: relative; min-height: 440px; overflow: hidden; } }
/* card 1: a mini KB "browse questions" list */
/* card 2: an answered question */
/* shared skeleton line utilities */
.ln.mute { background: color-mix(in srgb, var(--qkb-on-dark) 40%, transparent); }
.ln.w100 { width: 100%; } .ln.w80 { width: 80%; } .ln.w66 { width: 66%; } .ln.w50 { width: 50%; } .ln.w40 { width: 40%; }
/* ---- stage cards: overlap the hero, all emerald ---- */
/* lowkey: flat bordered cards, no pop-out shadow / blob / hero overlap */
/* ONE gap between the landing's sections (founder, 2026-08-27: مسافات بين الأقسام).
The rail sat at clamp(28,4vw,44) and the grid below it at clamp(44,6vw,84), so the
page had two different ideas of how far apart a section is and read as unevenly
stacked rather than spaced. Both now take the same token. */
/* Design ب (founder's pick, 2026-08-27): space PLUS a hairline, so the seam between
sections is visible on a long phone scroll rather than left to the eye to infer. */
.qkb { --qkb-gap-sec: clamp(54px, 6.5vw, 88px); }
.qkb-home .qkb-stages,
.qkb-home .qkb-main-grid { position: relative; }
.qkb-home .qkb-stages::before,
.qkb-home .qkb-main-grid::before {
content: ""; position: absolute; inset-inline: 0;
top: calc(var(--qkb-gap-sec) / -2); height: 1px;
/* Solid through the middle and fading only at the very ends. The first version
faded from 22% to 78%, which on a white page left a line you had to look for -
and the whole point of ب's seam is that a reader SEES where one section ends. */
background: linear-gradient(to left, transparent, var(--acc-soft-bd) 8%, var(--acc-soft-bd) 92%, transparent);
}
/* FULL WIDTH, like the hero (founder, 2026-08-27: "the line beside اختر محطتك should be aligned with the hero"). It used to be max-width:1040 centred inside a 1200 page,
so the rail - and the green rule beside its heading - sat ~80px inside the hero's
edge, which read as a second, narrower page starting under the first. Same width now,
so the bar lands exactly on the hero's edge and the seams below span the same line. */
.qkb-stages { max-width: none; margin-inline: 0; margin-top: var(--qkb-gap-sec); padding-inline: 0; }
/* stage cards: brand green gradient surface with light content */
/* Light surface (0.33.0). These were three saturated dark blocks sitting
directly under an already-dark hero: four heavy bands in a row, all of equal
weight, pushing the questions themselves below the fold. On the page surface
the hero stays the only dark thing, and the stage cards read as the step
AFTER it rather than a second wall. Tokens, not literals, so dark mode gets
its surfaces for free - the old version was hardcoded #24785a/#123f2d and
looked identical in both themes. */
/* brightness() was the dark card's hover; on a white surface it does nothing
visible. Border + lift instead, matching every other card on the page. */
.qkb-stage-ic { width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; color: var(--q-primary); background: color-mix(in srgb, var(--q-primary) 10%, transparent); border: 0; margin-bottom: 24px; }
.qkb-stage-ic svg { width: 30px; height: 30px; }
.qkb-stage-label { font: 800 clamp(19px, 2.3vw, 25px)/1.35 var(--q-font); color: var(--q-text); margin: 0 0 12px; }
.qkb-stage-desc { font: 400 15px/1.75 var(--q-font); color: var(--q-muted); margin: 0 0 22px; }
.qkb-stage-cta { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--q-font); color: var(--q-primary); }
.qkb-stage-cta svg { width: 15px; height: 15px; transition: margin-inline-start 0.15s ease; }
/* ==================================================================
Two-column feed: sidebar (dark CTA + sections) | popular Q&A
================================================================== */
.qkb-main-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 48px); align-items: start; margin-top: var(--qkb-gap-sec); }
@media (min-width: 1000px) {
.qkb-main-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
/* sidebar pins in place; the section list gets its own scroll instead of drifting with the page */
.qkb-side { position: sticky; top: 24px; }
.qkb-side .qkb-sections-list { max-height: calc(100vh - 270px); overflow-y: auto; }
}
.qkb-side { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); }
/* ---- sidebar: dark "quick guide" CTA ---- */
.qkb-cta-card { position: relative; overflow: hidden; border-radius: 28px; padding: 32px; color: #fff; background: radial-gradient(160px circle at 12% 8%, rgba(79, 138, 135, 0.4), transparent 60%), linear-gradient(150deg, #17593f 0%, #0b2a20 100%); box-shadow: 0 30px 60px -30px rgba(6, 32, 25, 0.55); }
.qkb-cta-glow { position: absolute; inset-block-start: -80px; inset-inline-end: -80px; width: 192px; height: 192px; border-radius: 50%; background: var(--q-primary); filter: blur(80px); opacity: 0.6; }
.qkb-cta-inner { position: relative; z-index: 1; }
.qkb-cta-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; margin-bottom: 24px; color: var(--qkb-on-dark); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
.qkb-cta-ic svg { width: 28px; height: 28px; }
.qkb-cta-card h3 { font: 900 clamp(20px, 2.2vw, 26px)/1.3 var(--q-font); color: #fff; margin: 0 0 14px; }
.qkb-cta-card p { font: 500 14px/1.7 var(--q-font); color: rgba(220, 240, 232, 0.8); margin: 0 0 28px; }
.qkb-cta-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; background: var(--q-primary-2); color: #fff; font: 800 15px/1 var(--q-font); padding: 16px 22px; border-radius: 16px; transition: background 0.2s ease; }
.qkb-cta-btn:hover { background: #5c9c98; }
.qkb-cta-btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.qkb-cta-btn:hover svg { transform: translateX(-4px); }
/* ---- sidebar: browse-by-section list ---- */
.qkb-sections-head { display: flex; align-items: center; gap: 12px; font: 900 20px/1.3 var(--q-font); color: var(--q-text); margin: 0 0 22px; }
.qkb-sections-bar { width: 8px; height: 24px; border-radius: 999px; background: var(--acc-500); flex-shrink: 0; }
.qkb-sections-list { display: flex; flex-direction: column; gap: 10px; }
.qkb-sec-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; padding: 14px; border-radius: var(--q-rad); border: 1px solid transparent; color: var(--q-text); transition: background 0.12s ease, border-color 0.12s ease; }
.qkb-sec-item:hover { background: var(--q-surface-2); border-color: var(--q-border); }
.qkb-sec-item-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.qkb-sec-item-ic { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--acc); background: var(--acc-soft-bg); border: 1px solid transparent; transition: background 0.12s ease, color 0.12s ease; }
.qkb-sec-item-ic svg { width: 20px; height: 20px; }
.qkb-sec-item:hover .qkb-sec-item-ic { color: var(--acc); background: var(--acc-soft-bg); border-color: transparent; }
.qkb-sec-item-label { font: 700 16px/1.4 var(--q-font); color: var(--q-text); unicode-bidi: plaintext; overflow: hidden; text-overflow: ellipsis; }
.qkb-sec-item:hover .qkb-sec-item-label { color: var(--acc); }
.qkb-sec-item-count { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--acc); background: var(--acc-soft-bg); border: 1px solid transparent; border-radius: 10px; padding: 5px 12px; }
button.qkb-sections-more { width: 100%; margin-top: 24px; padding: 16px; border-radius: var(--q-rad); cursor: pointer; font: 800 15px/1 var(--q-font); color: var(--q-text-secondary); background: var(--q-surface-2); border: 1px solid var(--q-border); transition: background 0.12s ease, color 0.12s ease; }
button.qkb-sections-more:hover { background: var(--q-surface-3); color: var(--q-text); }
/* ---- sidebar column heading (matches the questions column heading) ---- */
.qkb-side-head { padding-bottom: clamp(18px, 2vw, 24px); border-bottom: 1px solid var(--acc-soft-bd); }
.qkb-side-head .qkb-sec-h { font: 900 clamp(24px, 3vw, 34px)/1.2 var(--q-font); color: var(--q-text); margin: 0 0 8px; letter-spacing: -0.01em; }
.qkb-side-head .qkb-sec-sub { font: 500 clamp(15px, 1.6vw, 18px)/1.5 var(--q-font); color: var(--q-text-secondary); margin: 0; }
/* ---- "not sure where to look?" topic card, under the popular questions ---- */
/* ---- dark trust/stats band (breaks the light run; geometric grid texture) ---- */
.qkb-trust { position: relative; overflow: hidden; margin: clamp(28px, 4vw, 44px) 0; border-radius: var(--q-rad); padding: clamp(22px, 3vw, 34px) clamp(20px, 4vw, 44px); color: #fff; background: radial-gradient(520px circle at 88% -40%, rgba(79, 138, 135, 0.35), transparent 60%), linear-gradient(135deg, #10301d 0%, #062019 100%); box-shadow: 0 26px 54px -30px rgba(6, 32, 25, 0.55); }
.qkb-trust::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--qkb-on-dark) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--qkb-on-dark) 9%, transparent) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask: radial-gradient(130% 120% at 50% 0%, #000 30%, transparent 78%); mask: radial-gradient(130% 120% at 50% 0%, #000 30%, transparent 78%); }
.qkb-trust-grid { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 20px 24px; }
.qkb-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.qkb-stat-n { font: 900 clamp(28px, 4vw, 42px)/1 var(--q-font); color: #fff; letter-spacing: -0.02em; unicode-bidi: plaintext; }
.qkb-stat-n .pl { color: var(--qkb-on-dark); }
.qkb-stat-ic { color: #86efac; display: grid; place-items: center; }
.qkb-stat-ic svg { width: clamp(30px, 4vw, 40px); height: clamp(30px, 4vw, 40px); }
.qkb-stat-l { font: 600 13.5px/1.5 var(--q-font); color: rgba(220, 240, 232, 0.82); max-width: 22ch; }
.qkb-stat-div { width: 1px; align-self: stretch; min-height: 44px; background: rgba(255, 255, 255, 0.12); }
/* ---- featured answer (lightly emphasised card: green accent + gold trust seal) ---- */
.qkb-featured { position: relative; overflow: hidden; margin-bottom: clamp(16px, 2vw, 22px); border-radius: 28px; padding: clamp(22px, 2.6vw, 30px); background: var(--q-surface-1); border: 1px solid var(--q-border); box-shadow: 0 16px 36px -26px rgba(16, 40, 32, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.qkb-featured::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--acc-500); }
.qkb-featured-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.qkb-featured-seal { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--q-font); color: #3a2c05; background: linear-gradient(135deg, #E8C24A, #D4A017); padding: 6px 12px; border-radius: 999px; box-shadow: 0 5px 12px -5px rgba(212, 160, 23, 0.5); }
.qkb-featured-seal svg { width: 14px; height: 14px; }
.qkb-featured-tag { font: 700 12px/1 var(--q-font); color: var(--acc); background: var(--acc-soft-bg); padding: 6px 12px; border-radius: 999px; unicode-bidi: plaintext; }
.qkb-featured-q { font: 900 clamp(18px, 2.1vw, 22px)/1.4 var(--q-font); color: var(--q-text); margin: 0 0 10px; letter-spacing: -0.01em; unicode-bidi: plaintext; }
.qkb-featured-a { font: 500 clamp(14px, 1.5vw, 15.5px)/1.8 var(--q-font); color: var(--q-text-secondary); margin: 0 0 18px; max-width: 62ch; unicode-bidi: plaintext; }
.qkb-featured-cta { display: inline-flex; align-items: center; gap: 7px; font: 800 13.5px/1 var(--q-font); color: var(--q-on-primary, #fff); background: var(--q-primary); padding: 11px 18px; border-radius: 12px; text-decoration: none; transition: background 0.15s ease; }
.qkb-featured-cta:hover { background: var(--q-green-hover); }
.qkb-featured-cta svg { width: 14px; height: 14px; }
.qkb-featured-cta:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
html[data-theme="dark"] .qkb-featured-cta:hover { background: #a7f3d0; color: #0d2119; } /* the mint fill needs dark ink; the #fff fallback would be 1.28:1 here */
/* ---- content head + pill filter tabs ---- */
/* Two blocks now - الأسئلة الشائعة then the board - so the column owns the space
between them rather than each block growing a margin of its own. */
.qkb-content { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 34px); }
/* شكر وتقدير moved into the SIDEBAR, under تصفح كل الأقسام (founder, 2026-08-27).
That column is roughly a third of the width the band used to have, so its row
layout would wrap into a ragged two-line mess: inside the sidebar it stacks, and
the button goes full-width rather than floating beside text it no longer fits
next to. On phones the whole grid is one column anyway, which is where 95% of
the traffic reads it - so this IS the common case, not the narrow one. */
.qkb .qkb-side .qkb-thanks-band {
display: block; margin-top: clamp(28px, 3.5vw, 40px);
padding: 20px; border-radius: 18px;
}
.qkb .qkb-side .qkb-thanks-band-tx { flex: none; }
.qkb .qkb-side .qkb-thanks-band-tx b { font-size: 17px; }
.qkb .qkb-side .qkb-thanks-band-btn {
display: flex; width: 100%; justify-content: center; margin-top: 16px;
}
/* ONLY the rail carries the green rule (founder, 2026-08-27: no lines beside
تصفح كل الأقسام, الأسئلة الشائعة or أسئلة تنتظر إجابة). One marked heading reads as
the page's opening move; four of them read as a pattern nobody asked for. */
.qkb .qkb-side-head { align-items: flex-start; }
/* أسئلة تنتظر إجابة is a SUB-section of the same block (founder, 2026-08-27): it
continues الأسئلة الشائعة rather than opening a second one. So it keeps the column
and loses the things that make a head look like a beginning - the big type, the
full-width rule, the wide gap above it. A short green tick and a smaller title mark
it as a part; the surrounding panel is what makes it read as inside. */
.qkb .qkb-content-sub {
background: var(--q-surface-2);
border: 1px solid var(--q-border-subtle);
border-radius: 20px;
padding: clamp(16px, 2vw, 22px);
margin-top: clamp(6px, 1vw, 10px);
}
.qkb .qkb-content-head.is-sub {
padding-bottom: 0; margin-bottom: clamp(14px, 1.8vw, 18px);
border-bottom: 0; gap: 10px;
}
.qkb .qkb-content-head.is-sub .qkb-sec-h { font: 700 clamp(17px, 1.8vw, 20px)/1.3 var(--q-font); }
.qkb .qkb-content-head.is-sub .qkb-sec-sub { font-size: clamp(13px, 1.2vw, 14px); }
/* The board rows sit on the panel, so they take the page ground to stay distinct from it. */
.qkb .qkb-content-sub .qkb-open { background: var(--q-bg); }
/* The head sits ABOVE its list with real air, and the rule under it is the only
thing separating the two - so both numbers matter more than they look. */
.qkb-content-head { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 14px; padding-bottom: clamp(14px, 1.8vw, 20px); margin-bottom: clamp(22px, 2.8vw, 32px); border-bottom: 1px solid var(--acc-soft-bd); }
.qkb-content-title .qkb-sec-h { font: 900 clamp(24px, 3vw, 34px)/1.2 var(--q-font); color: var(--q-text); margin: 0 0 8px; letter-spacing: -0.01em; }
.qkb-content-title .qkb-sec-sub { font: 500 clamp(15px, 1.6vw, 18px)/1.5 var(--q-font); color: var(--q-text-secondary); margin: 0; }
.qkb-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.qkb-tab { appearance: none; cursor: pointer; font: 700 13.5px/1 var(--q-font); padding: 11px 20px; border-radius: 999px; white-space: nowrap; unicode-bidi: plaintext; background: var(--q-surface-1); color: var(--q-text-secondary); border: 1px solid var(--q-border); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.qkb-tab:hover { background: var(--q-surface-2); }
.qkb-tab.is-active { background: var(--q-primary); color: var(--q-on-primary, #fff); border-color: var(--q-primary); box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--q-primary) 45%, transparent); }
/* ---- popular Q&A: accent bar + caret ---- */
/* ONE column, not an auto-fill grid (founder review, 2026-08-27: "it is a mess").
The grid was written when this list WAS the page and had the full width; beside a
sidebar it packs two accordions into ~330px each, so every question wraps to three
lines and its meter, tier badge and section chip pile up inside a card too narrow
to hold them. Four questions read as a column, and the column is what the eye
follows down to the board underneath. */
.qkb-qa-list { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.6vw, 18px); align-items: start; }
.qkb-qa { position: relative; overflow: hidden; background: var(--q-surface-1); border: 1px solid var(--q-border); border-radius: 28px; box-shadow: 0 14px 32px -24px rgba(16, 40, 32, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: box-shadow 0.3s ease, border-color 0.3s ease; animation: qkb-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.qkb-qa:hover { box-shadow: 0 24px 44px -26px rgba(16, 40, 32, 0.34); }
.qkb-qa-bar { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 6px; height: 100%; background: var(--acc-soft-bd); transition: background 0.3s ease; }
.qkb-qa:hover .qkb-qa-bar, .qkb-qa.is-open .qkb-qa-bar { background: var(--acc-500); }
/* white-space:normal is required: the same Hello Elementor reset.css that
zeroes button backgrounds also sets `white-space: nowrap` on every button,
and qualifying the selector only wins the properties we actually declare.
Without this the question title runs on one line and .qkb-qa clips it. */
/* SMALLER (founder, 2026-08-27). These were sized when the list was the page and each
card had the full width; four of them above the board only need to be scannable. */
button.qkb-qa-head { white-space: normal; appearance: none; width: 100%; cursor: pointer; text-align: start; background: transparent; border: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px); font-family: var(--q-font); }
/* min-width:0 is required, not cosmetic: the head is a flex row, and a flex
item defaults to min-width:auto, which refuses to shrink below the text's
intrinsic width. The question then overflows and .qkb-qa's overflow:hidden
clips it mid-word. This only became visible once the head's `display:flex`
started applying at all - before that Hello Elementor's reset.css beat the
whole rule and the h3 laid out as a block, which wrapped by accident. */
.qkb-qa-head h3 { min-width: 0; overflow-wrap: anywhere; font: 700 clamp(15px, 1.4vw, 17px)/1.5 var(--q-font); color: var(--q-text); margin: 0; unicode-bidi: plaintext; transition: color 0.2s ease; }
.qkb-qa:hover .qkb-qa-head h3, .qkb-qa.is-open .qkb-qa-head h3 { color: var(--acc); }
.qkb-qa-caret { flex-shrink: 0; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; color: var(--acc); background: var(--acc-soft-bg); border: 1px solid transparent; transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease; }
.qkb-qa-caret svg { width: 15px; height: 15px; }
.qkb-qa:hover .qkb-qa-caret, .qkb-qa.is-open .qkb-qa-caret { color: var(--acc); background: var(--acc-soft-bg); border-color: transparent; }
.qkb-qa.is-open .qkb-qa-caret { transform: rotate(180deg); }
.qkb-qa-body { padding: 0 clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px); }
.qkb-qa-body p { font: 500 15px/1.85 var(--q-font); color: var(--q-text-secondary); margin: 0 0 22px; unicode-bidi: plaintext; }
.qkb-qa-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.qkb-qa-tag { font: 700 12px/1 var(--q-font); color: var(--acc); background: var(--acc-soft-bg); padding: 7px 12px; border-radius: 10px; unicode-bidi: plaintext; }
.qkb-qa-badge.official { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--q-font); color: var(--acc); background: var(--acc-soft-bg); padding: 7px 12px; border-radius: 10px; }
.qkb-qa-badge.official svg { width: 14px; height: 14px; }
.qkb-qa-link { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; font: 700 13px/1 var(--q-font); color: var(--acc); text-decoration: none; }
.qkb-qa-link svg { width: 14px; height: 14px; transition: margin-inline-start 0.15s ease; }
.qkb-qa-link:hover svg { margin-inline-start: 3px; }
.qkb-more-wrap { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 48px); }
button.qkb-more { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; font: 800 15px/1 var(--q-font); color: var(--q-text); background: var(--q-surface-1); border: 1px solid var(--q-border); padding: 16px 32px; border-radius: var(--q-rad); box-shadow: 0 1px 2px rgba(16, 40, 32, 0.04); transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
button.qkb-more:hover { border-color: var(--acc-soft-bd); color: var(--acc); box-shadow: 0 10px 22px -12px rgba(16, 40, 32, 0.2); }
.qkb-more svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.qkb-more:hover svg { transform: translateY(2px); }
.qkb-more.is-open svg, .qkb-more.is-open:hover svg { transform: rotate(180deg); }
/* ---- progressive enhancement: collapse only once JS marks .qkb-enh ---- */
.qkb-enh .qkb-qa-body { display: none; }
.qkb-enh .qkb-qa.is-open .qkb-qa-body { display: block; }
.qkb-enh .qkb-qa.is-extra,
.qkb-enh .qkb-sec-item.is-extra { display: none; }
.qkb-enh .qkb-qa.is-extra.is-revealed { display: block; }
.qkb-enh .qkb-sec-item.is-extra.is-revealed { display: flex; }
.qkb-enh.is-filtering .qkb-qa.is-extra:not(.is-filtered) { display: block; }
.qkb-enh .qkb-qa.is-filtered { display: none !important; }
/* ---- breakpoints ---- */
@media (min-width: 560px) { .qkb-stage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
.qkb-hero-grid { grid-template-columns: 7fr 5fr; }
}
/* ------------------------------------------------------------------
* PR-07: contribution answers (verified/community) + submit box
* ------------------------------------------------------------------ */
/* Section rhythm on the 8-pt grid (DESIGN.md): 32 between sections, 16 between the cards inside
one. It used to be 20 and 12, which is close enough to read as one undifferentiated run. */
.qkb .qkb-answers { margin-top: 32px; }
/* The heading was 15px against a 15.5px answer body - a section label smaller than the prose it
introduces, which is the hierarchy upside down. 17px, with the count it already knows and a
hairline running out to the edge: structure without adding another card. */
/* 18, not 17: `.ans-body h2` is 17px/700, and a section heading that ties a heading INSIDE one of
the answers it introduces is the same inversion, one level down. */
.qkb .qkb-answers-h { display: flex; align-items: center; gap: 10px; font: 800 18px/1.4 var(--q-font); color: var(--q-text); margin: 0 0 14px; }
.qkb .qkb-answers-t { flex-shrink: 0; }
.qkb .qkb-answers-h::after { content: ""; order: 2; flex: 1; height: 1px; background: var(--q-border); }
.qkb .qkb-answers-n { order: 3; flex-shrink: 0; font: 700 12px/1 var(--q-font); font-variant-numeric: tabular-nums; color: var(--q-muted); background: var(--q-surface-2); border: 1px solid var(--q-border); border-radius: 999px; padding: 5px 9px; }
.qkb .qkb-answers .ans { margin-bottom: 16px; }
.qkb .qkb-answers .ans:last-child { margin-bottom: 0; }
/* margin dropped: .ans-head-actions is a flex row with its own gap now, and the extra 10px pushed
the report control off the row's rhythm. */
.qkb .qkb-report { background: none; border: 0; padding: 4px 6px; min-height: 24px; display: inline-flex; align-items: center; cursor: pointer; font: 600 12px/1 var(--q-font); color: var(--q-muted); border-radius: 6px; }
.qkb .qkb-report:hover { color: #c0392b; background: rgba(192, 57, 43, 0.08); }
.qkb .qkb-report:disabled { cursor: default; color: var(--q-muted); background: none; }
/* PR 3: the report control opens into a reason picker, and «تم الإبلاغ» is rendered
server-side so it survives a refresh. */
.qkb .qkb-report-wrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qkb .qkb-report.is-done { color: var(--q-muted); font: 600 12px/1 var(--q-font); padding: 4px 6px; cursor: default; }
.qkb .qkb-report-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qkb .qkb-report[hidden] { display: none; }
.qkb .qkb-report-form[hidden] { display: none; }
.qkb .qkb-report-reason { font: 500 12px/1.4 var(--q-font); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--q-border, #d8dee6); background: var(--q-surface-1); color: inherit; }
.qkb .qkb-report-note { font: 400 12px/1.5 var(--q-font); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--q-border, #d8dee6); background: var(--q-surface-1); color: inherit; min-width: 220px; resize: vertical; }
.qkb .qkb-report-note[hidden] { display: none; }
.qkb .qkb-report-send { font: 600 12px/1 var(--q-font); padding: 5px 10px; min-height: 24px; display: inline-flex; align-items: center; border-radius: 6px; border: 0; cursor: pointer; }
.qkb .qkb-report-cancel { font: 600 12px/1 var(--q-font); padding: 4px 6px; min-height: 24px; display: inline-flex; align-items: center; border: 0; background: none; color: var(--q-muted); cursor: pointer; border-radius: 6px; }
.qkb .qkb-report-cancel:hover { background: rgba(0, 0, 0, 0.05); }
.qkb .qkb-report-msg { font: 500 12px/1.4 var(--q-font); color: #c0392b; }
/* PR-11 «موثق من فريق قمة» - a team endorsement carried by a student answer, visible to EVERY
reader (the buttons below are moderator-only, this tag is not). It sits in the same .ans-head as
the tier tag, so it must out-rank `.ans.verified .qkb-ans-tag` and `.ans.community .qkb-ans-tag` - both
(0,4,0) - which would otherwise repaint it gold or grey. Each variant is therefore matched at
equal specificity and wins on source order. Summit Green, the same colour the رسمي tag uses,
because both mean "فريق قمة vouched for this". */
.qkb .ans.verified .qkb-ans-tag--endorsed,
.qkb .ans.community .qkb-ans-tag--endorsed { background: var(--q-primary); color: var(--q-on-primary, #fff); }
/* PR-11 endorsement controls («وثّق» / undo): shown in .ans-head only to a viewer with
bless_qkb_answer. They set and clear the mark on the answer above - nothing is copied into the
question's رسمي slot, which this feature never touches (the `promote` in the class names is
v0.28.0's withdrawn "promote to Official" model, kept only as a name).
Since 0.39.0 the auto margin lives on the .ans-head-actions wrapper, not on this control and
not on .qkb-report - two auto margins in one flex row split the free space instead of pinning
to the trailing edge. Both controls sit inside that wrapper now and it owns the placement.
Every state that paints a background sets its own colour: the theme cancels a button's
colour on hover with `button:hover { color: inherit }` at (0,1,1), which beats a base-only
rule at (0,1,0) and would drop the label to --q-text mid-hover. No translateY (theme rule). */
.qkb .qkb-promote-wrap { display: inline-flex; align-items: center; }
.qkb .qkb-promote-btn,
.qkb .qkb-promote-undo { font: 600 12px/1 var(--q-font); padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.qkb .qkb-promote-btn { color: var(--q-primary); background: var(--q-surface-1); border: 1px solid color-mix(in srgb, var(--q-primary) 34%, transparent); }
.qkb .qkb-promote-btn:hover,
.qkb .qkb-promote-btn:focus-visible { color: var(--q-primary); background: color-mix(in srgb, var(--q-primary) 10%, transparent); border-color: color-mix(in srgb, var(--q-primary) 50%, transparent); }
.qkb .qkb-promote-btn:disabled { color: var(--q-muted); background: var(--q-surface-2); border-color: var(--q-border); cursor: default; }
.qkb .qkb-promote-undo { color: var(--q-muted); background: none; border: 1px solid transparent; }
.qkb .qkb-promote-undo:hover,
.qkb .qkb-promote-undo:focus-visible { color: #c0392b; background: rgba(192, 57, 43, 0.08); border-color: rgba(192, 57, 43, 0.24); }
.qkb .qkb-promote-undo:disabled { color: var(--q-muted); background: none; border-color: transparent; cursor: default; }
html[data-theme="dark"] .qkb .qkb-promote-btn:hover,
html[data-theme="dark"] .qkb .qkb-promote-undo:hover,
html[data-theme="dark"] .qkb .qkb-promote-undo:focus-visible { color: #f5a08f; background: rgba(192, 57, 43, 0.18); border-color: rgba(192, 57, 43, 0.36); }
/* PR-09 vote widget: a single "helpful" (thumbs-up) pill + count, under each student answer body. */
/* A real card footer, not a pill floating under the prose. It was `8px 20px 16px` with no rule and
no fill, so its 20px inline padding sat 4px off the body's 24px and the pill read as an orphan.
Tinted + ruled, it mirrors .ans-head and gives the student answer card a head/body/foot anatomy -
which is most of what the tiers were missing. */
.qkb .qkb-votes { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--q-border); background: var(--q-surface-2); }
.qkb .qkb-vote, .qkb .qkb-vote-static { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font: 600 13px/1 var(--q-font); }
/* surface-1, because the footer it sits on is now surface-2 - the button had been the same fill as
its own container and read as a flat label rather than a control. */
.qkb .qkb-vote { background: var(--q-surface-1); border: 1px solid var(--q-border); color: var(--q-text-secondary); cursor: pointer; }
.qkb .qkb-vote svg, .qkb .qkb-vote-static svg { width: 16px; height: 16px; flex-shrink: 0; }
.qkb .qkb-vote:hover:not(:disabled) { border-color: var(--q-primary); color: var(--q-primary); }
.qkb .qkb-vote:disabled { opacity: .55; cursor: default; }
.qkb .qkb-vote-up.is-active { color: var(--q-primary); border-color: var(--q-primary); background: color-mix(in srgb, var(--q-primary) 10%, transparent); }
.qkb .qkb-vote-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.qkb .qkb-vote-static { border: 1px solid transparent; color: var(--q-muted); }
/* PR-10 suggest-a-question widget (landing + search zero-hit prompt). */
.qkb .qkb-suggest { margin: 28px auto 8px; max-width: 720px; text-align: center; }
.qkb .qkb-suggest-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--q-surface-2); border: 1px solid var(--q-border); border-radius: 999px; padding: 10px 20px; font: 700 14px/1 var(--q-font); color: var(--q-text); cursor: pointer; }
.qkb .qkb-suggest-toggle:hover { border-color: var(--q-primary); color: var(--q-primary); }
.qkb .qkb-suggest-toggle svg { width: 18px; height: 18px; }
.qkb .qkb-suggest-form { margin-top: 16px; text-align: start; border: 1px solid var(--q-border); border-radius: var(--q-rad); background: var(--q-surface-1); padding: 20px 22px; }
.qkb .qkb-suggest-hint { margin: 0 0 12px; font: 500 13px/1.7 var(--q-font); color: var(--q-muted); }
.qkb .qkb-suggest-q, .qkb .qkb-suggest-section { width: 100%; box-sizing: border-box; border: 1px solid var(--q-border); border-radius: 12px; background: var(--q-surface-2); color: var(--q-text); font: 400 15px/1.7 var(--q-font); padding: 12px 14px; unicode-bidi: plaintext; }
.qkb .qkb-suggest-q { min-height: 60px; resize: vertical; }
.qkb .qkb-suggest-section { margin-top: 12px; }
.qkb .qkb-suggest-q:focus, .qkb .qkb-suggest-section:focus { outline: none; border-color: var(--q-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-primary) 14%, transparent); }
.qkb .qkb-suggest-seclabel { display: block; margin: 12px 0 6px; font-size: 14px; font-weight: 600; }
.qkb .qkb-suggest-dupes { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(212, 160, 23, 0.08); border: 1px solid rgba(212, 160, 23, 0.35); }
.qkb .qkb-suggest-dupes-h { margin: 0 0 8px; font: 700 13px/1.5 var(--q-font); color: #8a6d1a; }
html[data-theme="dark"] .qkb .qkb-suggest-dupes-h { color: #e6c04d; }
.qkb .qkb-suggest-dupe-list { display: flex; flex-direction: column; gap: 6px; }
.qkb .qkb-suggest-dupe { color: var(--q-primary); text-decoration: none; font: 600 13.5px/1.5 var(--q-font); }
.qkb .qkb-suggest-dupe:hover { text-decoration: underline; }
.qkb .qkb-suggest-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.qkb .qkb-suggest-btn { background: var(--q-primary); color: var(--q-on-primary, #fff); border: 0; border-radius: 999px; padding: 10px 24px; font: 700 14px/1 var(--q-font); cursor: pointer; }
.qkb .qkb-suggest-btn:hover { filter: brightness(1.05); }
.qkb .qkb-suggest-btn:disabled { opacity: 0.6; cursor: default; }
.qkb .qkb-suggest-msg { margin: 12px 0 0; font: 700 13px/1.6 var(--q-font); color: var(--q-primary); min-height: 1em; text-align: center; }
.qkb .qkb-suggest-msg:empty { margin: 0; }
.qkb .qkb-search-suggest { display: block; width: 100%; text-align: start; background: none; border: 0; border-top: 1px solid var(--q-border); padding: 12px 14px; font: 700 13.5px/1.4 var(--q-font); color: var(--q-primary); cursor: pointer; }
.qkb .qkb-search-suggest:hover { background: var(--q-surface-2); }
/* PR-10 writer/team "new suggestions" toast (front-end, dismissable). Not .qkb-scoped: rendered in wp_footer. */
.qkb-suggest-toast { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 9999; display: flex; align-items: center; gap: 10px; background: var(--q-primary); color: var(--q-on-primary, #fff); border-radius: 12px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.22); font: 700 13.5px/1.4 "IBM Plex Sans Arabic", system-ui, sans-serif; max-width: 320px; }
.qkb-suggest-toast a { color: var(--q-on-primary, #fff); text-decoration: none; }
.qkb-suggest-toast a:hover { text-decoration: underline; }
.qkb-suggest-toast-x { background: none; border: 0; color: var(--q-on-primary, #fff); font-size: 20px; line-height: 1; cursor: pointer; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 2px; opacity: .85; }
.qkb-suggest-toast-x:hover { opacity: 1; }
/* Surfaces swapped: the box is --q-surface-2 and the textarea --q-surface-1. It was the other way
round, which made the one writable thing on the page recede into its own container. It also
stops the box impersonating an answer card, which is what it looked like sitting under two of
them in the same fill with the same heading class. */
.qkb .qkb-contribute { margin-top: 16px; border: 1px solid var(--q-border); border-radius: var(--q-rad); background: var(--q-surface-2); padding: 18px 20px; }
.qkb .qkb-contribute-h { font: 800 15px/1.35 var(--q-font); color: var(--q-text); margin: 0 0 12px; }
.qkb .qkb-contribute-body { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; border: 1px solid var(--q-border); border-radius: 12px; background: var(--q-surface-1); color: var(--q-text); font: 400 15px/1.8 var(--q-font); padding: 12px 14px; unicode-bidi: plaintext; }
.qkb .qkb-contribute-body:focus { outline: none; border-color: var(--q-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-primary) 14%, transparent); }
.qkb .qkb-contribute-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.qkb .qkb-contribute-note { flex: 1; min-width: 200px; margin: 0; font: 500 12.5px/1.6 var(--q-font); color: var(--q-muted); }
.qkb .qkb-contribute-btn { flex-shrink: 0; background: var(--q-primary); color: var(--q-on-primary, #fff); border: 0; border-radius: 999px; padding: 10px 22px; font: 700 14px/1 var(--q-font); cursor: pointer; }
.qkb .qkb-contribute-btn:hover { filter: brightness(1.05); }
.qkb .qkb-contribute-btn:disabled { opacity: 0.6; cursor: default; }
.qkb .qkb-contribute-msg { margin: 12px 0 0; font: 600 13px/1.6 var(--q-font); color: var(--q-primary); min-height: 1em; }
.qkb .qkb-contribute-msg:empty { margin: 0; }
/* The logged-out invitation. It shares the base box with the already-answered thank-you note
(.qkb-contribute-done, which is still a bare
and wants exactly these rules); everything
below is the guest card's own and cannot reach it. */
.qkb .qkb-contribute-login { margin-top: 16px; padding: 16px 20px; border: 1px dashed var(--q-border); border-radius: var(--q-rad); text-align: center; font: 600 14px/1.6 var(--q-font); }
.qkb .qkb-contribute-login a { color: var(--q-primary); text-decoration: none; }
.qkb .qkb-contribute-login a:hover { text-decoration: underline; }
/* Founder, 2026-08-28, second pass: «too big». One line and a button, on one row where there is
room for it - the prompt is a single idea and was wearing an icon, a headline and an explanatory
line. Solid border and surface, because a dashed outline is the vocabulary this stylesheet uses
for empty states (.qkb-noans) and this is not an absence, it is an invitation. */
.qkb .qkb-contribute-login:has(.qkb-contribute-login-btn) {
display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
padding: 14px 20px; border: 1px solid var(--q-border); background: var(--q-surface-2);
}
.qkb .qkb-contribute-login-h { margin: 0; font: 700 15px/1.4 var(--q-font); color: var(--q-text); }
.qkb .qkb-contribute-login .qkb-contribute-login-btn {
display: inline-flex; align-items: center; justify-content: center;
background: var(--q-primary); color: var(--q-on-primary, #fff); text-decoration: none;
border-radius: 999px; padding: 11px 22px; font: 700 13.5px/1 var(--q-font);
transition: filter .15s ease;
}
.qkb .qkb-contribute-login .qkb-contribute-login-btn:hover { filter: brightness(1.06); text-decoration: none; }
/* ---------- تعديل: the author rewrites their own answer in place ----------
Founder, 2026-08-28, «same as video comments». A quiet text control in the answer head, and the
body swaps for a textarea when it is pressed - the answer never leaves the page it lives on. */
.qkb .ans-head-actions button.qkb-edit {
background: none; border: 0; padding: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
font: 600 12.5px/1 var(--q-font); color: var(--q-muted); transition: color .15s ease;
}
.qkb .ans-head-actions button.qkb-edit:hover { color: var(--q-primary); }
/* حذف sits beside تعديل and is deliberately quieter until you reach for it: withdrawing an answer
is the rarer of the two and the one you cannot undo from the page. Danger colour on hover only,
so the row does not read as a warning at rest. */
.qkb .ans-head-actions button.qkb-del {
background: none; border: 0; padding: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
font: 600 12.5px/1 var(--q-font); color: var(--q-muted); transition: color .15s ease;
}
.qkb .ans-head-actions button.qkb-del:hover { color: #b3261e; }
.qkb .qkb-edit-form { padding: 0 20px 18px; }
.qkb .qkb-edit-body {
width: 100%; box-sizing: border-box; min-height: 130px; resize: vertical;
border: 1px solid var(--q-border); border-radius: 12px;
background: var(--q-surface-1); color: var(--q-text);
font: 400 15px/1.8 var(--q-font); padding: 12px 14px; unicode-bidi: plaintext;
}
.qkb .qkb-edit-body:focus { outline: none; border-color: var(--q-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-primary) 14%, transparent); }
.qkb .qkb-edit-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.qkb .qkb-edit-foot button.qkb-edit-save {
flex-shrink: 0; background: var(--q-primary); color: var(--q-on-primary, #fff);
border: 0; border-radius: 999px; padding: 10px 22px; font: 700 13.5px/1 var(--q-font); cursor: pointer;
appearance: none; -webkit-appearance: none;
}
.qkb .qkb-edit-foot button.qkb-edit-save:hover { filter: brightness(1.05); }
.qkb .qkb-edit-foot button.qkb-edit-save:disabled { opacity: 0.6; cursor: default; }
.qkb .qkb-edit-foot button.qkb-edit-cancel {
background: none; border: 0; padding: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
font: 600 13px/1 var(--q-font); color: var(--q-muted);
}
.qkb .qkb-edit-foot button.qkb-edit-cancel:hover { color: var(--q-text); }
.qkb .qkb-edit-msg { font: 600 12.5px/1.6 var(--q-font); color: var(--q-primary); }
.qkb .qkb-edit-msg.is-error { color: #b3261e; }
/* ---------- no answers yet (0.39.0) ----------
A question can be published with nothing written against it - a suggestion that went live before
anyone answered. The page rendered the title, the rule, and then «هل أجابك هذا؟» about nothing.
This says so plainly and hands the reader straight to the contribution box below it. */
.qkb .qkb-noans { padding: 32px 24px; text-align: center; border: 1px dashed var(--q-border); border-radius: var(--q-rad); background: var(--q-surface-2); }
.qkb .qkb-noans-ic { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 14px; color: var(--q-primary); background: color-mix(in srgb, var(--q-primary) 10%, transparent); }
.qkb .qkb-noans-ic svg { width: 23px; height: 23px; }
.qkb .qkb-noans-h { margin: 0 0 6px; font: 700 15.5px/1.5 var(--q-font); color: var(--q-text); }
.qkb .qkb-noans-p { margin: 0 auto; max-width: 46ch; font: 500 13.5px/1.8 var(--q-font); color: var(--q-muted); }
/* ═══════════════════════════════════════════════════════════════════════════
0.32.0 — the landing shows its data instead of describing it.
Three changes, one idea: every number the KB already stores should be
visible before a click. Read counts become a bar, answer tier becomes a
badge in the question head, and the honour board previews real names.
═══════════════════════════════════════════════════════════════════════════ */
/* ── sections as tiles ──────────────────────────────────────────────────── */
/* ── question head: icon · tier badge · read meter ──────────────────────── */
.qkb .qkb-qa-ic {
flex: none;
width: 34px; height: 34px;
border-radius: 9px;
display: grid; place-items: center;
background: color-mix(in srgb, var(--q-primary) 9%, transparent);
color: var(--q-primary);
margin-top: 2px;
}
.qkb .qkb-qa-ic svg { width: 17px; height: 17px; }
/* min-width:0 for the same reason as the heading: a flex item will not shrink
below its content without it, and the card clips. */
.qkb .qkb-qa-main { min-width: 0; flex: 1; }
.qkb .qkb-qa-tier { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.qkb .qkb-tier-badge {
font: 700 12px/1 var(--q-font);
padding: 5px 9px;
border-radius: 999px;
white-space: nowrap;
}
.qkb .qkb-tier-badge.is-official { background: var(--q-primary); color: var(--q-on-primary, #fff); }
.qkb .qkb-tier-badge.is-community { background: var(--q-surface-3); color: var(--q-text-secondary); }
.qkb .qkb-qa-sec { font: 600 12px/1 var(--q-font); color: var(--q-muted); }
.qkb .qkb-qa-meter { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
/* NOT .qkb-qa-bar: that class already exists on this card as the 6px absolutely
positioned accent stripe, and reusing the name gave the meter `position:
absolute; width: 6px` - it rendered 6px wide and looked like it had failed to
draw. Distinct name, distinct element. */
.qkb .qkb-qa-metbar {
height: 4px;
flex: 1;
max-width: 190px;
border-radius: 2px;
background: var(--q-surface-3);
overflow: hidden;
}
.qkb .qkb-qa-metbar i { display: block; height: 100%; border-radius: 2px; background: var(--q-primary); }
.qkb .qkb-qa-views { font: 600 12px/1 var(--q-font); color: var(--q-muted); }
/* =========================================================================
0.38.1 LANDING REDESIGN
One contiguous block on purpose: the question-page branch is editing this
same file, and keeping every landing rule together makes that merge a
trivial resolve rather than a hunt through eleven regions.
Everything here OVERRIDES an earlier rule rather than editing it in place,
for the same reason. The rules it supersedes are named in each comment so
the follow-up pass can delete them once both branches have landed.
========================================================================= */
/* ---- hero: the Band. Was ~634px measured at 1440; the sub-headline is gone
from the template and the padding is roughly halved. The soft corner moves
to the bottom-LEFT so the whole page leans one way (founder). Supersedes
the padding in .qkb-hero and the columns in .qkb-hero-grid. ---- */
.qkb .qkb-hero {
padding: clamp(26px, 3vw, 38px) clamp(22px, 3.4vw, 44px);
border-radius: 28px 28px 28px clamp(56px, 8vw, 120px);
}
.qkb .qkb-hero h1 { font-size: clamp(26px, 4vw, 40px); margin-bottom: clamp(14px, 1.8vw, 20px); }
.qkb .qkb-hero-search { max-width: none; }
/* Only when Sultan is actually there. Every child of the .qkb-hero-art fallback
is absolutely positioned, so an `auto` track around it resolves to 0px while
its min-height:440px keeps the column tall - measured 1072px/0px, a 516px hero
with a blank right two-fifths. That is the DEFAULT path (the filter is empty
out of the box), so it would have shipped as the normal state of the page. */
@media (min-width: 1000px) {
.qkb .qkb-hero-grid.has-ask { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 3vw, 40px); }
}
/* ---- Sultan, sharing the hero behind a hairline. The mark is a bare orb: no
letter. The live chat widget still falls back to the persona initial, so the
two disagree until a psu avatar pack ships - noted in the CHANGELOG. ---- */
.qkb .qkb-hero-ask {
display: flex; align-items: center; gap: 17px; align-self: stretch;
padding-inline-start: clamp(22px, 2.6vw, 38px);
border-inline-start: 1px solid rgba(255, 255, 255, 0.13);
}
.qkb .qkb-ask-orb {
flex: none; width: 68px; height: 68px; border-radius: 50%;
background: radial-gradient(circle at 32% 28%, var(--qkb-on-dark, #7fe3b4), var(--q-primary) 68%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 0 8px rgba(127, 227, 180, 0.10);
}
.qkb .qkb-ask-h { font: 700 17px/1.25 var(--q-font); color: #fff; margin: 0 0 4px; }
.qkb .qkb-ask-sub { font: 400 13.5px/1.45 var(--q-font); color: rgba(220, 252, 231, 0.62); margin: 0; }
.qkb a.qkb-ask-cta {
display: inline-flex; align-items: center; margin-top: 12px; padding: 10px 21px;
border: 1px solid rgba(127, 227, 180, 0.5); border-radius: 999px;
font: 600 14px/1 var(--q-font); color: #bbf7d0; text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.qkb a.qkb-ask-cta:hover { background: rgba(127, 227, 180, 0.12); border-color: rgba(127, 227, 180, 0.75); }
@media (max-width: 999px) {
.qkb .qkb-hero-ask {
border-inline-start: 0; padding-inline-start: 0;
border-top: 1px solid rgba(255, 255, 255, 0.13); padding-top: 20px; margin-top: 4px;
}
}
/* ---- stages: the Rail. Supersedes .qkb-stage-grid / .qkb-stage-card. The
marker grows with --qkb-i and the line gains colour toward the summit, so a
fourth stage sizes itself. NOT a progress bar: nothing is done or locked. ---- */
/* The rail's visible head (founder, 2026-08-27). It was screen-reader-only, which
left the rail unlabelled between the hero and the sections - the single biggest
reason the page read as a stack of blocks rather than a page with parts. */
/* Design B (founder's pick): a green rule beside the text, not above it. The bar
stretches to the head's own height, so it grows with the two lines instead of
being a fixed tick that stops looking deliberate at another font size. */
.qkb .qkb-stage-head {
display: flex; gap: 14px; align-items: flex-start;
margin-bottom: clamp(30px, 4vw, 46px);
}
.qkb .qkb-stage-head-bar {
flex: none; width: 4px; align-self: stretch; min-height: 46px;
border-radius: 999px; background: var(--q-primary); margin-top: 5px;
}
.qkb .qkb-stage-head h2 {
margin: 0 0 8px; font: 700 clamp(22px, 2.8vw, 30px)/1.25 var(--q-font);
color: var(--q-text); letter-spacing: -0.015em; text-wrap: balance;
}
.qkb .qkb-stage-head p {
margin: 0; font: 400 clamp(14.5px, 1.5vw, 16.5px)/1.65 var(--q-font);
color: var(--q-text-secondary); max-width: 56ch; text-wrap: pretty;
}
.qkb .qkb-stage-rail {
position: relative; display: grid; grid-template-columns: 1fr;
gap: clamp(22px, 3vw, 30px); padding-top: 0;
}
.qkb .qkb-stage-line { display: none; }
.qkb a.qkb-stage-stop {
position: relative; display: block; text-decoration: none; color: inherit;
padding: 0; background: none; border: 0; box-shadow: none;
}
.qkb .qkb-stage-stop .qkb-stage-ic {
width: calc(40px + var(--qkb-i, 0) * 14px);
height: calc(40px + var(--qkb-i, 0) * 14px);
border-radius: 50%;
background: var(--q-surface-1); border: 2px solid var(--q-primary);
color: var(--q-primary); margin-bottom: 14px;
display: grid; place-items: center;
transition: background 0.15s ease, color 0.15s ease;
}
.qkb .qkb-stage-stop .qkb-stage-ic svg { width: 46%; height: 46%; }
/* The summit marker is NOT filled (founder, 2026-08-27: "don't put the green in the
left like this"). On an RTL rail the summit is the LEFTMOST stop, so a solid green
disc there put all the colour at the far left - the opposite of design A, where the
green starts at the RIGHT and travels with the cursor. Every marker is now the same
outline circle and the LINE carries the colour; the size still grows toward the
summit, which is what marks it. */
.qkb .qkb-stage-stop.is-summit .qkb-stage-ic { background: var(--q-surface-1); color: var(--q-primary); }
.qkb .qkb-stage-stop:hover .qkb-stage-ic { background: var(--q-primary); color: var(--q-on-primary, #fff); }
.qkb .qkb-stage-stop:focus-visible { outline: 3px solid var(--q-primary); outline-offset: 4px; border-radius: 12px; }
.qkb .qkb-stage-stop .qkb-stage-label { font: 700 clamp(17px, 2vw, 21px)/1.35 var(--q-font); margin: 0 0 8px; }
.qkb .qkb-stage-stop .qkb-stage-desc { font: 400 14px/1.7 var(--q-font); color: var(--q-muted); margin: 0 0 12px; }
@media (min-width: 720px) {
.qkb .qkb-stage-rail { grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 26px); }
/* The rail sits behind the markers, whose centre is 34px + half the FIRST
marker. Drawn right to left: faint at الانطلاقة, full green at the summit. */
.qkb .qkb-stage-line {
/* 3px, not أ's 2 (founder,2026-08-27):thinner read as a hairline rather than a route,and the fill lost its weight against the markers it connects. */ display:block;position:absolute;top:calc(54px - 3px / 2);height:3px;inset-inline:20px calc(100% / 3 - 34px - 2 * clamp(18px, 2.4vw, 26px) / 3);background:linear-gradient(to left,color-mix(in srgb,var(--q-primary) 34%,transparent),color-mix(in srgb,var(--q-primary) 6%,transparent))}.qkb .qkb-stage-line::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--fill,50%);border-radius:999px;background:linear-gradient(to left,var(--q-primary),color-mix(in srgb,var(--q-primary) 72%,var(--q-primary-2)));transition:width 0.55s cubic-bezier(.16,1,.3,1)}.qkb .qkb-stage-rail:has(.qkb-stage-stop:nth-of-type(1):hover){--fill:50%}.qkb .qkb-stage-stop:first-of-type .qkb-stage-ic{background:var(--q-primary);color:var(--q-on-primary,#fff)}.qkb .qkb-stage-stop:has(~.qkb-stage-stop:hover) .qkb-stage-ic{background:var(--q-primary);color:var(--q-on-primary,#fff);box-shadow:0 0 0 6px color-mix(in srgb,var(--q-primary) 14%,transparent)}.qkb .qkb-stage-rail:has(.qkb-stage-stop:nth-of-type(2):hover){--fill:50%}.qkb .qkb-stage-rail:has(.qkb-stage-stop:nth-of-type(3):hover){--fill:100%}@media (prefers-reduced-motion:reduce){.qkb .qkb-stage-line::after{transition:none}}.qkb a.qkb-stage-stop{padding-top:calc(34px - var(--qkb-i, 0) * 7px)}.qkb .qkb-stage-stop .qkb-stage-ic{position:relative;z-index:1}}.qkb .qkb-sections-wrap{background:none;border:0;padding:0;box-shadow:none}.qkb .qkb-sections-list{display:flex;flex-direction:column;gap:0}.qkb .qkb-sec-item{position:relative;display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:10px;min-height:44px;background:none;border:0;color:var(--q-text);text-decoration:none;transition:background 0.18s cubic-bezier(.22,1,.36,1)}.qkb .qkb-sec-item+.qkb-sec-item::before{content:"";position:absolute;top:0;inset-inline:10px;height:1px;background:var(--q-border-subtle)}.qkb .qkb-sec-item:hover{background:var(--q-surface-2)}.qkb .qkb-sec-item:hover::before,.qkb .qkb-sec-item:hover+.qkb-sec-item::before{background:#fff0}.qkb .qkb-sec-item-ic{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--acc-soft-bg);color:var(--q-primary);transition:background 0.18s ease}.qkb .qkb-sec-item-ic svg{width:19px;height:19px}.qkb .qkb-sec-item:hover .qkb-sec-item-ic{background:color-mix(in srgb,var(--q-primary) 16%,transparent)}.qkb .qkb-sec-item-label{flex:1;min-width:0;display:block;font:500 15px/1.5 var(--q-font);color:var(--q-text);unicode-bidi:plaintext;transition:color 0.18s ease}.qkb .qkb-sec-item:hover .qkb-sec-item-label{color:var(--q-primary)}.qkb .qkb-sec-item-count{flex:none;font:400 12px/1 var(--q-font);color:var(--q-text-secondary);font-variant-numeric:tabular-nums;border:0;padding:5px 10px;border-radius:999px;background:var(--q-surface-2);transition:background 0.18s ease,color 0.18s ease}.qkb .qkb-sec-item:hover .qkb-sec-item-count{background:var(--acc-soft-bg);color:var(--q-primary)}.qkb .qkb-qa{border-radius:20px 20px 20px 56px;background:var(--q-surface-2);box-shadow:none}.qkb .qkb-qa:hover{box-shadow:0 14px 30px -24px rgb(16 40 32 / .28)}.qkb .qkb-qa-bar{display:none}.qkb .qkb-qa-ic{width:42px;height:42px;border-radius:50%;background:var(--q-surface-1);border:1px solid var(--q-border);display:grid;place-items:center;color:var(--acc);flex:none}.qkb .qkb-qa-ic svg{width:18px;height:18px}.qkb .qkb-qa-caret{width:auto;height:auto;border-radius:0;background:none;border:0;color:var(--q-muted)}.qkb .qkb-qa:hover .qkb-qa-caret,.qkb .qkb-qa.is-open .qkb-qa-caret{background:none;border-color:#fff0;color:var(--acc)}.qkb .qkb-stage-stop:hover .qkb-stage-cta svg{margin-inline-start:3px}.qkb-suggest-toast{max-width:min(320px, calc(100vw - 40px))}.qkb .ans-body{overflow-wrap:break-word}.qkb .ans-body pre{overflow-x:auto;max-width:100%}.qkb .ans-body table{display:block;overflow-x:auto;max-width:100%}.qkb [hidden]{display:none!important}.qkb .qkb-sultan-chat{margin-top:16px}.qkb .qkb-hero-ask button.qkb-ask-cta{display:inline-flex;align-items:center;margin-top:12px;padding:10px 21px;border:1px solid rgb(127 227 180 / .5);border-radius:999px;background:#fff0;cursor:pointer;font:600 14px/1 var(--q-font);color:#bbf7d0;transition:background 0.15s ease,border-color 0.15s ease}.qkb .qkb-hero-ask button.qkb-ask-cta:hover,.qkb .qkb-hero-ask button.qkb-ask-cta[aria-expanded="true"]{background:rgb(127 227 180 / .12);border-color:rgb(127 227 180 / .75);color:#bbf7d0}.qkb .qkb-hero+.qkb-sultan-chat{margin-top:clamp(16px, 2.4vw, 24px)}.qkb .qkb-sultan{margin-top:32px;padding:20px 22px;background:var(--q-surface-1);border:1px solid var(--q-border);border-radius:var(--q-rad)}.qkb .qkb-sultan-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.qkb .qkb-sultan .qkb-ask-orb{width:46px;height:46px;flex:none}.qkb .qkb-sultan-h{font:700 16px/1.3 var(--q-font);color:var(--q-text);margin:0 0 3px}.qkb .qkb-sultan-sub{font:400 13px/1.5 var(--q-font);color:var(--q-muted);margin:0}.qkb .qkb-sultan button.qkb-ask-cta{margin-inline-start:auto;display:inline-flex;align-items:center;padding:10px 20px;border-radius:999px;cursor:pointer;background:var(--q-primary);color:var(--q-on-primary,#fff);border:1px solid #fff0;font:700 14px/1 var(--q-font);transition:background 0.15s ease,filter 0.15s ease}.qkb .qkb-sultan button.qkb-ask-cta:hover{background:var(--q-green-hover);transform:none}html[data-theme="dark"] .qkb .qkb-sultan button.qkb-ask-cta:hover{background:var(--q-primary);filter:brightness(1.08)}.qkb .qkb-open-list{display:grid;gap:10px}.qkb .qkb-open{position:relative;display:flex;align-items:flex-start;gap:12px;padding:clamp(13px, 1.5vw, 16px);background:var(--q-surface-1);border:1px solid var(--q-border);border-radius:18px;box-shadow:0 14px 32px -24px rgb(16 40 32 / .2),inset 0 1px 0 rgb(255 255 255 / .6);transition:box-shadow 0.3s ease,border-color 0.3s ease;animation:qkb-card-in 0.4s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i, 0) * 55ms)}.qkb .qkb-open:hover{box-shadow:0 24px 44px -26px rgb(16 40 32 / .34);border-color:var(--acc-soft-bd);transform:none}.qkb .qkb-open-ic{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--q-primary) 9%,transparent);color:var(--q-primary)}.qkb .qkb-open-ic svg{width:15px;height:15px}.qkb .qkb-open-main{min-width:0;flex:1}.qkb .qkb-open-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.qkb .qkb-open-waited{font:600 12px/1 var(--q-font);color:var(--q-muted)}.qkb .qkb-open h3{margin:5px 0 7px;overflow-wrap:anywhere;unicode-bidi:plaintext;font:800 clamp(14px, 1.3vw, 15px)/1.5 var(--q-font);color:var(--q-text)}.qkb .qkb-open-cta{display:inline-flex;align-items:center;gap:4px;font:700 12px/1 var(--q-font);color:var(--acc);text-decoration:none}.qkb .qkb-open-cta svg{width:14px;height:14px;transition:margin-inline-start 0.15s ease}.qkb .qkb-open-cta:hover svg{margin-inline-start:3px}.qkb .qkb-open-cta:hover{transform:none}.qkb .qkb-open-empty{padding:clamp(22px, 3vw, 32px);text-align:center;color:var(--q-muted);font:500 15px/1.7 var(--q-font);background:var(--q-surface-2);border:1px dashed var(--q-border);border-radius:18px}.qkb .qkb-open-empty p{margin:0}.qkb-thanks,.qkb .qkb-thanks-band{--qkb-t-gold-ink:#8a6d1a;--qkb-t-gold-ring:#f5c518;--qkb-t-gold-wash:rgba(245, 197, 24, 0.12);--qkb-t-gold-line:rgba(245, 197, 24, 0.32);--qkb-t-gap:clamp(38px, 6.5vw, 68px)}html[data-theme="dark"] .qkb-thanks,html[data-theme="dark"] .qkb .qkb-thanks-band{--qkb-t-gold-ink:#e8b53d;--qkb-t-gold-wash:rgba(245, 197, 24, 0.16);--qkb-t-gold-line:rgba(245, 197, 24, 0.30)}.qkb-thanks{max-width:860px;margin-inline:auto;padding-top:clamp(26px, 4.5vw, 52px);padding-bottom:clamp(44px, 7vw, 80px)}.qkb .qkb-thanks-hero{margin-bottom:var(--qkb-t-gap);text-align:center}.qkb .qkb-thanks-hero h1{margin:0 auto;max-width:20ch;font:700 clamp(26px, 3.7vw, 44px)/1.4 var(--q-font);letter-spacing:-.01em;text-wrap:balance;color:var(--q-text)}.qkb .qkb-thanks-hero p{margin:14px auto 0;max-width:46ch;font:600 clamp(15px, 1.4vw, 17px)/1.9 var(--q-font);color:var(--q-primary)}.qkb .qkb-thanks-sl{display:flex;align-items:baseline;gap:11px;margin:0 0 16px;flex-wrap:wrap;row-gap:6px}.qkb .qkb-thanks-sl h2{margin:0;flex:none;font:700 16px/1.3 var(--q-font);color:var(--q-text)}.qkb .qkb-thanks-sl em{font:500 12px/1.4 var(--q-font);font-style:normal;color:var(--q-muted);font-variant-numeric:tabular-nums}.qkb .qkb-thanks-line{flex:1;min-width:30px;height:1px;background:var(--q-border)}.qkb .qkb-thanks-how{margin-inline-start:auto;flex:none;display:inline-flex;align-items:center;gap:5px;font:700 12.5px/1 var(--q-font);color:var(--q-primary);text-decoration:none;padding:6px 0}.qkb .qkb-thanks-how:hover{text-decoration:underline}.qkb .qkb-thanks-how svg{width:13px;height:13px;flex:none}.qkb .qkb-thanks-grid{list-style:none;margin:0 0 var(--qkb-t-gap);padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(268px, 100%),1fr))}.qkb .qkb-thanks-card{display:flex;flex-direction:column;padding:20px 20px 18px;background:var(--q-surface-1);border:1px solid var(--q-border);border-radius:16px;box-shadow:0 1px 2px rgb(16 40 32 / .05),0 6px 16px -8px rgb(16 40 32 / .18);transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease}.qkb .qkb-thanks-card.is-openable{cursor:pointer}.qkb .qkb-thanks-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgb(16 40 32 / .34);border-color:color-mix(in srgb,var(--q-primary) 30%,var(--q-border))}@media (prefers-reduced-motion:reduce){.qkb .qkb-thanks-card{transition:box-shadow 0.18s ease,border-color 0.18s ease}.qkb .qkb-thanks-card:hover{transform:none}}.qkb .qkb-thanks-head{display:flex;align-items:center;gap:14px;min-width:0;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--q-border)}.qkb .qkb-thanks-av{width:56px;height:56px;flex-shrink:0;border-radius:50%;object-fit:cover;border:3px solid var(--qkb-t-gold-ring);box-shadow:0 4px 12px rgb(245 197 24 / .25)}.qkb .qkb-thanks-id{flex:1;min-width:0}.qkb .qkb-thanks-name{margin:0 0 5px;font:700 1.15rem/1.3 var(--q-font);color:var(--q-text);unicode-bidi:plaintext;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qkb .qkb-thanks-level{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--qkb-t-gold-wash);border:1px solid var(--qkb-t-gold-line);font:600 0.8rem/1.4 var(--q-font);color:var(--qkb-t-gold-ink)}.qkb .qkb-thanks-stats{display:flex;gap:12px}.qkb .qkb-thanks-stat{flex:1;min-width:0;text-align:center;padding:14px 10px;background:var(--q-surface-2);border:1px solid var(--q-border);border-radius:12px;transition:box-shadow 0.2s ease}.qkb .qkb-thanks-stat:hover{box-shadow:0 4px 12px rgb(30 102 73 / .08)}.qkb .qkb-thanks-val{display:block;margin-bottom:2px;font:800 1.4rem/1.2 var(--q-font);color:var(--q-primary);font-variant-numeric:tabular-nums;direction:ltr}.qkb .qkb-thanks-stat.is-q .qkb-thanks-val{color:var(--qkb-t-gold-ink)}@supports (background-clip:text) or (-webkit-background-clip:text){.qkb .qkb-thanks-stat.is-q .qkb-thanks-val{background:linear-gradient(90deg,#f5c518,#cfae2f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:#fff0;color:#fff0}}.qkb .qkb-thanks-lbl{display:block;font:500 0.75rem/1.5 var(--q-font);color:var(--q-muted)}.qkb .qkb-thanks-grid:has(+.qkb-thanks-note){margin-bottom:14px}.qkb .qkb-thanks-note{margin:0 0 var(--qkb-t-gap);font:500 12.5px/1.7 var(--q-font);color:var(--q-muted)}.qkb .qkb-thanks-medals{list-style:none;margin:0 0 var(--qkb-t-gap);padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(200px, 100%),1fr))}.qkb .qkb-thanks-medal{display:flex;align-items:center;gap:11px;min-width:0;padding:13px 14px;background:var(--q-surface-1);border:1px solid var(--q-border);border-radius:14px;box-shadow:0 1px 2px rgb(16 40 32 / .05),0 4px 12px -8px rgb(16 40 32 / .16)}.qkb .qkb-thanks-medal-ic{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--q-primary) 10%,transparent);border:1px solid var(--q-border);color:var(--q-primary)}.qkb .qkb-thanks-medal-ic svg{width:17px;height:17px}.qkb .qkb-thanks-medal.is-t2 .qkb-thanks-medal-ic{background:color-mix(in srgb,var(--q-primary-2) 16%,transparent);border-color:color-mix(in srgb,var(--q-primary-2) 34%,transparent);color:var(--q-primary-2)}.qkb .qkb-thanks-medal.is-t3 .qkb-thanks-medal-ic{background:color-mix(in srgb,var(--q-primary) 20%,transparent);border-color:color-mix(in srgb,var(--q-primary) 38%,transparent);color:var(--q-primary)}.qkb .qkb-thanks-medal-tx{min-width:0}.qkb .qkb-thanks-medal-tx b{display:block;font:700 13.5px/1.4 var(--q-font);color:var(--q-text)}.qkb .qkb-thanks-medal-tx span{display:block;margin-top:1px;font:500 12px/1.5 var(--q-font);color:var(--q-muted);font-variant-numeric:tabular-nums}.qkb .qkb-thanks-cta,.qkb .qkb-thanks-band{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 24px;border-radius:18px;overflow:hidden;color:#fff;background:radial-gradient(120% 160% at 88% 0%,rgb(110 231 183 / .2),transparent 58%),linear-gradient(135deg,#1e6649 0%,#16533b 60%,#0a2b21 100%)}.qkb .qkb-thanks-cta-tx,.qkb .qkb-thanks-band-tx{flex:1 1 300px;min-width:0}.qkb .qkb-thanks-cta-tx b,.qkb .qkb-thanks-band-tx b{display:block;font:700 19px/1.5 var(--q-font);color:#fff}.qkb .qkb-thanks-cta-tx span,.qkb .qkb-thanks-band-tx span{display:block;margin-top:6px;font:500 13.5px/1.8 var(--q-font);color:rgb(255 255 255 / .85)}.qkb .qkb-thanks-btn,.qkb .qkb-thanks-band-btn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:12px 18px;border-radius:12px;background:#fff;color:#16533b;font:700 14px/1 var(--q-font);text-decoration:none;transition:background 0.2s ease,box-shadow 0.2s ease}.qkb .qkb-thanks-btn:hover,.qkb .qkb-thanks-band-btn:hover{background:#eafaf1;box-shadow:0 4px 14px rgb(0 0 0 / .18)}.qkb .qkb-thanks-btn svg,.qkb .qkb-thanks-band-btn svg{width:15px;height:15px;flex:none}.qkb .qkb-thanks-band{margin-top:26px}@media (max-width:380px){.qkb .qkb-thanks-hero h1{font-size:20px}.qkb .qkb-thanks-head{gap:11px}}.qkb .qkb-thanks-card.is-anon .qkb-thanks-head:not(:has(.qkb-thanks-av)){gap:0}.qkb .qkb-thanks-pop[hidden]{display:none}.qkb .qkb-thanks-pop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}.qkb .qkb-thanks-pop-veil{position:absolute;inset:0;background:rgb(10 43 33 / .55);backdrop-filter:blur(2px)}.qkb .qkb-thanks-pop-card{position:relative;width:min(360px, 100%);max-height:calc(100vh - 40px);overflow-y:auto;padding:26px 22px 22px;border-radius:18px;background:var(--q-surface-1);border:1px solid var(--q-border);box-shadow:0 24px 60px -20px rgb(16 40 32 / .55);text-align:center}.qkb .qkb-thanks-pop-x{position:absolute;inset-block-start:12px;inset-inline-start:12px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--q-surface-2);color:var(--q-muted);cursor:pointer;transition:background 0.18s ease,color 0.18s ease}.qkb .qkb-thanks-pop-x:hover{background:var(--q-surface-3);color:var(--q-text)}.qkb .qkb-thanks-pop-x svg{width:15px;height:15px}.qkb .qkb-thanks-pop-av{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--qkb-t-gold-ring);box-shadow:0 4px 14px rgb(245 197 24 / .28)}.qkb .qkb-thanks-pop-name{margin:12px 0 6px;font:700 1.25rem/1.35 var(--q-font);color:var(--q-text);unicode-bidi:plaintext}.qkb .qkb-thanks-pop-level{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--qkb-t-gold-wash);border:1px solid var(--qkb-t-gold-line);font:600 0.8rem/1.4 var(--q-font);color:var(--qkb-t-gold-ink)}.qkb .qkb-thanks-pop-level[hidden]{display:none}.qkb .qkb-thanks-pop-stats{display:flex;gap:12px;margin-top:18px}.qkb .qkb-thanks-pop-ach{margin-top:18px;padding-top:16px;border-top:1px solid var(--q-border)}.qkb .qkb-thanks-pop-ach[hidden]{display:none}.qkb .qkb-thanks-pop-cap{display:block;margin-bottom:9px;font:600 12px/1.4 var(--q-font);color:var(--q-muted)}.qkb .qkb-thanks-pop-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.qkb .qkb-thanks-pop-chip{padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--q-primary) 10%,transparent);border:1px solid var(--q-border);font:600 12px/1.5 var(--q-font);color:var(--q-primary)}.qkb .qkb-thanks-name.is-openable{cursor:pointer;text-decoration:underline;text-decoration-color:#fff0;text-underline-offset:3px;transition:text-decoration-color 0.18s ease,color 0.18s ease}.qkb .qkb-thanks-name.is-openable:hover{color:var(--q-primary);text-decoration-color:currentColor}.qkb .qkb-thanks-name.is-openable:focus-visible{outline:2px solid var(--q-primary);outline-offset:3px;border-radius:6px}.qkb .qkb-thanks-pop-badge-ic{display:grid;place-items:center;width:64px;height:64px;margin:0 auto;border-radius:50%;background:color-mix(in srgb,var(--q-primary) 10%,transparent);border:1px solid var(--q-border);color:var(--q-primary)}.qkb .qkb-thanks-pop-badge-ic .qkb-thanks-medal-ic{width:100%;height:100%;border:0;background:none}.qkb .qkb-thanks-pop-badge-ic .qkb-thanks-medal-ic svg{width:26px;height:26px}.qkb .qkb-thanks-pop-holders{display:block;margin-top:4px;font:500 12px/1.5 var(--q-font);color:var(--q-muted);font-variant-numeric:tabular-nums}.qkb .qkb-thanks-pop-rules{margin-top:18px;padding-top:16px;border-top:1px solid var(--q-border);text-align:start}.qkb .qkb-thanks-pop-rulelist{list-style:none;margin:0;padding:0}.qkb .qkb-thanks-pop-rulelist li{position:relative;padding-inline-start:22px;margin-bottom:10px;font:500 13.5px/1.7 var(--q-font);color:var(--q-text)}.qkb .qkb-thanks-pop-rulelist li:last-child{margin-bottom:0}.qkb .qkb-thanks-pop-rulelist li::before{content:"";position:absolute;inset-inline-start:2px;top:6px;width:11px;height:6px;border-left:2px solid var(--q-primary);border-bottom:2px solid var(--q-primary);transform:rotate(-45deg)}.qkb .qkb-thanks-pop-cap+.qkb-thanks-pop-rulelist{margin-top:10px}.qkb .qkb-thanks-medal.is-openable{cursor:pointer;transition:box-shadow 0.18s ease,border-color 0.18s ease}.qkb .qkb-thanks-medal.is-openable:hover{box-shadow:0 8px 20px -12px rgb(16 40 32 / .32);border-color:color-mix(in srgb,var(--q-primary) 30%,var(--q-border))}.qkb .qkb-thanks-medal-tx b.is-openable{cursor:pointer;text-decoration:underline;text-decoration-color:#fff0;text-underline-offset:3px;transition:text-decoration-color 0.18s ease,color 0.18s ease}.qkb .qkb-thanks-medal.is-openable:hover .qkb-thanks-medal-tx b.is-openable{color:var(--q-primary);text-decoration-color:currentColor}.qkb .qkb-thanks-medal-tx b.is-openable:focus-visible{outline:2px solid var(--q-primary);outline-offset:3px;border-radius:6px}@media (max-width:900px){.qkb-home .qkb-main-grid,.qkb-home .qkb-stages{padding-inline:clamp(14px, 4vw, 20px)}.qkb-home .qkb-content{order:1}.qkb-home .qkb-side{order:2}.qkb-home .qkb-side .qkb-thanks-band{padding:16px;border-radius:14px}.qkb-home .qkb-side .qkb-thanks-band-tx b{font-size:15.5px}.qkb-home .qkb-side .qkb-thanks-band-tx span{font-size:12.5px;margin-top:4px}.qkb-home .qkb-side .qkb-thanks-band-btn{margin-top:12px;padding:10px 16px;font-size:13.5px}.qkb .qkb-sec-item{min-height:40px;padding:9px 10px;gap:12px}.qkb .qkb-sec-item-ic{width:32px;height:32px}.qkb .qkb-sec-item-ic svg{width:17px;height:17px}.qkb .qkb-sec-item-label{font-size:14.5px}.qkb .qkb-content-head-bar{min-height:34px}.qkb .qkb-stage-head-bar{min-height:40px}}@media (max-width:720px){.qkb .qkb-trust-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.qkb .feed-grid{grid-template-columns:1fr}.qkb .hero h1{font-size:22px}.qkb-stat-div{display:none}.qkb-hero-sub{font-size:16px;margin-bottom:24px}.qkb-hero-search{flex-wrap:wrap;gap:8px;padding:8px;border-radius:20px}.qkb-hero-search .qkb-search{flex:1 1 auto;min-width:0}.qkb-hero-search-ic{padding-inline:8px 2px}button.qkb-hero-search-btn{flex:1 1 100%;padding:0;min-height:50px}.qkb-hero-pop{gap:8px}.qkb-hero-pop a{padding:7px 13px}.qkb-cta-card{padding:24px;border-radius:28px}.qkb .q-head{padding-bottom:16px;margin-bottom:22px}.qkb .ans-head{padding:12px 14px;gap:8px}.qkb .ans-body{padding:18px 16px}.qkb .ans.official .ans-body{font-size:15.5px}.qkb .qkb-votes{padding:10px 16px}.qkb .qkb-answers{margin-top:26px}.qkb .qkb-answers-h{font-size:16px}.qkb-feedback{margin-top:26px}.qkb .qkb-noans{padding:26px 18px}.qkb .qkb-hero{padding:24px 18px;border-radius:26px 26px 26px 56px}.qkb .qkb-hero h1{font-size:clamp(24px, 7.5vw, 32px)}.qkb .qkb-stage-rail{gap:20px}.qkb .qkb-stage-stop .qkb-stage-label{font-size:18px;margin-bottom:6px}.qkb .qkb-stage-stop .qkb-stage-desc{margin-bottom:12px}.qkb .crumb{gap:10px 12px}.qkb .crumb a{padding:4px 0}.qkb .qkb-report{padding:6px 8px;min-height:28px}.qkb .rail-list a{padding:12px 10px}.qkb .card h3{font-size:15.5px}.qkb .card-foot{gap:10px;margin-top:12px;padding-top:10px}.qkb button.qkb-qa-head{padding:18px 16px;gap:12px}.qkb .qkb-qa-body{padding:0 16px 18px}.qkb .qkb-qa-head h3{font-size:16px}.qkb .qkb-qa-caret{width:34px;height:34px;border-radius:11px}.qkb .qkb-qa-caret svg{width:16px;height:16px}.qkb .qkb-intent-card{padding:20px 16px}.qkb .qkb-intent-chip{padding:10px 14px;font-size:13.5px}.qkb .qkb-sections-card{padding:18px 16px}.qkb .qkb-featured{padding:20px 16px}.qkb .qkb-featured-q{font-size:17px}.qkb .qkb-sultan{margin-top:26px;padding:16px}.qkb .qkb-sultan-head{gap:12px}.qkb .qkb-sultan .qkb-ask-orb{width:40px;height:40px}.qkb .qkb-sultan button.qkb-ask-cta{margin-inline-start:0;flex:1 1 100%;justify-content:center}.qkb .qkb-hero-ask button.qkb-ask-cta{width:100%;justify-content:center}.qkb .qkb-open{border-radius:16px}.qkb .qkb-open-empty{border-radius:16px}.qkb .qkb-thanks-hero{margin-bottom:22px}.qkb .qkb-thanks-grid{grid-template-columns:1fr;gap:10px;margin-bottom:26px}.qkb .qkb-thanks-card{border-radius:14px}.qkb .qkb-thanks-av{width:48px;height:48px;border-width:2px}.qkb .qkb-thanks-name{font-size:1.05rem}.qkb .qkb-thanks-medals{grid-template-columns:1fr}.qkb .qkb-thanks-cta,.qkb .qkb-thanks-band{padding:18px 18px;border-radius:16px;gap:14px}.qkb .qkb-thanks-cta-tx b,.qkb .qkb-thanks-band-tx b{font-size:17px}.qkb .qkb-thanks-btn,.qkb .qkb-thanks-band-btn{flex:1 1 100%;justify-content:center}.qkb .qkb-thanks-how{margin-inline-start:0}.qkb .qkb-thanks-pop-card{padding:22px 16px 18px;border-radius:16px}.qkb .qkb-thanks-pop-av{width:72px;height:72px}.qkb .qkb-thanks-pop-stats{gap:8px}.qkb{--qkbp-gut:clamp(14px, 4vw, 20px);--qkbp-pad-1:14px;--qkbp-pad-2:16px;--qkbp-pad-3:20px;--qkbp-gap-1:8px;--qkbp-gap-2:12px;--qkbp-gap-3:20px;--qkbp-r-1:14px;--qkbp-r-2:20px;--qkbp-fs-xs:13px;--qkbp-fs-sm:14.5px;--qkbp-fs-md:15.5px;--qkbp-fs-lg:17px;--qkbp-fs-h:clamp(20px, 5.6vw, 24px);--qkbp-tap:44px}.qkb .ans-body table{font-size:var(--qkbp-fs-xs)}.qkb .ans-body table td,.qkb .ans-body table th{padding:7px 8px}.qkb .qkb-hero-pop a{min-height:var(--qkbp-tap);display:inline-flex;align-items:center}.qkb .crumb a{min-height:var(--qkbp-tap);display:inline-flex;align-items:center}.qkb button.qkb-feedback-btn{min-height:var(--qkbp-tap);padding-block:0}.qkb .qkb-search-input{min-height:var(--qkbp-tap)}.qkb .qkb-hero-search .qkb-search-input{min-height:auto}.qkb .qkb-thanks-how{min-height:var(--qkbp-tap);display:inline-flex;align-items:center}.qkb .qkb-thanks-btn,.qkb .qkb-thanks-band-btn{min-height:var(--qkbp-tap)}.qkb .qkb-sec-item-count,.qkb .qkb-tier-badge,.qkb .qkb-qa-sec,.qkb .qkb-qa-views,.qkb .cat{font-size:var(--qkbp-fs-xs)}.qkb .qkb-thanks-lbl{font-size:var(--qkbp-fs-xs)}.qkb .rail-cta>p{font-size:var(--qkbp-fs-xs)}.qkb-home .qkb-side .qkb-thanks-band-tx span{font-size:var(--qkbp-fs-xs)}.qkb .qkb-thanks-sl em{font-size:var(--qkbp-fs-xs)}.qkb .qkb-thanks-level{font-size:var(--qkbp-fs-xs)}.qkb .qkb-thanks-medal-tx span{font-size:var(--qkbp-fs-xs)}.qkb .qkb-thanks-pop-cap{font-size:var(--qkbp-fs-xs)}body.tax-qkb_section .qkb .card .cat,body.tax-qkb_category .qkb .card .cat,body.tax-qkb_tag .qkb .card .cat{display:none}.qkb .card{padding:var(--qkbp-pad-1) var(--qkbp-pad-2);border-radius:var(--qkbp-r-1)}.qkb .qkb-thanks-card{padding:var(--qkbp-pad-2) var(--qkbp-pad-2) var(--qkbp-pad-1)}.qkb .qkb-thanks-stat{padding:var(--qkbp-gap-1)}.qkb .qkb-thanks-val{font-size:1.15rem;margin-bottom:0}.qkb .qkb-thanks-stats{gap:var(--qkbp-gap-1)}.qkb .qkb-thanks-head{padding-bottom:var(--qkbp-gap-2);margin-bottom:var(--qkbp-gap-2)}.qkb-home .qkb-side{order:1}.qkb-home .qkb-content{order:2}.qkb-thanks{padding-inline:var(--qkbp-gut)}.qkb .qkb-stage-head{gap:10px;margin-bottom:var(--qkbp-gap-2)}.qkb .qkb-stage-head-bar{min-height:22px;margin-top:2px}.qkb .qkb-stage-head h2{font-size:var(--qkbp-fs-lg);margin-bottom:0}.qkb .qkb-stage-head p{display:none}.qkb .qkb-stage-rail{grid-template-columns:repeat(3,1fr);gap:var(--qkbp-gap-2);padding-top:0}.qkb a.qkb-stage-stop{text-align:center}.qkb .qkb-stage-stop .qkb-stage-ic{width:36px;height:36px;margin:0 auto 8px}.qkb .qkb-stage-stop .qkb-stage-ic svg{width:44%;height:44%}.qkb .qkb-stage-stop .qkb-stage-desc,.qkb .qkb-stage-stop .qkb-stage-cta{display:none}.qkb .qkb-stage-stop .qkb-stage-label{font-size:var(--qkbp-fs-sm);line-height:1.3;margin:0}.qkb .qkb-hero{padding:16px 16px;border-radius:24px 24px 24px 48px}.qkb .qkb-hero h1{margin-bottom:8px}.qkb-hero-grid{gap:10px}.qkb .qkb-hero-main{min-width:0}.qkb-hero-pop{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-top:10px;padding-block:2px;scroll-padding-inline:4px}.qkb-hero-pop .lbl,.qkb-hero-pop a{flex-shrink:0;white-space:nowrap}.qkb .qkb-hero-ask{padding-top:10px;margin-top:0;gap:10px}.qkb .qkb-hero-ask .qkb-ask-orb{width:36px;height:36px}.qkb .qkb-ask-h{font-size:var(--qkbp-fs-sm);margin-bottom:2px}.qkb .qkb-hero-ask .qkb-ask-sub{font-size:var(--qkbp-fs-xs)}.qkb .qkb-content-head{padding-bottom:10px;margin-bottom:var(--qkbp-gap-2)}.qkb .qkb-content-head .qkb-sec-h{font-size:var(--qkbp-fs-h);margin-bottom:4px}.qkb .qkb-content-head .qkb-sec-sub{font-size:var(--qkbp-fs-sm)}.qkb-qa-list{gap:var(--qkbp-gap-1)}.qkb button.qkb-qa-head{padding:10px 14px}.qkb .qkb-qa-tier{margin-bottom:3px}.qkb .qkb-qa-meter{margin-top:3px}.qkb .qkb-qa-caret{width:26px;height:26px;border-radius:9px}.qkb .qkb-qa-caret svg{width:13px;height:13px}.qkb .qkb-content-sub{padding:12px;margin-top:var(--qkbp-gap-1)}.qkb .qkb-content-head.is-sub{margin-bottom:var(--qkbp-gap-1);gap:6px}.qkb .qkb-content-head.is-sub .qkb-sec-h{font-size:var(--qkbp-fs-md)}.qkb .qkb-open-list{gap:var(--qkbp-gap-1)}.qkb .qkb-open{padding:10px}.qkb .qkb-open-empty{padding:var(--qkbp-pad-1)}}