/* Scoped framework-neutral app components. Import rahmah.css first. */
.bym { color:var(--bym-text); background:var(--bym-canvas); font-family:var(--bym-font); font-size:var(--bym-text-base); line-height:1.55; font-synthesis:none; }
.bym *, .bym *::before, .bym *::after { box-sizing:border-box; }
.bym :where(button,input,textarea,select) { font:inherit; }
.bym :where(a,button,input,textarea,select):focus-visible { outline:3px solid var(--bym-focus); outline-offset:4px; }
.bym :where(h1,h2,h3) { color:var(--bym-primary); font-weight:600; letter-spacing:-.035em; line-height:1.12; }
.bym h1 { font-size:var(--bym-text-title); }
.bym h2 { font-size:var(--bym-text-xl); }
.bym h3 { font-size:var(--bym-text-lg); }
.bym :where(p,h1,h2,h3) { margin-block-start:0; }
.bym a { color:var(--bym-primary); text-underline-offset:4px; }
.bym [lang="ar"] { font-family:var(--bym-font-arabic); line-height:1.9; letter-spacing:normal; }
.bym :where(h1,h2,h3)[lang="ar"] { font-family:var(--bym-font-arabic-heading); }
.bym-skip { position:fixed; z-index:100; inset-block-start:8px; inset-inline-start:8px; padding:12px 20px; background:var(--bym-primary); color:var(--bym-on-primary)!important; transform:translateY(-200%); }
.bym-skip:focus { transform:none; }
.bym-icon { display:inline-block; width:24px; height:24px; flex:none; vertical-align:middle; }
.bym-brand { display:inline-flex; align-items:center; min-height:44px; }
.bym-brand img { display:block; width:220px; max-width:100%; height:auto; }
.bym-button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:var(--bym-control-height); padding:10px 22px; border:1px solid var(--bym-primary); border-radius:var(--bym-radius-control); color:var(--bym-on-primary)!important; background:var(--bym-primary); font-weight:600; line-height:1.2; text-align:center; text-decoration:none; cursor:pointer; transition:background var(--bym-fast) var(--bym-ease); }
.bym-button:hover:not(:disabled) { background:#30222e; }
.bym-button--secondary { background:transparent; color:var(--bym-primary)!important; }
.bym-button--secondary:hover:not(:disabled) { background:var(--bym-surface-soft); }
.bym-button:disabled { background:#e4dadd; border-color:var(--bym-border); color:#70586b!important; cursor:not-allowed; }
.bym-icon-button { display:inline-grid; place-items:center; min-width:44px; min-height:44px; background:transparent; border:1px solid var(--bym-border); border-radius:4px; color:var(--bym-primary); cursor:pointer; }
.bym-field { display:grid; gap:8px; }
.bym-field label { font-weight:600; }
.bym-input { width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--bym-border); border-radius:4px; background:var(--bym-surface); color:var(--bym-text); }
.bym-input[aria-invalid="true"] { border:2px solid var(--bym-error); }
.bym-input::placeholder { color:var(--bym-text-muted); opacity:1; }
.bym-help { color:var(--bym-text-muted); font-size:var(--bym-text-xs); margin:0; }
.bym-error { color:var(--bym-error); }
.bym-rule { border:0; border-block-start:1px solid var(--bym-rule); margin-block:32px; }
.bym-panel { padding:28px; border:1px solid var(--bym-rule); background:var(--bym-surface); }
.bym-panel--soft { background:var(--bym-surface-soft); }
.bym-progress { display:grid; gap:10px; }
.bym-progress-label { display:flex; justify-content:space-between; gap:16px; font-size:1rem; }
.bym-progress-track { height:6px; background:var(--bym-rule); overflow:hidden; }
.bym-progress-fill { height:100%; background:var(--bym-primary); }
.bym-chapter { display:flex; flex-direction:column; align-items:flex-start; min-height:172px; padding:20px; border:1px solid var(--bym-rule); background:var(--bym-surface); color:var(--bym-text); text-align:start; text-decoration:none; }
.bym-chapter:hover { border-color:var(--bym-primary); }
.bym-chapter-number { color:var(--bym-text-muted); font-size:1rem; }
.bym-chapter strong { font-weight:600; font-size:1.375rem; line-height:1.2; margin-block:18px 16px; }
.bym-chapter-status { display:flex; align-items:center; gap:8px; margin-block-start:auto; color:var(--bym-text-muted); font-size:1rem; }
.bym-chapter[data-state="complete"] { background:var(--bym-surface-soft); }
.bym-chapter[data-state="current"] { border:2px solid var(--bym-primary); padding:19px; }
.bym-notice { display:flex; align-items:flex-start; gap:14px; padding:20px; background:var(--bym-surface-soft); border-inline-start:3px solid var(--bym-primary); }
.bym-notice p { margin:4px 0 0; }
.bym-nav { display:grid; gap:4px; }
.bym-nav a,.bym-nav button { display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 14px; border:0; border-inline-start:3px solid transparent; background:transparent; color:var(--bym-primary); font:inherit; font-weight:500; text-decoration:none; text-align:start; cursor:pointer; }
.bym-nav [aria-current="page"] { background:var(--bym-surface-soft); border-inline-start-color:var(--bym-primary); font-weight:600; }
.bym-status { display:inline-flex; gap:8px; align-items:center; font-size:1rem; font-weight:500; }
.bym-status--success { color:var(--bym-success); }
.bym-status--error { color:var(--bym-error); }
@media(prefers-reduced-motion:reduce) { .bym *, .bym *::before,.bym *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }