/* ============================================================
   Sport Club — app.css
   Base reset + app shell + shared components. RTL-first,
   logical properties throughout. Values come from tokens.css.
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ar);
  font-size:var(--fs-14);
  line-height:var(--lh-body);
  color:var(--c-text);
  background:#E9EDF2;                 /* desktop backdrop around the device frame */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:lang(en),.lat{font-family:var(--font-lat)}
a{color:var(--c-primary);text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
ul{list-style:none}
h1,h2,h3,h4{line-height:var(--lh-tight);font-weight:var(--fw-bold)}
input,select,textarea{font-family:inherit;font-size:var(--fs-16)} /* 16px avoids iOS zoom */

/* visible keyboard focus (accessibility) */
:focus-visible{outline:3px solid color-mix(in srgb,var(--c-primary) 55%,white);outline-offset:2px;border-radius:var(--r-sm)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- app frame (mobile-first, device frame on desktop) ---------- */
.app-frame{
  position:relative;
  display:flex;
  flex-direction:column;
  inline-size:100%;
  max-inline-size:var(--frame-max);
  min-block-size:100dvh;
  margin-inline:auto;
  background:var(--c-bg);
  overflow:hidden;
}
.app-content{
  flex:1;
  padding-inline:var(--s-5);
  padding-block:var(--s-4) calc(var(--nav-h) + var(--s-6));  /* clear bottom nav */
  overflow-y:auto;
  /* Pages that genuinely have more content than the frame (real scroll, not the layout bug fixed
     above) still need a scrollbar -- keep it, but thin and quiet instead of the OS-default
     blocky gray bar, consistent with the app's own visual language. Never scrollbar-width:none /
     ::-webkit-scrollbar{display:none} here: that would hide a real, needed affordance. */
  scrollbar-width:thin;
  scrollbar-color:var(--c-border) transparent;
}
.app-content::-webkit-scrollbar{inline-size:6px}
.app-content::-webkit-scrollbar-track{background:transparent}
.app-content::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:var(--r-round)}
.app-content--flush{padding-inline:0}
.app-content--no-nav{padding-block-end:var(--s-6)}

@media (min-width:600px){
  body{display:flex;align-items:center;justify-content:center;min-block-size:100dvh;padding:24px}
  .app-frame{
    min-block-size:0;
    block-size:844px;
    max-block-size:calc(100dvh - 48px);
    border-radius:44px;
    box-shadow:var(--sh-frame);
  }
}

/* ---------- top app bar ---------- */
.top-bar{
  display:flex;align-items:center;gap:var(--s-3);
  padding-inline:var(--s-5);padding-block:var(--s-4);
}
.top-bar__title{flex:1;text-align:center;font-size:var(--fs-18);font-weight:var(--fw-bold)}
.icon-btn{
  inline-size:44px;block-size:44px;border-radius:var(--r-round);
  display:grid;place-items:center;color:var(--c-text);
  transition:background var(--dur-fast) var(--ease);
}
.icon-btn:active{background:var(--c-surface-2)}
.icon-btn svg{inline-size:24px;block-size:24px}
.avatar{inline-size:40px;block-size:40px;border-radius:var(--r-round);object-fit:cover;background:var(--c-surface-2)}

/* ---------- bottom nav ---------- */
.bottom-nav{
  position:absolute;inset-block-end:0;inset-inline:0;
  block-size:var(--nav-h);
  background:var(--c-surface);
  box-shadow:var(--sh-bottomnav);
  display:flex;align-items:center;justify-content:space-around;
  padding-block-end:env(safe-area-inset-bottom);
  z-index:var(--z-nav);
}
.bottom-nav__item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  min-inline-size:64px;min-block-size:48px;justify-content:center;
  color:var(--c-muted);font-size:var(--fs-10);font-weight:var(--fw-medium);
}
.bottom-nav__item svg{inline-size:24px;block-size:24px}
.bottom-nav__item.is-active{color:var(--c-primary)}
.bottom-nav__center{
  inline-size:60px;block-size:60px;border-radius:var(--r-round);
  background:var(--c-navy);color:#fff;display:grid;place-items:center;
  margin-block-start:-28px;box-shadow:0 6px 16px rgba(14,55,99,.4);
  border:5px solid var(--c-bg);
}
.bottom-nav__center svg{inline-size:26px;block-size:26px}

/* ---------- side menu (drawer) ---------- */
.scrim{
  position:absolute;inset:0;background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease);
  z-index:var(--z-scrim);
}
.scrim.is-open{opacity:1;visibility:visible}
.side-menu{
  position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:min(78%,320px);
  background:var(--c-surface);
  transform:translateX(-100%);           /* hidden off the start edge (RTL: from right via dir) */
  transition:transform var(--dur) var(--ease);
  z-index:var(--z-drawer);
  display:flex;flex-direction:column;
  padding:var(--s-8) var(--s-6);
  border-start-end-radius:24px;border-end-end-radius:24px;
}
[dir="rtl"] .side-menu{transform:translateX(100%)}
.side-menu.is-open{transform:translateX(0)}
.side-menu__logo{margin-inline:auto;margin-block-end:var(--s-8)}
.side-menu__logo img{block-size:64px;inline-size:auto}
.side-menu__roles{margin-block-end:var(--s-5)}
.side-menu__roles-label{display:block;margin-block-end:var(--s-2);font-size:var(--fs-12);color:var(--c-muted)}
.role-switch{display:flex;gap:var(--s-2);background:var(--c-surface-2);border-radius:var(--r-pill);padding:4px}
.role-switch__btn{flex:1;text-align:center;padding-block:var(--s-2);border-radius:var(--r-pill);font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--c-muted);text-decoration:none}
.role-switch__btn.is-active{background:var(--c-primary);color:#fff}
.side-menu__link{
  display:flex;align-items:center;gap:var(--s-4);
  padding-block:var(--s-4);min-block-size:44px;
  color:var(--c-text-3);font-size:var(--fs-16);font-weight:var(--fw-medium);
  border-block-end:1px solid var(--c-border-2);
}
.side-menu__link svg{inline-size:24px;block-size:24px;color:var(--c-muted)}
.side-menu__text{flex:1}
.side-menu__badge{
  min-inline-size:22px;block-size:22px;padding-inline:6px;
  border-radius:var(--r-round);background:var(--c-primary);color:#fff;
  font-size:var(--fs-12);font-weight:var(--fw-bold);display:grid;place-items:center;
}
.side-menu__badge[hidden]{display:none}
.side-menu__chevron{color:var(--c-muted);display:grid;place-items:center}
[dir="rtl"] .side-menu__chevron svg{transform:scaleX(-1)}
.side-menu__logout{
  margin-block-start:auto;color:var(--c-danger);border-block-end:0;
}
.side-menu__logout svg{color:var(--c-danger)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-block-size:56px;padding-inline:var(--s-6);
  border-radius:var(--r-pill);font-size:var(--fs-16);font-weight:var(--fw-semibold);
  transition:transform var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease);
}
.btn:active{transform:scale(.97)}
.btn--block{inline-size:100%}
.btn--primary{background:var(--c-primary);color:#fff}
.btn--navy{background:var(--c-navy);color:#fff}
.btn--green{background:var(--c-green);color:#fff}
.btn--outline{background:transparent;border:1.5px solid var(--c-primary);color:var(--c-primary)}
.btn--sm{min-block-size:44px;padding-inline:var(--s-5);font-size:var(--fs-14);border-radius:var(--r-pill)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- form fields ---------- */
.field{
  display:flex;align-items:center;gap:var(--s-3);
  min-block-size:56px;padding-inline:var(--s-5);
  background:var(--c-surface-2);border:1px solid var(--c-border-2);
  border-radius:var(--r-pill);
}
.field:focus-within{border-color:var(--c-primary);background:var(--c-surface)}
.field__input{flex:1;border:0;background:transparent;outline:0;color:var(--c-text)}
.field__input::placeholder{color:var(--c-muted)}
.field__icon{color:var(--c-muted);display:grid;place-items:center}
.field__icon svg{inline-size:22px;block-size:22px}
.field-label{display:block;margin-block-end:var(--s-2);margin-inline-start:var(--s-3);font-size:var(--fs-14);font-weight:var(--fw-medium);color:var(--c-text-3)}
.field + .field, .form-row + .form-row{margin-block-start:var(--s-4)}

/* ---------- search ---------- */
.search{margin-block-end:var(--s-5)}

/* ---------- promo banner ---------- */
.promo{position:relative}
.promo__track{display:flex;gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.promo__track::-webkit-scrollbar{display:none}
.promo__slide{
  position:relative;isolation:isolate;flex:0 0 100%;scroll-snap-align:center;
  min-block-size:190px;border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--s-5);color:#fff;
  background:var(--c-navy);
}
.promo__bg{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:0}
.promo__slide::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,55,99,.25) 0%,rgba(14,55,99,.55) 55%,rgba(14,55,99,.9) 100%);
}
.promo__title,.promo__subtitle,.promo__cta{position:relative;z-index:2}
.promo__title{font-size:var(--fs-30);font-weight:var(--fw-bold);margin-block-end:4px}
.promo__subtitle{font-size:var(--fs-14);opacity:.95;margin-block-end:var(--s-3);max-inline-size:70%}
.promo__cta{align-self:flex-start;background:var(--c-green);color:#fff;min-block-size:40px;padding-inline:var(--s-5);border-radius:var(--r-pill);font-weight:var(--fw-semibold);display:inline-flex;align-items:center}
.promo__dots{display:flex;justify-content:center;gap:6px;margin-block-start:var(--s-3)}
.promo__dot{inline-size:8px;block-size:8px;border-radius:var(--r-round);background:var(--c-border)}
.promo__dot.is-active{inline-size:22px;background:var(--c-primary)}

/* ---------- list section ---------- */
.list-section{margin-block-start:var(--s-6)}
.list-section__head{display:flex;align-items:center;justify-content:space-between;margin-block-end:var(--s-3)}
.list-section__title{font-size:var(--fs-20);font-weight:var(--fw-bold)}
.list-section__seeall{font-size:var(--fs-14);font-weight:var(--fw-medium);color:var(--c-primary)}
.list-section__items{display:flex;flex-direction:column;gap:var(--s-4)}

/* ---------- card ---------- */
.card{
  display:flex;align-items:center;gap:var(--s-4);
  background:var(--c-surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-card);padding:var(--s-4);
}
.card__media{inline-size:68px;block-size:68px;object-fit:cover;background:var(--c-surface-2);flex-shrink:0}
.card__media--circle{border-radius:var(--r-round)}
.card__media--square{border-radius:var(--r-md);object-fit:contain;padding:6px;background:#fff;border:1px solid var(--c-border-2)}
.card__body{flex:1;min-inline-size:0}
.card__name{font-size:var(--fs-16);font-weight:var(--fw-bold);margin-block-end:2px}
.card__desc{
  font-size:var(--fs-12);color:var(--c-muted);margin-block-end:var(--s-3);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card__cta{min-block-size:40px;padding-inline:var(--s-5);border-radius:var(--r-pill);font-size:var(--fs-14);font-weight:var(--fw-semibold);display:inline-flex;align-items:center}
.card__cta--primary{background:var(--c-navy);color:#fff}
.card__cta--green{background:var(--c-green);color:#fff}

/* ---------- status badge ---------- */
.badge{display:inline-flex;align-items:center;padding-inline:var(--s-3);min-block-size:26px;border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:var(--fw-semibold)}
.badge--active{background:var(--c-success-bg);color:var(--c-success-text)}
.badge--review{background:var(--c-warning-bg);color:var(--c-warning-text)}
.badge--closed{background:var(--c-danger-bg);color:var(--c-danger)}
.badge--draft{background:var(--c-surface-2);color:var(--c-muted)}
.badge--expired{background:color-mix(in srgb,var(--c-navy) 14%,white);color:var(--c-navy)}

/* ---------- contracts (list) ---------- */
.contracts{display:flex;flex-direction:column;gap:var(--s-3)}
.contracts__empty{color:var(--c-muted);text-align:center;padding-block:var(--s-8)}
.contract-card{display:flex;align-items:center;gap:var(--s-3);background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--s-4);color:var(--c-text);text-decoration:none;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.contract-card[hidden]{display:none}
.contract-card:hover{transform:translateY(-2px)}
.contract-card:active{transform:translateY(0)}
.contract-card:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.contract-card__body{flex:1;min-inline-size:0}
.contract-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-block-end:var(--s-1)}
.contract-card__title{margin:0;font-size:var(--fs-16);font-weight:var(--fw-bold);color:var(--c-navy)}
.contract-card__club{margin:0 0 var(--s-2);font-size:var(--fs-14);font-weight:var(--fw-medium);color:var(--c-primary)}
.contract-card__excerpt{margin:0;font-size:var(--fs-14);line-height:var(--lh-body);color:var(--c-muted);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.contract-card__chevron{flex:none;display:flex;color:var(--c-muted)}
.contract-card__chevron svg{inline-size:22px;block-size:22px;transform:scaleX(-1)}

/* ---- club-managed contract card (dashboard, stage M3b) -- not a single <a>, several actions ---- */
.contract-card--managed{align-items:flex-start;flex-direction:column}
.contract-card__actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block-start:var(--s-3)}

/* ---------- contract (details) ---------- */
.contract{display:flex;flex-direction:column;gap:var(--s-5)}
.contract__title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-block-end:var(--s-2)}
.contract__title{margin:0;font-size:var(--fs-24);font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--c-navy)}
.contract__club{margin:0 0 var(--s-1);font-size:var(--fs-16);font-weight:var(--fw-medium);color:var(--c-primary)}
.contract__started{margin:0;font-size:var(--fs-12);color:var(--c-muted)}
.contract__block-title{margin:0 0 var(--s-2);font-size:var(--fs-18);font-weight:var(--fw-bold);color:var(--c-text)}
.contract__desc{margin:0;font-size:var(--fs-14);line-height:var(--lh-body);color:var(--c-text-3)}
.contract__list{margin:0;padding-inline-start:var(--s-5);display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--fs-14);line-height:var(--lh-body);color:var(--c-text-3)}
.contract__list--num{list-style:decimal}
.contract__list--bullet{list-style:disc}
.contract__facts{display:flex;gap:var(--s-3)}
.contract__fact{flex:1;display:flex;flex-direction:column;gap:var(--s-1);background:var(--c-surface);border:1px solid var(--c-border-2);border-radius:var(--r-md);padding:var(--s-4)}
.contract__fact-label{font-size:var(--fs-12);color:var(--c-muted)}
.contract__fact-value{font-size:var(--fs-16);font-weight:var(--fw-bold);color:var(--c-navy)}
.contract__submit{display:grid;place-items:center;inline-size:100%;min-block-size:52px;border:1.5px solid var(--c-primary);border-radius:var(--r-pill);background:transparent;color:var(--c-primary);font-family:var(--font-ar);font-size:var(--fs-16);font-weight:var(--fw-bold);text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.contract__submit:hover{background:var(--c-primary);color:var(--c-primary-ink)}
.contract__submit:focus-visible{outline:2px solid var(--c-navy);outline-offset:2px}
.contract__submit--disabled{border-color:var(--c-border);color:var(--c-muted);background:var(--c-border-2);cursor:not-allowed;font-size:var(--fs-14);font-weight:var(--fw-semibold);padding-inline:var(--s-4);text-align:center}

/* ---------- club details (public "تفاصيل الجهة") ---------- */
.club-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-1);padding:var(--s-8) var(--s-4) var(--s-6);margin-inline:calc(var(--s-4) * -1);margin-block-start:calc(var(--s-4) * -1);background:linear-gradient(180deg,var(--c-navy) 0%,var(--c-primary) 100%);border-end-start-radius:var(--r-lg);border-end-end-radius:var(--r-lg);color:#fff}
.club-hero__logo-wrap{inline-size:94px;block-size:94px;border-radius:var(--r-round);background:#fff;display:grid;place-items:center;box-shadow:var(--sh-card);margin-block-end:var(--s-3)}
.club-hero__logo{inline-size:76px;block-size:76px;border-radius:var(--r-round);object-fit:cover}
.club-hero__name{margin:0;font-size:var(--fs-22);font-weight:var(--fw-bold)}
.club-hero__rep{margin:0;font-size:var(--fs-14);opacity:.92}
.club-hero__position{margin:0 0 var(--s-3);font-size:var(--fs-12);opacity:.75}
.club-hero__contact{display:flex;align-items:center;gap:var(--s-3)}
.club-hero__contact-btn{inline-size:50px;block-size:50px;border-radius:var(--r-round);background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;transition:background var(--dur-fast) var(--ease)}
.club-hero__contact-btn:hover{background:rgba(255,255,255,.28)}
.club-hero__contact-btn svg{inline-size:22px;block-size:22px}

.club-about{padding-block:var(--s-5)}
.club-about__text{margin:0;font-size:var(--fs-14);line-height:var(--lh-body);color:var(--c-text-3)}

.club-positions{display:flex;flex-direction:column;gap:var(--s-3)}
.club-positions__title{margin:0;font-size:var(--fs-18);font-weight:var(--fw-bold);color:var(--c-text)}
.club-positions__empty{color:var(--c-muted);text-align:center;padding-block:var(--s-8)}
.club-positions__list{display:flex;flex-direction:column;gap:var(--s-3)}
.position-card{display:flex;align-items:center;gap:var(--s-3);background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--s-4);border-inline-start:4px solid var(--c-border)}
.position-card--active{border-inline-start-color:var(--c-success-text)}
.position-card--underreview{border-inline-start-color:var(--c-warning-text)}
.position-card--closed{border-inline-start-color:var(--c-danger)}
.position-card--expired{border-inline-start-color:var(--c-navy)}
.position-card--draft{border-inline-start-color:var(--c-muted)}
.position-card__body{flex:1;min-inline-size:0}
.position-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-block-end:var(--s-1)}
.position-card__title{margin:0;font-size:var(--fs-16);font-weight:var(--fw-bold);color:var(--c-navy)}
.position-card__excerpt{margin:0 0 var(--s-1);font-size:var(--fs-14);line-height:var(--lh-body);color:var(--c-muted);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.position-card__started{margin:0;font-size:var(--fs-12);color:var(--c-muted)}
.position-card__cta{flex:none;min-block-size:40px;padding-inline:var(--s-4);border-radius:var(--r-pill);background:var(--c-navy);color:#fff;font-size:var(--fs-14);font-weight:var(--fw-semibold);display:inline-flex;align-items:center;text-decoration:none}
.position-card__cta--muted{background:var(--c-surface-2);color:var(--c-muted)}

/* ---------- profile ---------- */
.profile{display:flex;flex-direction:column;gap:var(--s-6)}
.profile__head{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);text-align:center}
.profile__avatar-wrap{position:relative;inline-size:104px;block-size:104px}
.profile__avatar{inline-size:104px;block-size:104px;border-radius:var(--r-round);object-fit:cover;background:var(--c-surface-2)}
.profile__avatar-edit{position:absolute;inset-block-start:0;inset-inline-end:0;inline-size:30px;block-size:30px;border:0;border-radius:var(--r-round);background:var(--c-surface);box-shadow:var(--sh-card);color:var(--c-muted);display:grid;place-items:center;cursor:pointer}
.profile__avatar-edit svg{inline-size:16px;block-size:16px}
.profile__name{margin:0;font-size:var(--fs-22);font-weight:var(--fw-bold);color:var(--c-navy)}
.profile__email{display:inline-flex;align-items:center;gap:var(--s-2);margin:0;font-size:var(--fs-14);color:var(--c-muted)}
.profile__email-edit{display:inline-flex}
.profile__email-edit svg{inline-size:16px;block-size:16px}
.profile__section{display:flex;flex-direction:column;gap:var(--s-3)}
.profile__section-title{margin:0;font-size:var(--fs-18);font-weight:var(--fw-bold);color:var(--c-text)}
.profile__fields{display:flex;flex-direction:column;gap:var(--s-4)}
.profile__action{align-self:flex-end;font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--c-primary);text-decoration:none}

.pfield{display:flex;align-items:center;gap:var(--s-3);background:var(--c-surface-2);border:1px solid var(--c-border-2);border-radius:var(--r-lg);padding:var(--s-3) var(--s-5)}
.pfield__body{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:2px}
.pfield__label{font-size:var(--fs-10);color:var(--c-muted)}
.pfield__value{font-size:var(--fs-16);color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfield__value--status{color:var(--c-success-text);font-weight:var(--fw-semibold)}
.pfield__icon{flex:none;color:var(--c-muted);display:grid;place-items:center}
.pfield__icon svg{inline-size:20px;block-size:20px}
.pfield--area{flex-direction:column;align-items:stretch;gap:var(--s-2)}
.pfield--area .pfield__text{margin:0;font-size:var(--fs-14);line-height:var(--lh-body);color:var(--c-muted)}
.pfield--file{flex-direction:column;align-items:stretch;gap:var(--s-3)}
.pfield--file .pfield__file{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);text-align:center;color:var(--c-muted)}
.pfield--file .pfield__file-icon{display:grid;place-items:center}
.pfield--file .pfield__file-icon svg{inline-size:26px;block-size:26px}
.pfield--file .pfield__file-name{font-size:var(--fs-14);line-height:var(--lh-body)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:var(--s-6);border-block-end:1px solid var(--c-border-2);margin-block-end:var(--s-4)}
.tabs__tab{padding-block:var(--s-3);font-size:var(--fs-14);font-weight:var(--fw-medium);color:var(--c-muted);text-decoration:none;border-block-end:2px solid transparent;margin-block-end:-1px}
.tabs__tab.is-active{color:var(--c-primary);border-block-end-color:var(--c-primary);font-weight:var(--fw-semibold)}

/* ---------- notifications ---------- */
.notifs{display:flex;flex-direction:column}
.notifs__empty{color:var(--c-muted);text-align:center;padding-block:var(--s-8)}
.notif{position:relative;display:flex;gap:var(--s-3);padding-block:var(--s-4);border-block-end:1px solid var(--c-border-2)}
.notif:last-child{border-block-end:0}
.notif__avatar{flex:none;inline-size:44px;block-size:44px;border-radius:var(--r-round);object-fit:cover;background:var(--c-surface-2)}
.notif__avatar--icon{display:grid;place-items:center;color:var(--c-primary)}
.notif__avatar--icon svg{inline-size:22px;block-size:22px}
.notif__body{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:var(--s-2)}
.notif__text{margin:0;font-size:var(--fs-14);line-height:var(--lh-body);color:var(--c-text)}
.notif__text strong{font-weight:var(--fw-bold)}
.notif__detail{margin:0;font-size:var(--fs-12);line-height:var(--lh-body);color:var(--c-muted)}
.notif__actions{display:flex;gap:var(--s-3)}
.notif__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.notif__mark-read-form{display:inline-flex}
.notif__time{font-size:var(--fs-12);color:var(--c-muted)}
.notif--unread::after{content:"";position:absolute;inset-block-start:var(--s-4);inset-inline-end:0;inline-size:8px;block-size:8px;border-radius:var(--r-round);background:var(--c-primary)}

.btn-pill{min-block-size:40px;padding-inline:var(--s-5);border-radius:var(--r-pill);font-family:var(--font-ar);font-size:var(--fs-14);font-weight:var(--fw-semibold);cursor:pointer;border:1.5px solid transparent}
.btn-pill--primary{background:var(--c-primary);color:var(--c-primary-ink)}
.btn-pill--outline{background:transparent;border-color:var(--c-border);color:var(--c-text)}
.btn-pill--sm{min-block-size:32px;padding-inline:var(--s-4);font-size:var(--fs-12)}

/* ---------- settings ---------- */
.settings{display:flex;flex-direction:column;gap:var(--s-5);padding-block-start:var(--s-3)}
.settings__group{background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding-inline:var(--s-5)}
.setting-row{display:flex;align-items:center;gap:var(--s-4);min-block-size:60px;border-block-end:1px solid var(--c-border-2)}
.setting-row:last-child{border-block-end:0}
.setting-row__icon{flex:none;color:var(--c-navy);display:grid;place-items:center}
.setting-row__icon svg{inline-size:22px;block-size:22px}
.setting-row__label{flex:1;font-size:var(--fs-16);color:var(--c-text);display:flex;flex-direction:column;gap:var(--s-1)}
.setting-row__hint{font-size:var(--fs-12);font-weight:var(--fw-regular);color:var(--c-muted)}
.setting-row__value{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--c-primary)}
.setting-row__chevron{color:var(--c-muted);display:grid;place-items:center}
.setting-row__chevron svg{inline-size:20px;block-size:20px;transform:scaleX(-1)}

.switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.switch input{position:absolute;opacity:0;inline-size:0;block-size:0}
.switch__track{inline-size:46px;block-size:26px;border-radius:var(--r-pill);background:var(--c-border);transition:background var(--dur-fast) var(--ease);display:flex;align-items:center;padding:3px}
.switch__thumb{inline-size:20px;block-size:20px;border-radius:var(--r-round);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--dur-fast) var(--ease)}
.switch input:checked + .switch__track{background:var(--c-primary)}
.switch input:checked + .switch__track .switch__thumb{transform:translateX(-20px)}
.switch input:focus-visible + .switch__track{outline:2px solid var(--c-primary);outline-offset:2px}

.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- generic flash banner (TempData["Success"/"Error"], any screen) ---- */
.banner{border-radius:var(--r-lg);padding:var(--s-4);font-size:var(--fs-14);margin-block-end:var(--s-4);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.banner--success{background:var(--c-success-bg);color:var(--c-success-text)}
.banner--error{background:var(--c-danger-bg);color:var(--c-danger)}
/* Subscription lifecycle banner (Warning/Grace/ReadOnly, _LifecycleBanner.cshtml) reuses this family. */
.banner--warning{background:var(--c-warning-bg);color:var(--c-warning-text)}
.banner__action{font-weight:var(--fw-bold);text-decoration:underline;white-space:nowrap;color:inherit}

.settings__banner{background:var(--c-success-bg);color:var(--c-success-text);border-radius:var(--r-lg);padding:var(--s-4);font-size:var(--fs-14)}
.settings__prefs-notice{background:var(--c-warning-bg);color:var(--c-warning-text);border-radius:var(--r-lg);padding:var(--s-4);font-size:var(--fs-14)}
.settings__prefs{padding-block:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4)}
.settings__prefs-title{margin:0;font-size:var(--fs-16);font-weight:var(--fw-bold);color:var(--c-text)}
.settings__pref-row{border:0;border-block-end:1px solid var(--c-border-2);padding:0 0 var(--s-4);margin:0;display:flex;flex-direction:column;gap:var(--s-2)}
.settings__pref-row:last-of-type{border-block-end:0}
.settings__pref-label{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--c-text);padding:0}
.settings__pref-check{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-14);color:var(--c-text-3)}
.settings__pref-time{display:flex;flex-direction:column;gap:var(--s-2);font-size:var(--fs-12);color:var(--c-muted)}
.settings__pref-time-inputs{display:flex;align-items:center;gap:var(--s-2)}
.settings__pref-time-inputs input{border:1px solid var(--c-border);border-radius:var(--r-sm);padding:var(--s-2)}
.settings__prefs-submit{align-self:flex-start}

/* ---------- search results ---------- */
a.field{text-decoration:none}
.field__placeholder{flex:1;color:var(--c-muted)}
.field__icon--btn{border:0;background:transparent;cursor:pointer;padding:0;color:var(--c-muted)}
.results{display:flex;flex-direction:column;gap:var(--s-3)}
.results__title{margin:var(--s-2) 0 0;font-size:var(--fs-18);font-weight:var(--fw-bold);color:var(--c-text)}
.results__list{display:flex;flex-direction:column;gap:var(--s-4)}
.results__more{align-self:center;margin-block-start:var(--s-3);font-size:var(--fs-16);font-weight:var(--fw-semibold);color:var(--c-primary);text-decoration:none}
.results__empty{color:var(--c-muted);text-align:center;padding-block:var(--s-8)}
.result-card{display:flex;align-items:center;gap:var(--s-4);background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--s-4)}
.result-card__media{flex:none;inline-size:72px;block-size:72px;object-fit:contain;background:var(--c-surface-2)}
.result-card__media--square{border-radius:var(--r-md)}
.result-card__media--circle{border-radius:var(--r-round);object-fit:cover}
.result-card__body{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-start}
.result-card__name{margin:0;font-size:var(--fs-16);font-weight:var(--fw-bold);color:var(--c-navy)}
.result-card__desc{margin:0;font-size:var(--fs-14);line-height:var(--lh-body);color:var(--c-muted)}
.result-card__cta{min-block-size:40px;padding-inline:var(--s-6);border:0;border-radius:var(--r-pill);background:var(--c-navy);color:#fff;font-family:var(--font-ar);font-size:var(--fs-14);font-weight:var(--fw-semibold);cursor:pointer}

/* ---------- plans ---------- */
.plans{display:flex;flex-direction:column;gap:var(--s-4)}
.plan-status{background:var(--c-surface);border:1px solid var(--c-border-2);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--s-4) var(--s-5);display:flex;flex-direction:column;gap:var(--s-1)}
.plan-status__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.plan-status__label{font-size:var(--fs-12);color:var(--c-muted)}
.plan-status__name{font-size:var(--fs-18);font-weight:var(--fw-bold)}
.plan-status__until{font-size:var(--fs-12);color:var(--c-muted)}
.plan-status__hint{font-size:var(--fs-12);color:var(--c-muted);font-weight:var(--fw-regular)}
.plan-status--empty{color:var(--c-muted);font-size:var(--fs-14);text-align:center;padding-block:var(--s-5)}
.plan{background:var(--c-surface);border:1px solid var(--c-border-2);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-4)}
.plan--featured{background:var(--c-navy);border-color:var(--c-navy);color:#fff}
.plan__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3)}
.plan__name{margin:0;font-size:var(--fs-20);font-weight:var(--fw-bold)}
.plan__trial{font-size:var(--fs-12);color:var(--c-muted)}
.plan--featured .plan__trial{color:rgba(255,255,255,.7)}
.plan__price{display:flex;align-items:baseline;gap:4px}
.plan__amount{font-size:var(--fs-30);font-weight:var(--fw-black);color:var(--c-primary)}
.plan--featured .plan__amount{color:#fff}
.plan__currency{font-size:var(--fs-12);color:var(--c-muted)}
.plan--featured .plan__currency{color:rgba(255,255,255,.7)}
.plan__features{border-block-start:1px solid var(--c-border-2);padding-block-start:var(--s-3)}
.plan--featured .plan__features{border-block-start-color:rgba(255,255,255,.2)}
.plan__features-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-size:var(--fs-14);font-weight:var(--fw-medium);color:var(--c-muted)}
.plan--featured .plan__features-toggle{color:rgba(255,255,255,.85)}
.plan__features-toggle::-webkit-details-marker{display:none}
.plan__chevron{display:grid;place-items:center;transition:transform var(--dur-fast) var(--ease)}
.plan__features[open] .plan__chevron{transform:rotate(180deg)}
.plan__chevron svg{inline-size:20px;block-size:20px}
.plan__list{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.plan__list li{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-14)}
.plan__check{flex:none;display:grid;place-items:center;color:var(--c-primary)}
.plan--featured .plan__check{color:var(--c-cyan)}
.plan__check svg{inline-size:18px;block-size:18px}
.plan__cta{min-block-size:48px;border-radius:var(--r-pill);border:1.5px solid var(--c-primary);background:transparent;color:var(--c-primary);font-family:var(--font-ar);font-size:var(--fs-16);font-weight:var(--fw-bold);cursor:pointer}
.plan--featured .plan__cta{background:#fff;border-color:#fff;color:var(--c-navy)}

/* ---------- complete-account plan step (selectable free trial / read-only paid cards) ---------- */
.plan--choice{cursor:pointer}
.plan--locked{opacity:.75}
.plan__choice-row{position:relative;display:flex;align-items:center;gap:var(--s-3);padding-block-start:var(--s-3);border-block-start:1px solid var(--c-border-2)}
.plan__choice-radio{position:absolute;opacity:0;inline-size:0;block-size:0}
.plan__choice-dot{flex:none;inline-size:22px;block-size:22px;border-radius:var(--r-round);border:2px solid var(--c-border);display:grid;place-items:center}
.plan__choice-radio:checked + .plan__choice-dot{border-color:var(--c-primary)}
.plan__choice-radio:checked + .plan__choice-dot::after{content:"";inline-size:12px;block-size:12px;border-radius:var(--r-round);background:var(--c-primary)}
.plan__choice-radio:focus-visible + .plan__choice-dot{outline:2px solid var(--c-primary);outline-offset:2px}
.plan__choice-label{font-size:var(--fs-14);font-weight:var(--fw-bold);color:var(--c-primary)}
.plan-skip{position:relative;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);background:var(--c-surface-2);border:1px solid var(--c-border-2);border-radius:var(--r-lg);cursor:pointer}
.plan-skip__radio{position:absolute;opacity:0;inline-size:0;block-size:0}
.plan-skip__dot{flex:none;inline-size:22px;block-size:22px;border-radius:var(--r-round);border:2px solid var(--c-border);display:grid;place-items:center}
.plan-skip__radio:checked + .plan-skip__dot{border-color:var(--c-primary)}
.plan-skip__radio:checked + .plan-skip__dot::after{content:"";inline-size:12px;block-size:12px;border-radius:var(--r-round);background:var(--c-primary)}
.plan-skip__radio:focus-visible + .plan-skip__dot{outline:2px solid var(--c-primary);outline-offset:2px}
.plan-skip__label{font-size:var(--fs-14);color:var(--c-text-3)}

/* ---------- billing ---------- */
.pay-toggle{display:flex;gap:var(--s-3);margin-block-end:var(--s-5)}
.pay-toggle__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-block-size:52px;border-radius:var(--r-pill);border:1px solid var(--c-border-2);background:var(--c-surface-2);color:var(--c-muted);font-family:var(--font-ar);font-size:var(--fs-14);font-weight:var(--fw-semibold);cursor:pointer}
.pay-toggle__btn.is-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.pay-toggle__icon{display:grid;place-items:center}
.pay-toggle__icon svg{inline-size:20px;block-size:20px}
.pay-carousel{display:flex;gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:var(--s-2);margin-inline:calc(-1 * var(--s-5));padding-inline:var(--s-5)}
.pay-card{flex:0 0 88%;scroll-snap-align:center;aspect-ratio:1.6 / 1;border-radius:var(--r-lg);background:linear-gradient(135deg,#1c1c22,#3a3a45);color:#fff;padding:var(--s-5);display:flex;flex-direction:column;justify-content:space-between}
.pay-card[hidden]{display:none}
.pay-card__top{display:flex;align-items:center;justify-content:space-between}
.pay-card__kind{font-size:var(--fs-14);color:rgba(255,255,255,.8)}
.pay-card__brand{font-size:var(--fs-18);font-weight:var(--fw-black);font-style:italic}
.pay-card__number{font-size:var(--fs-18);letter-spacing:2px;direction:ltr;text-align:start}
.pay-card__bottom{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-12);color:rgba(255,255,255,.85)}
.add-row{display:flex;align-items:center;justify-content:space-between;margin-block:var(--s-5);padding:var(--s-4) var(--s-5);border:1px solid var(--c-border-2);border-radius:var(--r-lg);background:var(--c-surface);color:var(--c-text);text-decoration:none;font-size:var(--fs-16);font-weight:var(--fw-medium)}
.add-row__icon{display:grid;place-items:center;inline-size:28px;block-size:28px;border:1px solid var(--c-border);border-radius:var(--r-sm);color:var(--c-muted)}
.add-row__icon svg{inline-size:18px;block-size:18px}
.bill-summary{background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding-inline:var(--s-5)}
.bill-summary__row{display:flex;flex-direction:column;gap:2px;padding-block:var(--s-4);border-block-end:1px solid var(--c-border-2)}
.bill-summary__row:last-child{border-block-end:0}
.bill-summary__label{font-size:var(--fs-12);color:var(--c-muted)}
.bill-summary__value{font-size:var(--fs-16);color:var(--c-text)}

/* ---------- payment ---------- */
.pay-form{display:flex;flex-direction:column;gap:var(--s-4)}
.pay-form__lead{margin:0 0 var(--s-2);font-size:var(--fs-16);font-weight:var(--fw-semibold);color:var(--c-text)}
.field-pair{display:flex;gap:var(--s-4)}
.field-pair .field{flex:1;min-inline-size:0}
.pay-methods{display:flex;flex-direction:column;gap:var(--s-4);margin-block-end:var(--s-6)}
.pay-method{position:relative;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);background:var(--c-surface-2);border:1px solid var(--c-border-2);border-radius:var(--r-pill);cursor:pointer}
.pay-method.is-selected{border-color:var(--c-primary);background:var(--c-surface)}
.pay-method__label{flex:1;font-size:var(--fs-16);color:var(--c-text)}
.pay-method__radio{position:absolute;opacity:0;inline-size:0;block-size:0}
.pay-method__dot{flex:none;inline-size:22px;block-size:22px;border-radius:var(--r-round);border:2px solid var(--c-border);display:grid;place-items:center}
.pay-method__radio:checked + .pay-method__dot{border-color:var(--c-primary)}
.pay-method__radio:checked + .pay-method__dot::after{content:"";inline-size:12px;block-size:12px;border-radius:var(--r-round);background:var(--c-primary)}
.pay-method__radio:focus-visible + .pay-method__dot{outline:2px solid var(--c-primary);outline-offset:2px}
.summary{background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding-inline:var(--s-5);margin-block-end:var(--s-6)}
.summary__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding-block:var(--s-4);border-block-end:1px solid var(--c-border-2)}
.summary__row:last-child{border-block-end:0}
.summary__label{font-size:var(--fs-14);color:var(--c-muted)}
.summary__value{font-size:var(--fs-16);color:var(--c-text);font-weight:var(--fw-medium)}
.summary__row--total .summary__label,.summary__row--total .summary__value{font-size:var(--fs-18);font-weight:var(--fw-bold);color:var(--c-navy)}

/* ---------- status (success) screen ---------- */
.status-screen{block-size:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--s-6) 12%}
.status-screen__content{display:flex;flex-direction:column;gap:var(--s-4);text-align:center}
.status-screen__title{margin:0;font-size:var(--fs-24);font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--c-text)}
.status-screen__text{margin:0 0 var(--s-4);font-size:var(--fs-16);line-height:var(--lh-body);color:var(--c-muted)}
.status-screen__secondary{font-size:var(--fs-16);font-weight:var(--fw-semibold);color:var(--c-text);text-decoration:none}

/* ---- editable form rows (apply / profile edit / real forms) ---- */
.form-row{display:flex;flex-direction:column;gap:var(--s-2);margin-block-end:var(--s-4)}
.form-row__label{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--c-text)}
.form-row .field{inline-size:100%}
.form-pair{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:var(--s-2) var(--s-3)}
.form-pair .form-row{margin-block-end:0;display:grid;grid-template-rows:subgrid;grid-row:1 / span 2;gap:var(--s-2)}
.apply__form,.form-body{margin-block-start:var(--s-4)}
textarea.field__input{min-block-size:88px;padding:var(--s-3);resize:vertical;line-height:var(--lh-body)}
.profile__edit{margin-block-start:var(--s-4)}
.pay-form__note{font-size:var(--fs-12);color:var(--c-muted);margin-block:var(--s-2)}
.pay-empty{display:flex;flex-direction:column;gap:var(--s-3);padding-block:var(--s-6);text-align:center}
.pay-empty__text{color:var(--c-muted);margin:0}
.summary__method{display:flex;justify-content:space-between;align-items:center;margin-block:var(--s-4);padding:var(--s-3) var(--s-4);background:#f5f7fa;border-radius:12px}

/* ---------- apply ---------- */
.apply{display:flex;flex-direction:column;gap:var(--s-5)}
.apply__title{margin:0;font-size:var(--fs-24);font-weight:var(--fw-bold);color:var(--c-text)}
.apply__target{margin:var(--s-1) 0 0;font-size:var(--fs-16);font-weight:var(--fw-semibold);color:var(--c-primary)}
.apply__hint{margin:var(--s-2) 0 0;font-size:var(--fs-14);line-height:var(--lh-body);color:var(--c-muted)}
.pfield__value--muted{color:var(--c-muted)}
.pfield__suffix{flex:none;font-size:var(--fs-14);color:var(--c-muted)}

/* ---------- auth feedback + logout button ---------- */
.auth__error{margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);background:var(--c-danger-bg);color:var(--c-danger);font-size:var(--fs-14);text-align:center}
.otp__hint{margin:0 0 var(--s-3);font-size:var(--fs-14);color:var(--c-muted);text-align:center}
.side-menu__logout-form{margin-block-start:auto}
button.side-menu__link{inline-size:100%;border:0;background:transparent;font-family:inherit;cursor:pointer;text-align:start}

/* ---------- onboarding ---------- */
/* min-block-size:100% (not 100dvh): this section always renders inside .app-content, which is
   already sized to fill the available frame height via flex:1 (see .app-frame/.app-content
   above). Re-asserting a full *viewport* height here double-counts on top of that -- the box
   becomes taller than the visible frame (mobile) or the fixed 844px desktop frame, which
   overflowed .app-content (unwanted scrollbar) and pushed centered content below the visible
   midpoint. Same fix applied to .auth and .splash below (2026-07-29 UI defects). */
.onb{display:flex;flex-direction:column;min-block-size:100%;padding:var(--s-6) var(--s-5) var(--s-8)}
.onb__track{display:flex;flex:1;overflow:hidden}
.onb__slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s-4);padding-inline:var(--s-2)}
.onb__track{transition:transform var(--dur) var(--ease)}
/* position:relative + absolute/inset:0 (not display:grid;place-items:center): the portrait
   onboarding artwork (348x431, taller than the square box) needs BOTH axes capped by the box.
   max-inline-size:100% on the <img> resolved fine (the grid column has a definite width from
   .onb__art's own aspect-ratio), but max-block-size:100% never resolved -- percentage heights
   inside an auto-sized grid row don't reliably inherit the container's aspect-ratio-derived
   height, so the image fell back to its natural width-driven height (347px in a 280px box) and
   overflowed 35px into the title below (confirmed via getBoundingClientRect, 2026-07-29 UI
   defects). Absolute positioning against a definitely-sized relative ancestor resolves both axes
   unambiguously. */
.onb__art{position:relative;inline-size:100%;max-inline-size:280px;aspect-ratio:1;margin-block-end:var(--s-4)}
.onb__art img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:contain}
.onb__title{font-size:var(--fs-24);font-weight:var(--fw-bold);color:var(--c-text)}
.onb__sub{font-size:var(--fs-16);color:var(--c-muted);max-inline-size:34ch}
.onb__dots{display:flex;justify-content:center;gap:8px;margin-block:var(--s-6)}
.onb__dot{inline-size:8px;block-size:8px;border-radius:var(--r-round);background:var(--c-border);transition:inline-size var(--dur) var(--ease)}
.onb__dot.is-active{inline-size:26px;background:var(--c-primary)}
.onb__actions{display:flex;gap:var(--s-4);align-items:center}
.onb__actions .btn{flex:1}

/* ---------- auth (login) ---------- */
.auth{display:flex;flex-direction:column;min-block-size:100%;padding:var(--s-5) var(--s-6) var(--s-8)}
.auth__top{margin-block-end:var(--s-2)}
.auth__logo{display:grid;place-items:center;margin-block:var(--s-4) var(--s-6)}
.auth__logo img{block-size:110px;inline-size:auto}
.auth__title{font-size:var(--fs-30);font-weight:var(--fw-bold);text-align:center}
.auth__sub{font-size:var(--fs-16);color:var(--c-muted);text-align:center;margin-block:var(--s-2) var(--s-8)}
.auth__form{display:flex;flex-direction:column}
.auth__field{margin-block-start:var(--s-4)}
.field__flag{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-14);color:var(--c-text-3);white-space:nowrap;border-inline-end:1px solid var(--c-border);padding-inline-end:var(--s-3)}
.auth__forgot{align-self:flex-end;margin-block:var(--s-3) var(--s-6);font-size:var(--fs-14);color:var(--c-primary)}
.auth__submit{margin-block-start:var(--s-2)}
.auth__foot{text-align:center;margin-block-start:var(--s-6);color:var(--c-text-3);font-size:var(--fs-14)}
.auth__foot a{font-weight:var(--fw-semibold);text-decoration:underline}

/* ---------- splash ---------- */
.splash{min-block-size:100%;display:grid;place-items:center;background:var(--c-surface)}
.splash__logo{inline-size:150px;block-size:auto;animation:splashIn .8s var(--ease) both}
@keyframes splashIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* ---------- auth variants ---------- */
.auth--start{justify-content:flex-start}
.auth__logo--sm img{block-size:64px}

/* ---------- terms checkbox ---------- */
.check{display:flex;align-items:center;gap:var(--s-3);margin-block:var(--s-5) var(--s-6);font-size:var(--fs-14);color:var(--c-text-3)}
.check__box{inline-size:20px;block-size:20px;accent-color:var(--c-primary);flex-shrink:0}
.check a{font-weight:var(--fw-semibold);text-decoration:underline}

/* ---------- OTP ---------- */
.otp{display:flex;gap:var(--s-3);justify-content:center;margin-block:var(--s-2) var(--s-5)}
.otp__box{
  inline-size:56px;block-size:64px;text-align:center;
  font-size:var(--fs-24);font-weight:var(--fw-bold);color:var(--c-navy);
  background:var(--c-surface-2);border:1.5px solid var(--c-border-2);border-radius:var(--r-md);
}
.otp__box:focus{outline:0;border-color:var(--c-primary);background:var(--c-surface)}
.otp__resend{margin-block-end:var(--s-6);color:var(--c-text-3);font-size:var(--fs-14)}
.otp__resend a{font-weight:var(--fw-semibold);text-decoration:underline}

/* ---------- role cards ---------- */
.roles{display:flex;flex-direction:column;gap:var(--s-4);margin-block-start:var(--s-6)}
.role-card{
  display:flex;align-items:center;gap:var(--s-4);
  min-block-size:64px;padding-inline:var(--s-5);
  background:var(--c-surface);border:1px solid var(--c-border-2);border-radius:var(--r-pill);
  box-shadow:var(--sh-card);color:var(--c-navy);font-weight:var(--fw-bold);font-size:var(--fs-16);
  transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.role-card:active{transform:scale(.98)}
.role-card:hover{border-color:var(--c-primary)}
.role-card__icon{color:var(--c-cyan-2)}
.role-card__icon svg{inline-size:28px;block-size:28px}
.role-card__label{flex:1}
.role-card__chev{color:var(--c-muted)}
[dir="rtl"] .role-card__chev svg{transform:scaleX(-1)}

/* ---------- step indicator ---------- */
/* list-style:none: <ol class="steps"> is a real ordered list (semantically correct for "step 1 of
   4"), but the reset above only zeroes `ul` markers, not `ol`. .steps__node overrides its own
   `display` to grid for its circle layout, which incidentally also drops it out of `list-item`
   display -- but .steps__bar (the connector lines) never got a display override, so it kept the
   browser's native decimal counter marker. Under dir="rtl" Chrome renders that marker punctuation-
   first (".1" ".2" ".3"), which is why 3 stray marks appeared next to the bars, not 4 next to the
   circles (2026-07-29 UI defects, follow-up review). */
.steps{display:flex;align-items:center;gap:var(--s-2);margin-block:var(--s-6) var(--s-6);padding-inline:var(--s-2);list-style:none}
.steps__node{
  inline-size:30px;block-size:30px;border-radius:var(--r-round);flex-shrink:0;
  display:grid;place-items:center;font-size:var(--fs-14);font-weight:var(--fw-bold);
  background:var(--c-surface);border:2px solid var(--c-border);color:var(--c-muted);
}
.steps__node.is-active{border-color:var(--c-primary);color:var(--c-primary)}
.steps__node.is-done{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.steps__bar{flex:1;block-size:2px;background:var(--c-border)}

/* ---------- wizard ---------- */
.wizard{display:flex;flex-direction:column}
.wizard__step{display:none;flex-direction:column}
.wizard__step.is-active{display:flex}
.field--area{align-items:stretch;border-radius:var(--r-md);padding-block:var(--s-3)}
.field--area .field__input{resize:vertical;min-block-size:120px;line-height:1.6}
.wizard .auth__submit{margin-block-start:var(--s-6)}

/* ---------- coming-soon stub ---------- */
.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-4);text-align:center;min-block-size:60dvh;padding:var(--s-8) var(--s-5)}
.soon__badge{inline-size:88px;block-size:88px;border-radius:var(--r-round);background:var(--c-surface-2);display:grid;place-items:center;color:var(--c-primary)}
.soon__badge svg{inline-size:40px;block-size:40px}
.soon__title{font-size:var(--fs-22);font-weight:var(--fw-bold)}
.soon__text{color:var(--c-muted);font-size:var(--fs-16);max-inline-size:32ch}

/* ---------- helpers ---------- */
.stack{display:flex;flex-direction:column}
.center{text-align:center}
.muted{color:var(--c-muted)}
.mt-auto{margin-block-start:auto}

/* ==========================================================================
   File library ("ملفاتي") + global file-picker modal
   ========================================================================== */

/* shared button used by the library toolbar and the modal footer */
.lib-btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding-inline:var(--s-4);padding-block:var(--s-2);
  border:1px solid var(--c-border);border-radius:var(--r-pill);
  background:var(--c-surface);color:var(--c-text);
  font-family:var(--font-ar);font-size:var(--fs-14);font-weight:var(--fw-medium);
  cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.lib-btn svg{inline-size:18px;block-size:18px}
.lib-btn:hover{background:var(--c-surface-2)}
.lib-btn:disabled{opacity:.5;cursor:default}
.lib-btn--primary{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-primary-ink)}
.lib-btn--primary:hover{background:var(--c-navy-2);border-color:var(--c-navy-2)}

/* ---- library page ---- */
.lib-summary{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);margin-block-end:var(--s-4);
  background:var(--c-surface);border-radius:var(--r-md);box-shadow:var(--sh-card);
  font-size:var(--fs-14);
}
.lib-summary__count{font-weight:var(--fw-bold);color:var(--c-text)}
.lib-summary__size{color:var(--c-muted)}

.lib-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-block-end:var(--s-3);font-size:var(--fs-14)}
.lib-crumbs__item{color:var(--c-primary);font-weight:var(--fw-medium)}
.lib-crumbs__item:last-child{color:var(--c-text)}
.lib-crumbs__sep{color:var(--c-muted-2)}

.lib-toolbar{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block-end:var(--s-3)}

.lib-newfolder{display:flex;gap:var(--s-2);margin-block-end:var(--s-3)}
.lib-newfolder[hidden]{display:none}
.lib-newfolder .field__input{flex:1;min-inline-size:0}

.lib-status{padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--c-surface-2);color:var(--c-text);font-size:var(--fs-14);margin-block-end:var(--s-3)}
.lib-status--error{background:var(--c-danger-bg);color:var(--c-danger)}

.lib-section-title{font-size:var(--fs-16);font-weight:var(--fw-bold);margin-block:var(--s-4) var(--s-3)}

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s-3)}
.lib-grid--folders{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

.lib-folder{position:relative;display:flex}
.lib-folder__open{
  flex:1;display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-3);background:var(--c-surface);border:1px solid var(--c-border-2);
  border-radius:var(--r-md);min-inline-size:0;
}
.lib-folder__open:hover{background:var(--c-surface-2)}
.lib-folder__icon{color:var(--c-primary);display:grid;place-items:center;flex:0 0 auto}
.lib-folder__icon svg{inline-size:26px;block-size:26px}
.lib-folder__name{flex:1;font-size:var(--fs-14);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-folder__count{font-size:var(--fs-10);color:var(--c-muted)}
.lib-folder__tools{
  position:absolute;inset-block-start:6px;inset-inline-end:6px;display:flex;gap:2px;
  opacity:0;transition:opacity var(--dur-fast) var(--ease);
}
.lib-folder:hover .lib-folder__tools,.lib-folder:focus-within .lib-folder__tools{opacity:1}
.lib-folder__tool{
  inline-size:28px;block-size:28px;border-radius:var(--r-round);
  display:grid;place-items:center;background:var(--c-surface);color:var(--c-muted);
  border:none;cursor:pointer;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.lib-folder__tool:hover{background:var(--c-surface-2);color:var(--c-text)}
.lib-folder__tool--danger:hover{color:var(--c-danger)}
.lib-folder__tool svg{inline-size:16px;block-size:16px}
.lib-folder__rename{flex:1;font-family:var(--font-ar);font-size:var(--fs-14);border:1px solid var(--c-primary);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);min-inline-size:0}

.lib-file{
  display:flex;flex-direction:column;
  background:var(--c-surface);border:1px solid var(--c-border-2);border-radius:var(--r-md);
  overflow:hidden;
}
.lib-file__preview{display:block;aspect-ratio:4/3;background:var(--c-surface-2);display:grid;place-items:center;overflow:hidden}
.lib-file__preview img{inline-size:100%;block-size:100%;object-fit:cover}
.lib-file__glyph{display:grid;place-items:center;color:var(--c-muted)}
.lib-file__glyph svg{inline-size:44px;block-size:44px}
.lib-file__glyph--image{color:var(--c-green)}
.lib-file__glyph--video{color:var(--c-cyan-2)}
.lib-file__glyph--document{color:var(--c-primary)}
.lib-file__glyph--audio{color:var(--c-navy)}
.lib-file__glyph--archive{color:var(--c-warning-text)}
.lib-file__meta{display:flex;flex-direction:column;gap:2px;padding:var(--s-2) var(--s-3);min-inline-size:0}
.lib-file__name{font-size:var(--fs-12);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-file__size{font-size:var(--fs-10);color:var(--c-muted)}
.lib-file__rename{inline-size:100%;font-family:var(--font-ar);font-size:var(--fs-12);border:1px solid var(--c-primary);border-radius:var(--r-sm);padding:2px 4px}
.lib-file__actions{display:flex;border-block-start:1px solid var(--c-border-2)}
.lib-file__act{flex:1;display:grid;place-items:center;padding-block:var(--s-2);color:var(--c-muted);cursor:pointer;background:none;border:none;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.lib-file__act:hover{background:var(--c-surface-2);color:var(--c-text)}
.lib-file__act--danger:hover{color:var(--c-danger)}
.lib-file__act svg{inline-size:18px;block-size:18px}
.lib-file__act+.lib-file__act{border-inline-start:1px solid var(--c-border-2)}

.lib-empty{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);padding:var(--s-8) var(--s-4);text-align:center;color:var(--c-muted)}
.lib-empty__icon{color:var(--c-muted-2)}
.lib-empty__icon svg{inline-size:48px;block-size:48px}
.lib-empty__text{font-size:var(--fs-14)}

/* ---- global file-picker modal ---- */
body.fp-open{overflow:hidden}
.fp-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:600px){.fp-modal{align-items:center}}
.fp-modal[hidden]{display:none}
.fp-modal__scrim{position:absolute;inset:0;background:rgba(14,55,99,.45)}
.fp-modal__dialog{
  position:relative;display:flex;flex-direction:column;
  inline-size:100%;max-inline-size:var(--frame-max);
  max-block-size:min(88dvh,720px);
  background:var(--c-surface);
  border-start-start-radius:var(--r-lg);border-start-end-radius:var(--r-lg);
  box-shadow:var(--sh-frame);overflow:hidden;
}
@media (min-width:600px){.fp-modal__dialog{border-radius:var(--r-lg)}}
.fp-modal__head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-block-end:1px solid var(--c-border-2)}
.fp-modal__title{flex:1;font-size:var(--fs-18);font-weight:var(--fw-bold)}
.fp-modal__close{inline-size:36px;block-size:36px;border-radius:var(--r-round);display:grid;place-items:center;color:var(--c-muted);cursor:pointer;background:none;border:none}
.fp-modal__close:hover{background:var(--c-surface-2);color:var(--c-text)}
.fp-modal__close svg{inline-size:20px;block-size:20px}

.fp-tabs{display:flex;padding-inline:var(--s-5);gap:var(--s-4);border-block-end:1px solid var(--c-border-2)}
.fp-tab{padding-block:var(--s-3);background:none;border:none;border-block-end:2px solid transparent;color:var(--c-muted);font-family:var(--font-ar);font-size:var(--fs-14);font-weight:var(--fw-medium);cursor:pointer}
.fp-tab.is-active{color:var(--c-primary);border-block-end-color:var(--c-primary)}

.fp-pane{flex:1;overflow-y:auto;padding:var(--s-4) var(--s-5)}
.fp-pane[hidden]{display:none}

.fp-search{position:relative;margin-block-end:var(--s-3)}
.fp-search__icon{position:absolute;inset-block-start:50%;inset-inline-start:var(--s-3);transform:translateY(-50%);color:var(--c-muted);pointer-events:none}
.fp-search__icon svg{inline-size:18px;block-size:18px}
.fp-search .field__input{padding-inline-start:calc(var(--s-3) + 24px)}

.fp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-block-end:var(--s-3);font-size:var(--fs-14)}
.fp-crumbs__item{background:none;border:none;color:var(--c-primary);font-family:var(--font-ar);font-weight:var(--fw-medium);cursor:pointer;padding:0}
.fp-crumbs__item:last-child{color:var(--c-text)}
.fp-crumbs__sep{color:var(--c-muted-2)}

.fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s-3)}
.fp-folder{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);padding:var(--s-3);background:var(--c-surface);border:1px solid var(--c-border-2);border-radius:var(--r-md);cursor:pointer}
.fp-folder:hover{background:var(--c-surface-2)}
.fp-folder__glyph{color:var(--c-primary)}
.fp-folder__glyph svg{inline-size:32px;block-size:32px}
.fp-folder__name{font-size:var(--fs-12);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%}

.fp-file{display:flex;flex-direction:column;background:var(--c-surface);border:2px solid var(--c-border-2);border-radius:var(--r-md);overflow:hidden;cursor:pointer;text-align:start}
.fp-file:hover{border-color:var(--c-cyan-2)}
.fp-file.is-selected{border-color:var(--c-primary);box-shadow:0 0 0 2px rgba(5,87,169,.15)}
.fp-file__thumb{aspect-ratio:1;background:var(--c-surface-2);display:grid;place-items:center;overflow:hidden;color:var(--c-muted)}
.fp-file__thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.fp-file__thumb svg{inline-size:38px;block-size:38px}
.fp-file__name{padding:var(--s-2) var(--s-2) 0;font-size:var(--fs-12);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-file__size{padding:0 var(--s-2) var(--s-2);font-size:var(--fs-10);color:var(--c-muted)}

.fp-empty{text-align:center;color:var(--c-muted);padding:var(--s-8) 0;font-size:var(--fs-14)}

.fp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);min-block-size:200px;border:2px dashed var(--c-border);border-radius:var(--r-md);color:var(--c-muted);cursor:pointer;text-align:center;padding:var(--s-5)}
.fp-drop:hover{border-color:var(--c-primary);color:var(--c-primary)}
.fp-drop__icon svg{inline-size:40px;block-size:40px}
.fp-drop__text{font-size:var(--fs-16);font-weight:var(--fw-medium);color:var(--c-text)}
.fp-drop__hint{font-size:var(--fs-12);color:var(--c-muted)}
.fp-status{margin-block-start:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--c-surface-2);font-size:var(--fs-14);text-align:center}
.fp-status--error{background:var(--c-danger-bg);color:var(--c-danger)}

.fp-modal__foot{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-block-start:1px solid var(--c-border-2)}
.fp-selected{flex:1;font-size:var(--fs-13,13px);color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- picker trigger field (used by host forms, e.g. apply) ---- */
.fp-field{display:flex;flex-direction:column;gap:var(--s-2)}
.fp-picked{font-size:var(--fs-14);color:var(--c-text);padding:var(--s-2) var(--s-3);background:var(--c-surface-2);border-radius:var(--r-sm)}
.fp-picked[hidden]{display:none}

/* ---- shared file-input control (Views/Shared/_FileUploadField.cshtml) ----
   The native input is visually hidden (clip technique, not display:none/[hidden]) so it stays in
   the accessibility tree and keyboard-focusable -- the paired <label for> both triggers it and
   gives it its accessible name; :focus-visible on the native input paints a visible ring on the
   button it's paired with, so keyboard focus is never invisible. */
.file-upload{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.file-upload__native{
  position:absolute;inline-size:1px;block-size:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.file-upload__native:focus-visible + .file-upload__btn{
  outline:3px solid color-mix(in srgb,var(--c-primary) 55%,white);outline-offset:2px;
}
.file-upload__btn{cursor:pointer}
.file-upload__name{font-size:var(--fs-14);color:var(--c-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%}

/* ---- shared date-input control (Views/Shared/_DateInputField.cshtml) ----
   A masked text field standing in for <input type="date">, whose native mm/dd/yyyy text follows
   the browser's own UI language rather than the page's lang/dir (see the partial's own comment
   for the empirical proof). Digits are always Western-Arabic (1234567890) per project rule. */
.date-input__display{font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
.date-input.is-invalid{border-color:var(--c-danger)}

/* ---- drag & drop + paste ---- */
.lib-hint{font-size:var(--fs-12);color:var(--c-muted);margin-block-end:var(--s-3)}
.file-library{position:relative}
.lib-drophint{
  position:absolute;inset:0;z-index:5;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s-3);
  background:rgba(5,87,169,.08);border:2px dashed var(--c-primary);border-radius:var(--r-lg);
  color:var(--c-primary);font-size:var(--fs-18);font-weight:var(--fw-bold);pointer-events:none;
}
.file-library.is-dragover .lib-drophint{display:flex}
.lib-drophint__icon svg{inline-size:44px;block-size:44px}
.fp-drop.is-dragover{border-color:var(--c-primary);background:rgba(5,87,169,.06);color:var(--c-primary)}

/* ---- move-to-folder dialog ---- */
.move-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:600px){.move-modal{align-items:center}}
.move-modal[hidden]{display:none}
.move-modal__scrim{position:absolute;inset:0;background:rgba(14,55,99,.45)}
.move-modal__dialog{
  position:relative;display:flex;flex-direction:column;
  inline-size:100%;max-inline-size:var(--frame-max);max-block-size:min(80dvh,600px);
  background:var(--c-surface);border-start-start-radius:var(--r-lg);border-start-end-radius:var(--r-lg);
  box-shadow:var(--sh-frame);overflow:hidden;
}
@media (min-width:600px){.move-modal__dialog{border-radius:var(--r-lg)}}
.move-modal__head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-block-end:1px solid var(--c-border-2)}
.move-modal__title{flex:1;font-size:var(--fs-18);font-weight:var(--fw-bold)}
.move-modal__list{flex:1;overflow-y:auto;padding:var(--s-3) var(--s-4)}
.move-opt{
  inline-size:100%;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3);border:none;background:none;cursor:pointer;border-radius:var(--r-sm);
  color:var(--c-text);font-family:var(--font-ar);font-size:var(--fs-14);text-align:start;
}
.move-opt:hover{background:var(--c-surface-2)}
.move-opt__icon{color:var(--c-primary);display:grid;place-items:center;flex:0 0 auto}
.move-opt__icon svg{inline-size:20px;block-size:20px}
.move-opt__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- generic confirm-before-decisive-action dialog (member app, stage M3b) ----
   Same bottom-sheet-on-mobile/centered-on-desktop shape as .move-modal/.fp-modal above -- reused
   here for "accept/reject applicant", "close listing", "accept/reject change request" instead of
   a plain window.confirm() popup, so the confirmation still reads as part of this app, not the
   browser chrome. Wired generically by site.js via data-confirm-* attributes (one modal instance
   per page, shared by every trigger on it -- same pattern as Admin's _ConfirmModal). */
.confirm-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:600px){.confirm-modal{align-items:center}}
.confirm-modal[hidden]{display:none}
.confirm-modal__scrim{position:absolute;inset:0;background:rgba(14,55,99,.45)}
.confirm-modal__dialog{
  position:relative;display:flex;flex-direction:column;gap:var(--s-4);
  inline-size:100%;max-inline-size:var(--frame-max);
  background:var(--c-surface);padding:var(--s-5) var(--s-5) var(--s-6);
  border-start-start-radius:var(--r-lg);border-start-end-radius:var(--r-lg);
  box-shadow:var(--sh-frame);
}
@media (min-width:600px){.confirm-modal__dialog{border-radius:var(--r-lg)}}
.confirm-modal__title{font-size:var(--fs-18);font-weight:var(--fw-bold);color:var(--c-text)}
.confirm-modal__body{font-size:var(--fs-14);line-height:var(--lh-body);color:var(--c-muted)}
.confirm-modal__foot{display:flex;gap:var(--s-3)}
.confirm-modal__foot .btn{flex:1}

/* ---- player sports profile lists: media / achievements / club history (stage M4b) ---- */
.list-empty{font-size:var(--fs-14);color:var(--c-muted)}
.list-item-row{display:flex;align-items:flex-start;gap:var(--s-3)}
.list-item-row > .pfield,.list-item-row > .pfield--area{flex:1;min-inline-size:0}
.media-item{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:var(--s-3);background:var(--c-surface-2);border:1px solid var(--c-border-2);border-radius:var(--r-lg);padding:var(--s-3) var(--s-5)}
.media-item__title{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--c-text)}
.media-item__frame{position:relative;inline-size:100%;padding-block-start:56.25%;border-radius:var(--r-md);overflow:hidden;background:#000}
.media-item__frame video,.media-item__frame iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}

/* ---- terms and conditions modal (fullscreen on mobile, centered on desktop) ---- */
.terms-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:600px){.terms-modal{align-items:center}}
.terms-modal[hidden]{display:none}
.terms-modal__scrim{position:absolute;inset:0;background:rgba(14,55,99,.45)}
.terms-modal__dialog{
  position:relative;display:flex;flex-direction:column;
  inline-size:100%;max-inline-size:var(--frame-max);
  max-block-size:min(88dvh,720px);
  background:var(--c-surface);
  border-start-start-radius:var(--r-lg);border-start-end-radius:var(--r-lg);
  box-shadow:var(--sh-frame);overflow:hidden;
}
@media (min-width:600px){.terms-modal__dialog{border-radius:var(--r-lg)}}
.terms-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-block-end:1px solid var(--c-border-2)}
.terms-modal__title{flex:1;font-size:var(--fs-18);font-weight:var(--fw-bold);color:var(--c-text)}
.terms-modal__close{inline-size:36px;block-size:36px;border-radius:var(--r-round);display:grid;place-items:center;color:var(--c-muted);cursor:pointer;background:none;border:none;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.terms-modal__close:hover{background:var(--c-surface-2);color:var(--c-text)}
.terms-modal__close svg{inline-size:20px;block-size:20px}
.terms-modal__body{flex:1;overflow-y:auto;padding:var(--s-5)}
.terms-modal__content{font-size:var(--fs-14);line-height:var(--lh-body);color:var(--c-text-3)}
.terms-modal__content h3{margin:var(--s-4) 0 var(--s-2);font-size:var(--fs-16);font-weight:var(--fw-bold);color:var(--c-text)}
.terms-modal__content h3:first-child{margin-block-start:0}
.terms-modal__content p{margin:0 0 var(--s-3);color:var(--c-muted)}
.terms-modal__content ul{margin:0 0 var(--s-3);padding-inline-start:var(--s-5);display:flex;flex-direction:column;gap:var(--s-1)}
.terms-modal__content li{color:var(--c-muted)}