/* hrai — أزرار الإجراءات (hrai-buttons.js) */
.hb-act, .hb-cm, .hb-split, .hb-menu { --hb-ink: #111; --hb-paper: #fff; --hb-line: #e6e6e6; --hb-soft: #f4f4f4; --hb-mute: #777; --hb-bad: #dc2626; --hb-ok: #16a34a; font-family: 'Tajawal', sans-serif; }
.hb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hb-morph { display: inline-block; overflow: hidden; vertical-align: top; }
.hb-morph[data-morphing] { overflow: visible; }
.hb-glyphs { position: relative; display: inline-flex; white-space: pre; }
.hb-glyph { display: inline-block; white-space: pre; }
.hb-slot { position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; flex: none; }
.hb-slot[hidden] { display: none; }
.hb-phase { grid-area: 1 / 1; display: grid; place-items: center; }
.hb-check path, .hb-disc path { stroke-dasharray: 1; }
html[dir="rtl"] .hb-phase[data-k="arrow"] svg { transform: scaleX(-1); }
.hb-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: hbSpin .7s linear infinite; opacity: .9; }
.hb-cm .hb-spin { width: 14px; height: 14px; }
@keyframes hbSpin { to { transform: rotate(360deg); } }

/* ── زر الإجراء ── */
.hb-act { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--hb-ink); color: var(--hb-paper); font: 800 14px 'Tajawal', sans-serif; cursor: pointer; transition: background .2s, box-shadow .25s; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); -webkit-tap-highlight-color: transparent; }
.hb-act:hover { box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35); }
.hb-act:focus-visible { outline: 2px solid var(--hb-ink); outline-offset: 3px; }
.hb-act:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.hb-act[aria-busy="true"] { cursor: progress; }
.hb-act[data-state="success"] { background: #0f0f0f; }
.hb-content { display: inline-flex; align-items: center; gap: 9px; }
.hb-act.hb-ghost { background: var(--hb-paper); color: var(--hb-ink); box-shadow: inset 0 0 0 1px var(--hb-line); }
.hb-act.hb-ghost:hover { background: var(--hb-soft); box-shadow: inset 0 0 0 1px var(--hb-line); }
.hb-act.hb-sm { height: 38px; padding: 0 16px; font-size: 13px; }

/* ── تأكيد في مكانه ── */
.hb-cm { position: relative; display: inline-flex; outline: none; vertical-align: middle; }
.hb-surface { position: relative; display: flex; justify-content: center; align-items: center; height: 44px; border-radius: 999px; background: var(--hb-paper); box-shadow: inset 0 0 0 1px var(--hb-line); overflow: hidden; transition: background .25s, box-shadow .25s; }
.hb-cm[data-state="idle"] .hb-surface:hover { background: var(--hb-soft); }
.hb-cm[data-state="confirming"] .hb-surface { box-shadow: inset 0 0 0 1px var(--hb-line), 0 6px 20px -8px rgba(0, 0, 0, .2); }
.hb-face { display: flex; align-items: center; gap: 6px; padding: 0 5px; white-space: nowrap; height: 100%; }
.hb-face.hb-face-out { position: absolute; top: 0; left: 50%; translate: -50% 0; pointer-events: none; }
.hb-part { display: inline-flex; align-items: center; }
.hb-trigger { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0; background: none; color: var(--hb-ink); font: 700 13.5px 'Tajawal', sans-serif; cursor: pointer; border-radius: 999px; }
.hb-trigger:disabled { opacity: .45; cursor: not-allowed; }
.hb-ticon { display: grid; place-items: center; color: var(--hb-mute); }
.hb-cm[data-tone="danger"] .hb-ticon { color: var(--hb-bad); }
.hb-trigger.hb-icon-only { width: 34px; padding: 0; justify-content: center; }
.hb-prompt { font: 800 13.5px 'Tajawal', sans-serif; color: var(--hb-ink); padding-inline: 10px 4px; }
.hb-secondary, .hb-confirm { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; font: 800 13px 'Tajawal', sans-serif; cursor: pointer; transition: background .2s, transform .15s; }
.hb-secondary { background: var(--hb-soft); color: var(--hb-ink); }
.hb-secondary:hover { background: #ebebeb; }
.hb-confirm { background: var(--hb-ink); color: var(--hb-paper); }
.hb-cm[data-tone="danger"] .hb-confirm { background: var(--hb-bad); color: #fff; }
.hb-confirm:active, .hb-secondary:active { transform: scale(.96); }
.hb-cm button:focus-visible { outline: 2px solid var(--hb-ink); outline-offset: 2px; }
.hb-cm[data-tone="danger"] .hb-confirm:focus-visible { outline-color: var(--hb-bad); }
.hb-status { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font: 700 13.5px 'Tajawal', sans-serif; color: var(--hb-ink); }
.hb-disc circle { fill: var(--hb-ok); }
.hb-disc path { stroke: #fff; }
.hb-bad { color: var(--hb-bad); }
.hb-cm.hb-sm .hb-surface { height: 36px; }
.hb-cm.hb-sm .hb-face { padding: 0 3px; gap: 4px; }
.hb-cm.hb-sm .hb-trigger, .hb-cm.hb-sm .hb-secondary, .hb-cm.hb-sm .hb-confirm { height: 30px; font-size: 12.5px; padding: 0 11px; }
.hb-cm.hb-sm .hb-trigger.hb-icon-only { width: 30px; padding: 0; }
.hb-cm.hb-sm .hb-prompt { font-size: 12.5px; }
/* زر أيقونة بدون إطار وهو مرتاح */
.hb-cm.hb-bare[data-state="idle"] .hb-surface { box-shadow: none; background: transparent; }
.hb-cm.hb-bare[data-state="idle"] .hb-surface:hover { background: rgba(220, 38, 38, .08); }

/* ── زر مقسوم ── */
.hb-split { position: relative; display: inline-flex; align-items: stretch; height: 44px; border-radius: 999px; background: var(--hb-ink); color: var(--hb-paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.hb-split-main, .hb-split-trigger { border: 0; background: none; color: inherit; cursor: pointer; font: 800 14px 'Tajawal', sans-serif; display: inline-flex; align-items: center; transition: background .2s; -webkit-tap-highlight-color: transparent; }
.hb-split-main { padding-inline: 20px 14px; border-start-start-radius: 999px; border-end-start-radius: 999px; }
.hb-split-trigger { position: relative; padding-inline: 11px 14px; border-start-end-radius: 999px; border-end-end-radius: 999px; }
.hb-split-trigger::before { content: ""; position: absolute; inset-inline-start: 0; top: 11px; bottom: 11px; width: 1px; background: currentColor; opacity: .22; }
.hb-split-main:hover, .hb-split-trigger:hover, .hb-split.hb-open .hb-split-trigger { background: rgba(255, 255, 255, .1); }
.hb-split-main:active { transform: scale(.98); }
.hb-split-trigger svg { transition: transform .38s cubic-bezier(.3, 1.3, .5, 1); }
.hb-split.hb-open .hb-split-trigger svg { transform: rotate(180deg); }
.hb-split button:focus-visible { outline: 2px solid var(--hb-ink); outline-offset: 3px; }
.hb-split button:disabled { opacity: .45; cursor: not-allowed; }
.hb-split-slot { display: inline-flex; }
.hb-split-content { display: inline-flex; align-items: center; gap: 8px; }
.hb-main-icon { width: 16px; height: 16px; }
.hb-split.hb-secondary-split { background: var(--hb-paper); color: var(--hb-ink); box-shadow: inset 0 0 0 1px var(--hb-line); }
.hb-secondary-split .hb-split-main:hover, .hb-secondary-split .hb-split-trigger:hover, .hb-secondary-split.hb-open .hb-split-trigger { background: var(--hb-soft); }
.hb-split.hb-sm { height: 38px; }
.hb-split.hb-sm .hb-split-main { font-size: 13px; padding-inline: 15px 11px; }
.hb-split.hb-sm .hb-split-trigger { padding-inline: 9px 11px; }

.hb-menu { position: fixed; z-index: 2000; min-width: 200px; max-width: calc(100vw - 24px); padding: 5px; border-radius: 14px; background: var(--hb-paper); color: var(--hb-ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 16px 40px -10px rgba(0, 0, 0, .22); outline: none; }
.hb-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; background: none; border-radius: 9px; color: inherit; font: 600 13.5px 'Tajawal', sans-serif; text-align: start; cursor: pointer; outline: none; }
.hb-item:focus, .hb-item:hover { background: var(--hb-soft); }
.hb-item:disabled { opacity: .45; cursor: not-allowed; }
.hb-item-icon { display: grid; place-items: center; width: 18px; color: var(--hb-mute); }
.hb-item.hb-destructive { color: var(--hb-bad); }
.hb-item.hb-destructive .hb-item-icon { color: var(--hb-bad); }
.hb-item.hb-destructive:focus, .hb-item.hb-destructive:hover { background: rgba(220, 38, 38, .08); }
/* القائمة في body (برا الـinvert) فلها ألوان داكنة خاصة */
html[data-theme="dark"] .hb-menu { --hb-ink: #f2f2f2; --hb-paper: #212227; --hb-soft: #2a2b31; --hb-mute: #999; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 40px -10px rgba(0, 0, 0, .7); }

@media (prefers-reduced-motion: reduce) { .hb-spin { animation-duration: 2s; } .hb-split-trigger svg { transition: none; } }
/* صفحات الحساب برا الـinvert: تاخذ ألوان الحساب (فاتح وداكن) */
#hrai-acc-view .hb-act, #hrai-acc-view .hb-cm, #hrai-acc-view .hb-split { --hb-ink: var(--acc-text, #111); --hb-paper: var(--acc-surface, #fff); --hb-line: var(--acc-border-2, #e6e6e6); --hb-soft: var(--acc-surface-2, #f4f4f4); --hb-mute: var(--acc-muted, #888); }
html[data-theme="dark"] #hrai-acc-view .hb-secondary:hover { background: var(--acc-surface-3, #1a1a1a); }
html[data-theme="dark"] #hrai-acc-view .hb-cm[data-tone="danger"] .hb-confirm { background: #ef4444; }
/* زر تسجيل الخروج في الشريط الجانبي: بعرض الشريط */
.acc-side-logout { display: flex; margin-top: 2px; }
.acc-side-logout .hb-cm { width: 100%; }
.acc-side-logout .hb-surface { width: 100%; box-shadow: none; background: transparent; justify-content: flex-start; height: 42px; border-radius: 12px; }
.acc-side-logout .hb-cm[data-state="idle"] .hb-surface:hover { background: var(--acc-surface-2, #f4f4f4); }
.acc-side-logout .hb-cm:not([data-state="idle"]) .hb-surface { background: var(--acc-surface-2, #f4f4f4); }
.acc-side-logout .hb-trigger { width: 100%; justify-content: flex-start; gap: 11px; padding: 0 7px; font-weight: 600; color: #dc2626; }
.acc-side-logout .hb-ticon { color: #dc2626; }
.acc-side-logout .hb-face { padding: 0 4px; }
.acc-side-logout .hb-prompt { padding-inline: 6px 2px; }
/* داخل صف نتيجة الحاسبة (أزراره فيها تنسيق عام للـbutton) */
.acc-save-row .hb-split { flex: 1 1 200px; height: 44px; min-width: 0; }
.acc-save-row .hb-split button { flex: none; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: 14px; box-shadow: none; }
.acc-save-row .hb-split .hb-split-main { flex: 1; justify-content: center; padding-inline: 18px 12px; border-start-start-radius: 999px; border-end-start-radius: 999px; }
.acc-save-row .hb-split .hb-split-trigger { padding-inline: 11px 14px; border-start-end-radius: 999px; border-end-end-radius: 999px; }
.acc-save-row .hb-split .hb-split-main:hover, .acc-save-row .hb-split .hb-split-trigger:hover, .acc-save-row .hb-split.hb-open .hb-split-trigger { background: rgba(255, 255, 255, .1); }
.acc-save-row .hb-split svg { stroke: currentColor; fill: none; }
.acc-save-row .hb-split .hb-split-trigger svg, .acc-save-row .hb-split .hb-main-icon svg { width: 16px; height: 16px; }
.quiz-results-actions #quiz-share-slot { display: inline-flex; }
/* أي زر موجود وهو يشتغل (HRAIButtons.pending / flash) */
.hb-pending { cursor: progress !important; opacity: 1 !important; }
.hb-pending .hb-content, .hb-success .hb-content { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
button .hb-content .hb-slot svg { width: 16px; height: 16px; }
.hb-swapbox { position: relative; display: inline-grid; }
.hb-swapbox > .hb-sw { grid-area: 1 / 1; }