/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — DESIGN SYSTEM
   Shared tokens, studio navigation, dialogs and toasts.
   Loaded by: index.html, timetable.html, certificate.html
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Core palette */
  --ok-navy:#101A2D;
  --ok-ink:#0A1020;
  --ok-gold:#C99A3D;
  --ok-gold-soft:#E8C978;
  --ok-ivory:#FAF7EF;
  --ok-cream:#F2EBDD;
  --ok-emerald:#183B38;
  --ok-burgundy:#64283A;
  --ok-slate:#64748B;
  --ok-border:#DDD5C6;

  /* Derived */
  --ok-navy-2:#17233D;
  --ok-gold-line:rgba(201,154,61,.45);
  --ok-text:#22293A;
  --ok-text-soft:#5B647A;
  --ok-card:#FFFDF8;
  --ok-shadow-sm:0 2px 10px rgba(16,26,45,.08);
  --ok-shadow-md:0 10px 32px rgba(16,26,45,.14);
  --ok-shadow-lg:0 24px 64px rgba(10,16,32,.22);
  --ok-radius:16px;

  /* Type */
  --ok-display:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --ok-ui:'Manrope','Nunito',system-ui,-apple-system,sans-serif;
  --ok-ar-ui:'Cairo',system-ui,sans-serif;
  --ok-ar-display:'Amiri','Cairo',serif;
}

/* ── Focus & accessibility baseline ─────────────────────────────── */
.ok-focusable:focus-visible,
.ok-btn:focus-visible,
.ok-tab:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:2px solid var(--ok-gold);
  outline-offset:2px;
}
.ok-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

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

/* ── Shared buttons ─────────────────────────────────────────────── */
.ok-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:12px;cursor:pointer;
  font-family:var(--ok-ui);font-weight:700;font-size:.85rem;
  border:1px solid var(--ok-border);
  background:#fff;color:var(--ok-navy);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.ok-btn:hover{transform:translateY(-1px);box-shadow:var(--ok-shadow-sm);border-color:var(--ok-gold)}
.ok-btn:active{transform:translateY(0)}
.ok-btn.gold{background:linear-gradient(180deg,var(--ok-gold-soft),var(--ok-gold));border-color:var(--ok-gold);color:var(--ok-ink)}
.ok-btn.gold:hover{filter:brightness(1.05)}
.ok-btn.navy{background:linear-gradient(180deg,var(--ok-navy-2),var(--ok-navy));border-color:var(--ok-navy);color:var(--ok-ivory)}
.ok-btn.ghost{background:transparent;border-color:transparent}
.ok-btn.ghost:hover{border-color:var(--ok-border);box-shadow:none}
.ok-btn svg{width:16px;height:16px;flex:0 0 auto}
.ok-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}

/* ── Studio floating switcher (Certificate Studio & shared pages) ── */
#okStudioNav{
  position:fixed;left:18px;bottom:18px;z-index:99990;
  font-family:var(--ok-ui);
}
[dir="rtl"] #okStudioNav, body.lang-ar #okStudioNav{left:auto;right:18px}
#okStudioNav .okn-pill{
  display:flex;align-items:center;gap:9px;
  padding:9px 15px 9px 10px;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#1B2A47,var(--ok-navy));
  border:1px solid rgba(232,201,120,.4);
  color:var(--ok-ivory);font-weight:800;font-size:.78rem;letter-spacing:.05em;
  box-shadow:0 10px 30px rgba(5,10,22,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
#okStudioNav .okn-pill:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(5,10,22,.55)}
#okStudioNav .okn-pill img{width:24px;height:24px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
#okStudioNav .okn-pill span{
  max-width:180px;overflow:hidden;white-space:nowrap;
  transition:max-width .26s cubic-bezier(.2,.9,.3,1.1), opacity .2s ease, margin .26s ease;
}

/* Resting state: after a few idle seconds the switcher shrinks to its
   emblem and softens, so it stops sitting on top of whatever is beneath
   it. Any pointer movement, key press or scroll brings it back. */
#okStudioNav.resting .okn-pill{padding:9px;opacity:.42}
#okStudioNav.resting .okn-pill span{max-width:0;opacity:0;margin-inline-start:-9px}
#okStudioNav.resting:hover .okn-pill,
#okStudioNav.resting:focus-within .okn-pill{padding:9px 15px 9px 10px;opacity:1}
#okStudioNav.resting:hover .okn-pill span,
#okStudioNav.resting:focus-within .okn-pill span{max-width:180px;opacity:1;margin-inline-start:0}
#okStudioNav .okn-menu{
  position:absolute;left:0;bottom:calc(100% + 12px);
  min-width:250px;padding:10px;border-radius:18px;
  background:linear-gradient(180deg,#FFFDF8,var(--ok-ivory));
  border:1px solid var(--ok-border);
  box-shadow:var(--ok-shadow-lg);
  opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
[dir="rtl"] #okStudioNav .okn-menu, body.lang-ar #okStudioNav .okn-menu{left:auto;right:0}
#okStudioNav.open .okn-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
#okStudioNav .okn-title{
  padding:6px 10px 10px;font-size:.62rem;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ok-gold);
  border-bottom:1px solid var(--ok-border);margin-bottom:8px;
}
body.lang-ar #okStudioNav .okn-title{letter-spacing:.04em}
#okStudioNav .okn-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 10px;border-radius:12px;border:1px solid transparent;
  background:transparent;color:var(--ok-text);cursor:pointer;text-decoration:none;
  font-weight:700;font-size:.84rem;text-align:start;
  transition:background .15s ease, border-color .15s ease;
}
#okStudioNav .okn-item:hover{background:#fff;border-color:var(--ok-border)}
#okStudioNav .okn-item.current{background:rgba(201,154,61,.10);border-color:var(--ok-gold-line);cursor:default}
#okStudioNav .okn-ic{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;color:var(--ok-ivory);
  background:linear-gradient(150deg,var(--ok-navy-2),var(--ok-navy));
  border:1px solid rgba(232,201,120,.35);
}
#okStudioNav .okn-ic svg{width:17px;height:17px}
#okStudioNav .okn-item small{display:block;font-weight:600;color:var(--ok-text-soft);font-size:.68rem;margin-top:1px}

/* ── Toasts ─────────────────────────────────────────────────────── */
.ok-toast{
  position:fixed;left:50%;bottom:28px;z-index:99995;
  transform:translateX(-50%) translateY(16px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:14px;
  background:linear-gradient(180deg,#1B2A47,var(--ok-ink));
  border:1px solid rgba(232,201,120,.4);
  color:var(--ok-ivory);font-family:var(--ok-ui);font-weight:700;font-size:.85rem;
  box-shadow:0 18px 48px rgba(5,10,22,.5);
  transition:opacity .24s ease, transform .24s ease;
}
.ok-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ok-toast::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok-gold-soft);box-shadow:0 0 10px var(--ok-gold-soft)}

/* ── Dialogs (replaces alert / confirm / prompt) ────────────────── */
.ok-dialog-backdrop{
  position:fixed;inset:0;z-index:99992;
  background:rgba(10,16,32,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.ok-dialog-backdrop.open{opacity:1;pointer-events:auto}
.ok-dialog{
  width:min(430px,100%);border-radius:20px;overflow:hidden;
  background:var(--ok-ivory);border:1px solid var(--ok-border);
  box-shadow:var(--ok-shadow-lg);
  font-family:var(--ok-ui);color:var(--ok-text);
  transform:translateY(14px) scale(.97);transition:transform .22s cubic-bezier(.2,.9,.3,1.2);
}
.ok-dialog-backdrop.open .ok-dialog{transform:translateY(0) scale(1)}
.ok-dialog header{
  padding:16px 20px 12px;
  background:linear-gradient(180deg,#FFFDF8,var(--ok-ivory));
  border-bottom:1px solid var(--ok-border);
}
.ok-dialog header h3{
  margin:0;font-family:var(--ok-display);font-weight:700;font-size:1.3rem;color:var(--ok-navy);
}
body.lang-ar .ok-dialog header h3{font-family:var(--ok-ar-ui)}
.ok-dialog .okd-body{padding:16px 20px;font-size:.88rem;line-height:1.55;color:var(--ok-text-soft)}
.ok-dialog .okd-body input{
  width:100%;margin-top:10px;padding:11px 13px;border-radius:12px;
  border:1.5px solid var(--ok-border);background:#fff;color:var(--ok-text);
  font-family:inherit;font-size:.9rem;outline:none;
}
.ok-dialog .okd-body input:focus{border-color:var(--ok-gold)}
.ok-dialog footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 20px 18px}
.ok-dialog footer .ok-btn.danger{background:linear-gradient(180deg,#7A3448,var(--ok-burgundy));border-color:var(--ok-burgundy);color:#fff}

/* ── Print: studio chrome must never leak ───────────────────────── */
@media print{
  #okStudioNav,.ok-toast,.ok-dialog-backdrop{display:none!important}
}

/* ── First-run privacy notice ───────────────────────────────────── */
.ok-privacy .ok-dialog{width:min(500px,100%)}
.ok-privacy .ok-dialog header{display:flex;align-items:center;gap:12px}
.ok-privacy .okp-crest{width:38px;height:38px;object-fit:contain;flex:0 0 auto}
.ok-privacy .okp-lead{
  font-size:.95rem;font-weight:700;color:var(--ok-navy);margin-bottom:10px;line-height:1.5;
}
.ok-privacy .okp-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ok-privacy .okp-points li{
  position:relative;padding-inline-start:18px;font-size:.84rem;line-height:1.55;color:var(--ok-text-soft);
}
.ok-privacy .okp-points li::before{
  content:"";position:absolute;inset-inline-start:0;top:8px;
  width:7px;height:7px;border-radius:50%;background:var(--ok-gold);
}
.ok-privacy .okp-foot{align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ok-privacy .okp-never{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:.78rem;font-weight:600;color:var(--ok-text-soft);
}
.ok-privacy .okp-never input{width:15px;height:15px;accent-color:var(--ok-gold);flex:0 0 auto}