/* The sheikh's app menu (lib/sheikh-nav.js): a white column on the right (the start side) of every page of his app —
   sheikh.html, interview.html, schedule.html — with the logo, the app's name and every section. Inside a room
   (body.in-room) and on the login screen (body.no-nav) it steps aside and the page is as before. */
.app-side { display: none; }
body.has-side:not(.in-room):not(.no-nav) { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
body.has-side:not(.in-room):not(.no-nav) .app-side { display: flex; grid-column: 1; grid-row: 1 / -1; }
body.has-side:not(.in-room):not(.no-nav) > :not(.app-side) { grid-column: 2; }
body.has-side:not(.in-room) .room-bar { display: none; }   /* outside a room the column carries the brand */

.app-side { view-transition-name: app-side; flex-direction: column; gap: 18px; min-height: 0; padding: 22px 0 18px; background: var(--surface); color: var(--ink); border-inline-end: 1px solid var(--line); overflow-y: auto; }
.side-brand { display: flex; align-items: center; gap: 11px; padding: 0 22px 6px; color: var(--ink); text-decoration: none; }
.side-brand img { flex: none; border-radius: var(--radius-md); box-shadow: var(--shadow-navy); }
.side-brand b { display: block; font-size: 22px; font-weight: 800; line-height: 1.15; }
.side-brand small { font-size: var(--text-sm); color: var(--ink-2); }

.app-nav { display: flex; flex-direction: column; gap: 3px; padding-inline-end: 18px; }
.app-nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-inline: 22px 14px; border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill); color: var(--ink-2); font-size: var(--text-base); font-weight: 500; text-decoration: none; transition: background-color 150ms ease-out, color 150ms ease-out; }
.app-nav a svg { flex: none; }
.app-nav .nl { flex: 1; min-width: 0; }
.app-nav a:hover { background: var(--navy-wash); color: var(--ink); }
.app-nav a[aria-current="page"] { background: var(--grad); color: var(--on-accent); font-weight: 700; box-shadow: var(--shadow-navy); }
.app-nav .nb { min-width: 22px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--gold); color: var(--gold-ink); font-size: var(--text-xs); font-weight: 700; display: inline-grid; place-items: center; }
.app-nav a[aria-current="page"] .nb { background: rgba(255, 255, 255, .2); color: var(--on-accent); }
.app-side a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.side-foot { margin: auto 18px 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--ground); color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
a.side-foot:hover { color: var(--brand); }
.side-foot + .side-foot { margin-top: 0; }
.trial-link { color: var(--brand); font-size: var(--text-md); font-weight: 500; }

@media (max-width: 1180px) {
  body.has-side:not(.in-room):not(.no-nav) { grid-template-columns: 216px minmax(0, 1fr); }
  .app-nav a { font-size: var(--text-md); gap: 10px; }
}
/* The phone (lib/sheikh-nav.js phoneTop/phoneTabs): an iPhone app's frame. A frosted top bar with the screen's title
   and «رجوع», the page between, a tab bar at the bottom; no side column, no «افتحه من الكمبيوتر». */
.ph-top, .ph-tabs { display: none; }
/* «المزيد»: the rest of the sections as an iOS grouped list */
.more-list { display: flex; flex-direction: column; margin: 8px 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.more-list a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; color: var(--ink); font-size: 17px; text-decoration: none; }
.more-list a + a { border-top: .5px solid var(--line); }
.more-list a:active { background: var(--fill); }
.more-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.more-l { flex: 1; }
.more-nb { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #E5484D; color: #fff; font-size: 13px; font-weight: 700; display: inline-grid; place-items: center; }
.more-list > a > svg:last-child { color: var(--ink-3); }
@media (max-width: 760px) {
  body.has-side:not(.in-room):not(.no-nav) { display: flex; flex-direction: column; }
  body.has-side:not(.in-room):not(.no-nav) .app-side, body.has-side:not(.in-room) .room-bar, body.has-side .small-screen { display: none !important; }
  body.has-side:not(.in-room):not(.no-nav) .ph-top { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(84px, auto); align-items: center; flex: none;
    min-height: 44px; padding: env(safe-area-inset-top, 0px) 8px 0; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: .5px solid rgba(16, 27, 58, .14); z-index: 30; }
  .ph-title { margin: 0; text-align: center; font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ph-back { justify-self: start; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--navy-2); font-size: 17px; font-weight: 500; }
  .ph-back:active { opacity: .55; }
  /* the brand mark at the end, on the page's 16px edge (the student's inner screens carry the same 28px mark) */
  .ph-mark { justify-self: end; display: flex; padding-inline-end: 8px; }
  body.has-side:not(.in-room):not(.no-nav) .ph-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); flex: none; padding: 4px 4px calc(env(safe-area-inset-bottom, 0px) + 4px);
    background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid rgba(16, 27, 58, .14); z-index: 30; }
  .ph-tabs a { min-height: 49px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-3); font-size: 10.5px; font-weight: 600; text-decoration: none; }
  .ph-tabs a[aria-current="page"] { color: var(--navy-2); }
  .ph-tabs a:active { opacity: .6; }
  .ph-tabs .ti { position: relative; display: grid; place-items: center; }
  .ph-nb { position: absolute; top: -4px; inset-inline-end: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
  /* the page scrolls between the two bars; its own heading and in-page «رجوع» links give way to the bar. No
     -webkit-overflow-scrolling: touch here (momentum is the default since iOS 13): iOS makes such a scroller a stacking context,
     which held every fixed .overlay inside it under the two bars (z-index 30), their buttons hidden by the tab bar (2026-10-30) */
  body.has-side:not(.in-room):not(.no-nav) > main, body.has-side:not(.in-room):not(.no-nav) > #page { flex: 1; min-height: 0; overflow-y: auto; }
  body.has-side:not(.in-room):not(.no-nav) :is(.page-head h1, .back-link, .ph-dup) { display: none; }
  .i-page { padding: 14px 16px 28px; }
  /* iOS's own type scale (body 17, subheadline 15, footnote 13) and its 44pt touch targets */
  body.has-side { --text-base: 17px; --text-md: 15px; --text-input: 17px; }
  body.has-side .seg-tabs button { height: 40px; }
  body.has-side .btn { min-height: 44px; }
  body.has-side .field { min-width: 0; max-width: 100%; }   /* a select as wide as its longest option stays on the screen */
  body.has-side .field select { max-width: 100%; }
  .page-head:not(:has(.lede, .page-actions)) { display: none; }
  .page-actions { flex: 1 1 100%; display: flex; gap: 8px; }
  .page-actions > .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
}
/* narrow windows: the column becomes a strip along the top; the menu works there, so no «افتحه من الكمبيوتر» */
@media (max-width: 900px) {
  body.has-side .small-screen { display: none; }
  body.has-side:not(.in-room):not(.no-nav) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-auto-rows: auto; }
  body.has-side:not(.in-room):not(.no-nav) > * { grid-column: 1; }
  body.has-side:not(.in-room):not(.no-nav) > :not(.app-side) { grid-column: 1; }   /* outranks the two-column rule above (an iPad upright had no menu) */
  body.has-side:not(.in-room):not(.no-nav) .app-side { grid-row: auto; flex-direction: row; align-items: center; gap: 8px; padding: 8px; overflow-x: auto; }
  .side-brand { padding: 0 6px; border: 0; }
  .side-brand small, .side-foot { display: none; }
  .app-nav { flex-direction: row; padding: 0; }
  .app-nav a { white-space: nowrap; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); }
}