/* البيت بيتك · دستور التصميم ١ · المكونات · الإصدار ٢: كل المقاسات على السلّم التسع */

/* مكونات البيت بيتك. كل قيمة من tokens.css */
.ab{font-family:var(--font-sans);color:var(--ink);direction:rtl}
.ab-btn{font-family:var(--font-sans);font-weight:700;font-size:14px;height:var(--ctl-md);padding-inline:20px;border-radius:var(--radius-ctl);border:0;background:var(--terra);color:var(--on-terra);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;text-decoration:none;white-space:nowrap}
.ab-btn:hover{filter:brightness(.95)}
.ab-btn:focus-visible,.ab-chip:focus-visible,.ab-field input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ab-btn--sec{background:var(--sheet);color:var(--ink);border:1.5px solid var(--line-ctl)}
.ab-btn--sm{height:var(--ctl-sm);font-size:14px;padding-inline:14px}
.ab-btn--lg{height:var(--ctl-lg);font-size:17px;padding-inline:24px}
.ab-btn[disabled]{opacity:.45;cursor:not-allowed}
.ab-link{color:var(--terra);font-weight:700;text-decoration:none}
.ab-chip{font-family:var(--font-sans);font-size:13px;height:30px;padding-inline:12px;border-radius:var(--radius-pill);border:1px solid var(--line-ctl);background:var(--sheet);color:var(--ink-2);display:inline-flex;align-items:center;cursor:pointer}
.ab-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:700}
.ab-badge{font-family:var(--font-sans);font-size:12px;font-weight:700;border-radius:var(--radius-pill);padding:1px 10px;display:inline-flex;align-items:center;gap:4px}
.ab-badge--ok{background:var(--ok-wash);color:var(--ok)}
.ab-badge--warn{background:var(--warn-wash);color:var(--warn)}
.ab-badge--stop{background:var(--stop-wash);color:var(--stop)}
.ab-badge--bayti{background:var(--room-bayti-wash);color:var(--room-bayti)}
.ab-badge--maktabi{background:var(--room-maktabi-wash);color:var(--room-maktabi)}
.ab-badge--mashrooi{background:var(--room-mashrooi-wash);color:var(--room-mashrooi)}
.ab-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-sans)}
.ab-field label{font-size:14px;font-weight:700;color:var(--ink)}
.ab-field input{font-family:var(--font-sans);font-size:15px;height:var(--ctl-md);border:1.5px solid var(--line-ctl);border-radius:var(--radius-ctl);padding-inline:14px;background:var(--sheet);color:var(--ink)}
.ab-field input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--terra-wash);outline:none}
.ab-field .ab-hint{font-size:12px;color:var(--ink-3)}
.ab-field--err input{border-color:var(--stop)}
.ab-field--err .ab-hint{color:var(--stop)}
.ab-card{background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-5);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-card);font-family:var(--font-sans)}
.ab-card__top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-3)}
.ab-card h3{margin:0;font-size:20px;line-height:1.35}
.ab-card p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.7}
.ab-tile{width:48px;height:48px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ab-tile svg{width:26px;height:26px}
.ab-tile--bayti{background:var(--room-bayti-wash)} .ab-tile--bayti .arch{fill:var(--room-bayti)}
.ab-tile--maktabi{background:var(--room-maktabi-wash)} .ab-tile--maktabi .arch{fill:var(--room-maktabi)}
.ab-tile--mashrooi{background:var(--room-mashrooi-wash)} .ab-tile--mashrooi .arch{fill:var(--room-mashrooi)}
.ab-tile .sill,.ab-mark .sill{fill:var(--terra)} .ab-mark .arch{fill:var(--ink)}
.ab-site{background:var(--paper);border-bottom:1px solid var(--line);font-family:var(--font-sans)}
.ab-site__row{display:flex;align-items:center;gap:22px;height:58px;padding-inline:20px}
.ab-site__logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--ink)}
.ab-site nav{display:flex;gap:18px;font-size:14px;color:var(--ink-2)}
.ab-site nav a{color:inherit;text-decoration:none}
.ab-site nav [aria-current]{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--ink)}
.ab-site__end{margin-inline-start:auto}
.ab-site__sub{display:flex;align-items:center;gap:10px;height:36px;padding-inline:20px;font-size:13px;border-top:1px solid var(--line)}
.ab-site__sub i{width:9px;height:9px;border-radius:2px}
.ab-site__sub span{margin-inline-start:auto;color:var(--ink-2);display:flex;gap:16px}
.ab-app{display:flex;align-items:center;gap:16px;height:56px;padding-inline:16px;background:var(--sheet);border-bottom:1px solid var(--line);font-family:var(--font-sans)}
.ab-app__name{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.ab-app__name .ab-tile{width:32px;height:32px;border-radius:9px}
.ab-app__name .ab-tile svg{width:18px;height:18px}
.ab-app__search{flex:1;max-width:360px;height:36px;border:1px solid var(--line);border-radius:var(--radius-ctl);display:flex;align-items:center;padding-inline:12px;color:var(--ink-3);font-size:13px;background:var(--paper)}
.ab-app__end{margin-inline-start:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.ab-app__ic{width:36px;height:36px;border-radius:var(--radius-ctl);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.ab-app__me{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.ab-paper{position:relative;background:var(--paper);overflow:hidden}
.ab-paper::before{content:"";position:absolute;inset:0;pointer-events:none;color:var(--pen)}
.ab-paper--grid::before{background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:24px 24px;opacity:var(--paper-grid);-webkit-mask-image:radial-gradient(120% 90% at 85% 0%,#000 0%,rgba(0,0,0,.5) 35%,transparent 70%);mask-image:radial-gradient(120% 90% at 85% 0%,#000 0%,rgba(0,0,0,.5) 35%,transparent 70%)}
.ab-paper--lines::before{background-image:linear-gradient(currentColor 1px,transparent 1px);background-size:100% 34px;opacity:var(--paper-lines);-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
.ab-paper--dots::before{background-image:radial-gradient(circle,currentColor 1.2px,transparent 1.6px);background-size:22px 22px;opacity:var(--paper-dots);-webkit-mask-image:radial-gradient(closest-side,transparent 25%,#000 60%,transparent 100%);mask-image:radial-gradient(closest-side,transparent 25%,#000 60%,transparent 100%)}
.ab-paper > *{position:relative}
@media (prefers-reduced-motion:reduce){.ab *{transition:none!important;animation:none!important}}

/* ألوان المراحل في مكتبي: المرحلة تملأ، والحالة حلقة، والرقم مع اللون دائماً */
.ab-stage{width:24px;height:24px;border-radius:50%;background:var(--stg,var(--stg-1));color:var(--sheet);font:700 12px/1 var(--font-sans);display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.ab-stage--ok{box-shadow:0 0 0 2px var(--sheet),0 0 0 4px var(--ok)}.ab-stage--warn{box-shadow:0 0 0 2px var(--sheet),0 0 0 4px var(--warn)}.ab-stage--stop{box-shadow:0 0 0 2px var(--sheet),0 0 0 4px var(--stop)}

/* هوية العميل داخل مشروعي (قرار صياح 034، حزمة التصميم ٥): لونه وشعاره في مواضع محددة، والمحرك على الدستور.
   --own يضعه albait-own.js وحده بعد فحص الوضوح، ولا يُكتب في ملف صفحة. بلا لون صالح يبقى نيلي مشروعي. */
.ab-own{--own-c:var(--own,var(--room-mashrooi));--own-on:var(--own-ink,#fff);--own-bg:var(--own-wash,var(--room-mashrooi-wash))}
.ab-app.ab-own{box-shadow:inset 0 4px 0 var(--own-c);height:60px;padding-top:4px}
.ab-own__logo{width:32px;height:32px;border-radius:9px;object-fit:contain;background:var(--sheet);border:1px solid var(--line);flex:none}
.ab-own__mono{width:32px;height:32px;border-radius:9px;background:var(--own-c);color:var(--own-on);display:inline-flex;align-items:center;justify-content:center;font:700 15px/1 var(--font-sans);flex:none}
.ab-own__by{font-size:12px;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.ab-own__by .ab-tile{width:18px;height:18px;border-radius:5px}.ab-own__by .ab-tile svg{width:11px;height:11px}