/* Kufa English School — shared site navigation and accessible bottom timer, 2026-10-25. */
:root { --school-header-h: 68px; }
.school-topbar { height: var(--school-header-h); position: sticky; top: 0; z-index: 95; display: flex; align-items: center; gap: clamp(12px,2vw,30px); padding-inline: clamp(14px,3vw,44px); background: color-mix(in oklab, var(--surface) 96%, transparent); border-bottom: 1px solid var(--line); box-shadow: 0 4px 20px -16px rgb(0 0 0 /.35); backdrop-filter: blur(14px); font-family:var(--f-ui,system-ui); box-sizing:border-box; }
.school-topbar * { box-sizing:border-box; }
.school-topbar-brand { display:grid; grid-template-columns:42px minmax(0,max-content); grid-template-rows:auto auto; align-items:center; gap:0 10px; flex:none; color:var(--ink); text-decoration:none; min-width:0; }
.school-topbar-brand img { grid-row:1 / span 2; grid-column:1; width:42px; height:42px; object-fit:contain; }
.school-topbar-title { grid-row:1; grid-column:2; font-family:var(--f-head,var(--f-ui)); font-weight:750; font-size:17px; white-space:nowrap; line-height:1.3; }
.school-topbar-subtitle { grid-row:2; grid-column:2; color:var(--ink-2); font-size:11px; white-space:nowrap; line-height:1.5; }
.school-topbar-nav { margin-inline-start:auto; display:flex; align-items:center; gap:clamp(3px,1vw,14px); min-width:0; }
.school-topbar-nav a { display:inline-flex; align-items:center; text-decoration:none; color:var(--ink-2); font-size:13px; font-weight:650; padding:9px 9px; border-radius:10px; white-space:nowrap; }
.school-topbar-nav a:hover, .school-topbar-mobile nav a:hover { color:var(--primary); background:var(--bg-2); }
.school-topbar .school-topbar-telegram { color:var(--primary); background:color-mix(in oklab,var(--primary) 8%,var(--surface)); border:1px solid var(--line); }
.school-topbar a:focus-visible,.school-topbar summary:focus-visible,.school-static-cta:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.school-member-only { display:none!important; }
body.school-member-active .school-member-only { display:inline-flex!important; }
.school-study-menu-slot { display:none; align-items:center; }
.school-topbar-mobile { display:none; position:relative; margin-inline-start:auto; }
.school-topbar-mobile summary { display:flex; align-items:center; gap:4px; min-height:42px; padding:8px 11px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); font-weight:650; font-size:13px; cursor:pointer; list-style:none; }
.school-topbar-mobile summary::-webkit-details-marker { display:none; }
.school-topbar-mobile nav { position:absolute; top:calc(100% + 9px); inset-inline-end:0; min-width:min(260px,calc(100vw - 24px)); display:grid; gap:3px; padding:9px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 16px 38px rgb(0 0 0 / .15); }
.school-topbar-mobile nav a { padding:12px 13px; border-radius:9px; text-decoration:none; color:var(--ink); font-size:14px; }
.school-contact { margin:0 28px 28px; padding:24px 26px; border:1px solid var(--line); border-radius:16px; background:var(--bg); scroll-margin-top:calc(var(--school-header-h) + 12px); }
.school-contact h2 { margin:8px 0; font-size:23px; }
.school-contact p { font-size:14px; }
.school-contact-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
#school-introduction,#public-levels,#membership-entry { scroll-margin-top:calc(var(--school-header-h) + 16px); }
/* The navigation list is the only scrollable rail area. The study timer lives below it. */
.shell { min-height:calc(100dvh - var(--school-header-h)); }
.shell > .rail { position:sticky; top:var(--school-header-h); height:calc(100dvh - var(--school-header-h)); min-height:0; overflow:hidden; }
.shell > .rail > .cl-rail-head { flex:0 0 auto; z-index:1; position:relative; top:auto; }
.shell > .rail > .nav { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; padding-block:6px 12px; }
.shell > .rail > .rail-foot { flex:0 0 auto; position:relative; margin-top:0; border-top:1px solid var(--line); padding:12px 0 max(8px,env(safe-area-inset-bottom)); background:var(--bg-2); box-shadow:0 -10px 22px -22px rgb(0 0 0 / .5); }
.shell > .rail > .rail-foot .rail-timer { width:100%; flex-shrink:0; justify-content:flex-start; }
body.school-member-active .cl-rail-head > .brand { display:none; }
/* Public information page linked from the student interface. */
.school-static-main { max-width:930px; margin:30px auto; padding-inline:18px; display:grid; gap:22px; }
.school-static-main section { scroll-margin-top:calc(var(--school-header-h) + 20px); padding:clamp(24px,4vw,42px); border-radius:20px; border:1px solid var(--line); background:var(--surface); }
.school-static-main h1 { font-size:clamp(24px,4vw,36px); line-height:1.5; }
.school-static-main h2 { font-size:clamp(22px,3vw,30px); }
.school-static-main p { font-size:16px; line-height:2; max-width:75ch; color:var(--ink-2); }
.school-static-kicker { color:var(--primary); font-size:13px; font-weight:750; }
.school-static-cta { display:inline-flex; margin-top:12px; padding:11px 16px; background:var(--primary); color:var(--on-primary); border-radius:10px; text-decoration:none; font-weight:650; }
.school-static-footer { max-width:930px; margin:18px auto 30px; padding-inline:18px; color:var(--ink-2); font-size:13px; }
@media(max-width:1080px){
  .school-topbar-nav { display:none; }
  .school-topbar-mobile { display:block; }

}
@media(max-width:980px){
  :root { --school-header-h:60px; }
  .school-study-menu-slot { display:inline-flex; margin-inline-start:auto; }
  .school-study-menu-slot .cl-mobile-menu { display:grid; min-width:42px; width:42px; height:42px; box-shadow:none; }
  .shell > .rail { position:fixed; top:var(--school-header-h); bottom:0; height:calc(100dvh - var(--school-header-h)); padding-top:8px; padding-bottom:0; overflow:hidden; }
  .shell > .rail > .cl-rail-head { max-height:55%; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding-bottom:8px; }
  .shell > .rail > .nav { flex:1 1 auto; min-height:0; overflow-y:auto; }
  .shell > .rail > .rail-foot { padding:8px 0 max(9px,env(safe-area-inset-bottom)); }
  .cl-mobile-bar { display:none!important; }
  .cl-mobile-name .brand-mark { display:none; }
  .cl-mobile-name span { font-size:12px; }
  .cl-nav-veil { top:var(--school-header-h); }
}
@media(max-width:680px){
  .school-topbar { padding-inline:12px; gap:8px; }
  .school-topbar-brand { grid-template-columns:35px minmax(0,max-content); gap:0 7px; }
  .school-topbar-brand img { width:35px;height:35px; }
  .school-topbar-title { font-size:14px; }
  .school-topbar-subtitle { font-size:10px; }
  .school-contact { margin-inline:16px; padding:18px; }
  .school-contact-links .about-link { width:100%; justify-content:center; }
}
@media(max-height:600px) and (max-width:980px) { .shell > .rail > .cl-rail-head { max-height:45%; } }
@media(prefers-reduced-motion:reduce){.school-topbar * { transition:none!important;scroll-behavior:auto; }}

/* Do not show the public sign-in gate during an existing member's session check.
   Only browsers with prior local identity show this, and server /api/me decides
   whether to render a member account or reveal the real sign-in gate. */
.kes-session-splash { display:none; }
html.kes-session-checking #membership-entry,
html.kes-session-checking #school-introduction { display:none!important; }
html.kes-session-checking .kes-session-splash {
  display:flex; flex-direction:column; gap:12px; align-items:center;
  justify-content:center; box-sizing:border-box;
  min-height:clamp(260px,55dvh,590px); padding:36px 18px;
  color:var(--ink); background:var(--bg);
  font-family:var(--f-ui,system-ui); text-align:center;
}
.kes-session-splash-icon { width:44px; height:44px; object-fit:contain; }
.kes-session-splash p { max-width:440px; margin:0; color:var(--ink-2); line-height:1.85; }
.kes-session-splash .boot-recovery { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.kes-session-splash .small { font-size:13px; }
@media(prefers-reduced-motion:no-preference){
  html.kes-session-checking .kes-session-splash-icon { animation:kes-pulse 1.8s ease-in-out infinite; }
  @keyframes kes-pulse { 50% { opacity:.55; } }
}

/* 2026-10-26: public entrance / contact form, retaining the approved theme. */
.kes-hero-entry{margin-top:22px;width:max-content;max-width:100%}
.kes-public-contact-form{display:grid;gap:11px;margin-top:18px;max-width:680px}
.kes-public-contact-form label{font-weight:650;font-size:14px;color:var(--ink)}
.kes-public-contact-form input,.kes-public-contact-form textarea{width:100%;max-width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;line-height:1.6}
.kes-public-contact-form input:focus-visible,.kes-public-contact-form textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.kes-public-contact-form button{justify-self:start}
.kes-public-contact-form .kes-contact-status{margin:0;min-height:1.5em;font-weight:650}
.kes-honey{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(100%);opacity:0;pointer-events:none}
.school-contact{scroll-margin-top:calc(var(--school-header-h) + 18px)}
.kes-inpage-viewer[hidden]{display:none!important}
.kes-inpage-viewer{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.73);display:grid;place-items:center;padding:clamp(9px,2vw,26px)}
.kes-inpage-panel{height:min(92dvh,1100px);width:min(96vw,1080px);background:var(--surface);color:var(--ink);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 80px #0006}
.kes-inpage-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.kes-inpage-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kes-inpage-close{border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;padding:7px 14px;cursor:pointer}
.kes-inpage-content{min-height:0;flex:1;display:grid;place-items:center;overflow:auto}
.kes-inpage-content iframe{width:100%;height:100%;border:0;background:var(--surface)}
.kes-inpage-content video,.kes-inpage-content audio{width:100%;max-height:100%}
.kes-protected-note{font-size:12px;color:var(--ink-2);padding:8px 14px;margin:0}
@media(max-width:680px){.kes-public-contact-form button{width:100%;justify-self:center}.kes-inpage-panel{height:calc(100dvh - 16px);width:100%}.kes-hero-entry{width:100%;justify-content:center}}

/* Keep the integrated PDF reader usable on narrow screens. */
@media(max-width:760px){.pdf-reader .pdf-box{height:min(72dvh,700px);min-height:420px}.kes-inpage-viewer{padding:8px}.kes-inpage-content iframe{min-height:260px}}