/* ══════════════════════════════════════════════════════════════════════
   OWLMARK — FONT SYSTEM
   By Mourad Mekki
   ══════════════════════════════════════════════════════════════════════ */

/* ── OFFLINE RESILIENCE ────────────────────────────────────────────────
   If Google Fonts is blocked — a school network, a firewall, a plane —
   the app must still be usable and the certificate must still look like a
   certificate. These stacks are the safety net: a serif certificate falls
   back to a real serif, never to the browser's default sans.

   Metric-compatible-ish choices, so the layout does not lurch when the web
   font arrives. Never let the page collapse while fonts are loading. */
:root {
  --om-fb-serif:  'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --om-fb-script: 'Segoe Script', 'Bradley Hand', 'Apple Chancery', cursive, serif;
  --om-fb-sans:   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --om-fb-arabic: 'Geeza Pro', 'Traditional Arabic', 'Simplified Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* Google Fonts unreachable — keep the certificate dignified. */
body.om-fonts-offline .certificate .ce-field { font-family: var(--om-fb-serif) !important; }
body.om-fonts-offline .certificate [dir="rtl"] .ce-field,
body.om-fonts-offline.lang-ar .certificate .ce-field { font-family: var(--om-fb-arabic) !important; }

/* ── PICKER HEADER ───────────────────────────────────────────────────
   FIXED: this header was styled for a DARK panel (cream text, low-alpha
   borders). The dropdown actually renders on WHITE — so the search field
   and every category chip were cream-on-white, i.e. invisible.

   Re-cut for a light surface: dark ink, real borders, proper contrast.
   ──────────────────────────────────────────────────────────────────── */
.om-fpick-head {
  position: sticky; top: 0; z-index: 2;
  padding: 10px;
  background: #fbfaf7;
  border-bottom: 1px solid rgba(20, 38, 63, .14);
}

.om-fsearch {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  margin: 0 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(20, 38, 63, .22);
  background: #fff;
  color: #14263f;                       /* was cream on white */
  font-size: 13px;
  font-family: var(--om-fb-sans);
}
.om-fsearch::placeholder { color: rgba(20, 38, 63, .45); }
.om-fsearch:focus {
  outline: none;
  border-color: #c9973d;
  box-shadow: 0 0 0 3px rgba(201, 151, 61, .2);
}

.om-chips {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}
.om-chips::-webkit-scrollbar { height: 3px; }
.om-chips::-webkit-scrollbar-thumb {
  background: rgba(201, 151, 61, .45); border-radius: 3px;
}

.om-chip {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(20, 38, 63, .28);
  background: #fff;
  color: #1f3b5c;                       /* was rgba(240,232,213,.72) — unreadable */
  font-family: var(--om-fb-sans);
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.om-chip:hover {
  background: #fdf6e6;
  border-color: #c9973d;
  color: #14263f;
}
.om-chip.active {
  background: linear-gradient(160deg, #e6cd8f, #c9973d);
  border-color: #a97f2c;
  color: #16233c;
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(201, 151, 61, .35);
}
.om-chip:focus-visible { outline: 2px solid #14263f; outline-offset: 2px; }

.om-fempty {
  margin: 10px 0 4px;
  text-align: center;
  font-family: var(--om-fb-sans);
  font-size: 12px;
  color: rgba(20, 38, 63, .55);
}

/* ── OPTIONS ───────────────────────────────────────────────────────── */
.ft-font-opt { position: relative; padding-right: 30px !important; }
.ft-font-opt[hidden] { display: none !important; }

/* A family still arriving. Never leave a blank row — show the fallback,
   dimmed, so the list keeps its shape. */
.ft-font-opt.om-font-loading { opacity: .55; }
.ft-font-opt.om-font-loading::after {
  content: '';
  position: absolute; right: 32px; top: 50%;
  width: 9px; height: 9px; margin-top: -5px;
  border: 1.5px solid rgba(201, 151, 61, .3);
  border-top-color: rgba(201, 151, 61, .95);
  border-radius: 50%;
  animation: omSpin .7s linear infinite;
}
@keyframes omSpin { to { transform: rotate(360deg); } }

/* A family that could not be fetched. Say so, rather than silently
   rendering the fallback and letting the teacher pick a font that will
   not print as they expect. */
.ft-font-opt.om-font-failed { opacity: .45; }
.ft-font-opt.om-font-failed::after {
  content: 'offline';
  position: absolute; right: 30px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--om-fb-sans);
  font-size: 9px; letter-spacing: .4px;
  color: rgba(240, 232, 213, .45);
}

/* ── FAVOURITE ─────────────────────────────────────────────────────── */
.om-fav {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0; border-radius: 5px;
  background: transparent;
  color: rgba(20, 38, 63, .28);
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: color .12s ease;
}
.om-fav:hover { color: #c9973d; background: rgba(201, 151, 61, .12); }
.om-fav.on { color: #c9973d; }
.om-fav:focus-visible { outline: 2px solid #c9973d; outline-offset: 1px; }

@media print {
  .om-fpick-head, .om-fav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-font-opt.om-font-loading::after { animation: none; }
  .om-chip { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   PLATE GALLERY — search, filters, favourites, empty states
   Reuses the .om-chip language from the font picker so the two
   galleries read as one system rather than two.
   ══════════════════════════════════════════════════════════════════════ */
.om-gal-head {
  position: sticky; top: 0; z-index: 3;
  padding: 10px 10px 9px;
  margin-bottom: 8px;
  border-radius: 10px;
  /* FIXED: this was var(--panel-alt, #14243f) — a DARK panel. The sidebar
     is light. So the whole search block rendered as a black box in a
     cheerful studio. Ivory, with a gold hairline. */
  background: linear-gradient(180deg, #fffdf8, #fdf8ec);
  border: 1px solid rgba(169, 127, 44, .28);
  box-shadow: 0 1px 6px rgba(20, 38, 63, .05);
}

.om-gsearch {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  margin: 0 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(169, 127, 44, .3);
  background: #fff;
  color: #14263f;                       /* was cream — invisible on white */
  font-size: 13px;
  font-family: var(--om-fb-sans);
}
.om-gsearch::placeholder { color: #6b7c96; }
.om-gsearch:focus {
  outline: none;
  border-color: #c9973d;
  box-shadow: 0 0 0 3px rgba(201, 151, 61, .2);
}

.om-gchips { margin-bottom: 2px; }

.om-gcount {
  margin: 6px 2px 0;
  font-family: var(--om-fb-sans);
  font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
  color: #6b7c96;                       /* was rgba(240,232,213,.42) */
}

/* ── cards ────────────────────────────────────────────────────────── */
.pg-thumb { position: relative; }
.pg-thumb[hidden] { display: none !important; }

/* The cards are now real buttons — they must show focus. */
.pg-thumb:focus-visible {
  outline: 2px solid #c9973d;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Active selection must be unmistakable. */
.pg-thumb.sel::after {
  content: '';
  position: absolute; inset: 0;
  border: 2px solid #c9973d;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(201, 151, 61, .22);
  pointer-events: none;
}

.om-pfav {
  position: absolute; top: 4px; right: 4px;
  z-index: 2;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: rgba(10, 18, 32, .55);
  backdrop-filter: blur(2px);
  color: rgba(240, 232, 213, .35);
  font-size: 12px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s ease, color .14s ease;
}
.pg-thumb:hover .om-pfav,
.pg-thumb:focus-within .om-pfav,
.om-pfav.on { opacity: 1; }
.om-pfav:hover { color: #c9973d; }
.om-pfav.on { color: #c9973d; }
.om-pfav:focus-visible { outline: 2px solid #c9973d; outline-offset: 1px; opacity: 1; }

.om-pbadge {
  position: absolute; left: 4px; bottom: 4px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(10, 18, 32, .62);
  backdrop-filter: blur(2px);
  color: rgba(240, 232, 213, .82);
  font-family: var(--om-fb-sans);
  font-size: 9px; letter-spacing: .4px;
  white-space: nowrap;
  pointer-events: none;
}

/* ── empty states ─────────────────────────────────────────────────── */
.om-gempty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 18px;
  text-align: center;
}
.om-gempty[hidden] { display: none; }
.om-gempty-mark {
  width: 40px; height: 40px; margin-bottom: 2px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px dashed rgba(169, 127, 44, .45);
  color: #a97f2c;
  font-size: 16px;
}
.om-gempty strong {
  font-family: 'Cinzel', serif;
  font-size: 13.5px; letter-spacing: .3px;
  color: #14263f;
}
.om-gempty span {
  font-family: var(--om-fb-sans);
  font-size: 12px; line-height: 1.55;
  color: #6b7c96;
  max-width: 250px;
}
.om-gempty .om-btn { margin-top: 8px; }

@media print {
  .om-gal-head, .om-gempty, .om-pfav, .om-pbadge { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .om-pfav { transition: none; }
}