/* ══════════════════════════════════════════════════════════════════════
   OWLMARK — FIRST USE, HELP ASSISTANT, EMPTY STATES
   By Mourad Mekki
   ══════════════════════════════════════════════════════════════════════ */

/* ── FIRST USE: four steps ─────────────────────────────────────────── */
.om-first-steps { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; }
.om-first-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ok-line, #e6e3f2);
}
.om-first-steps li:last-child { border-bottom: 0; }
.om-first-n {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--gel-gold-a, #fff3d2), var(--gel-gold-b, #ffd98a));
  border: 1px solid var(--gel-gold-rim, #d9a532);
  color: var(--gel-gold-ink, #5c4413);
  font: 700 12px/1 'Cinzel', serif;
}
.om-first-steps div { display: flex; flex-direction: column; gap: 2px; }
.om-first-steps strong { font-size: 13.5px; color: var(--ok-ink, #2b2740); }
.om-first-steps span   { font-size: 12.3px; line-height: 1.55; color: var(--ok-ink-soft, #6f6a85); }

/* ── THE OWL: a drawer, not a takeover ─────────────────────────────── */
.om-help-scrim {
  position: fixed; inset: 0; z-index: 9650;
  background: rgba(43, 39, 64, .34);
  backdrop-filter: blur(2px);
  display: flex; justify-content: flex-end;
}
.om-help {
  width: min(420px, 100%);
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--ok-panel, #fff);
  border-left: 1px solid var(--ok-line, #e6e3f2);
  box-shadow: -16px 0 48px rgba(43, 39, 64, .2);
  animation: omSlide .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes omSlide { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }

.om-help-head {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--ok-line, #e6e3f2);
}
.om-help-owl {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--gel-gold-a, #fff3d2), var(--gel-gold-b, #ffd98a));
  border: 1px solid var(--gel-gold-rim, #d9a532);
  font-size: 19px;
}
.om-help-head h2 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 16px; letter-spacing: .4px;
  color: var(--ok-ink, #2b2740);
}
.om-help-head p {
  margin: 1px 0 0;
  font-size: 11px; letter-spacing: .3px;
  color: var(--ok-ink-faint, #a09aba);
}
.om-help-x {
  margin-left: auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--ok-line, #e6e3f2);
  border-radius: 8px;
  background: var(--ok-soft, #f6f4fd);
  color: var(--ok-ink-soft, #6f6a85);
  cursor: pointer;
  font-size: 13px;
}
.om-help-x:hover { background: var(--ok-panel, #fff); }
.om-help-x:focus-visible { outline: 2px solid var(--gel-gold-rim, #d9a532); outline-offset: 2px; }

.om-help-search {
  margin: 12px 18px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--ok-line, #e6e3f2);
  border-radius: 8px;
  background: var(--ok-soft, #f6f4fd);
  color: var(--ok-ink, #2b2740);
  font-size: 13px;
}
.om-help-search:focus {
  outline: none;
  border-color: var(--gel-gold-rim, #d9a532);
  box-shadow: 0 0 0 2px rgba(217, 165, 50, .14);
}

.om-help-body { flex: 1; overflow-y: auto; padding: 0 18px 24px; }

.om-help-topic {
  border-bottom: 1px solid var(--ok-line, #e6e3f2);
}
.om-help-topic[hidden] { display: none; }
.om-help-topic > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 2px;
  cursor: pointer;
  list-style: none;
  font-family: 'Cinzel', serif;
  font-size: 13px; letter-spacing: .2px;
  color: var(--ok-ink, #2b2740);
}
.om-help-topic > summary::-webkit-details-marker { display: none; }
.om-help-topic > summary:hover { color: var(--gel-gold-ink, #5c4413); }
.om-help-topic > summary:focus-visible {
  outline: 2px solid var(--gel-gold-rim, #d9a532);
  outline-offset: 1px; border-radius: 5px;
}
.om-help-i {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--ok-soft, #f6f4fd);
  border: 1px solid var(--ok-line, #e6e3f2);
  font-size: 12px;
  color: var(--gel-gold-ink, #5c4413);
}
.om-help-topic[open] > summary .om-help-i {
  background: linear-gradient(160deg, var(--gel-gold-a, #fff3d2), var(--gel-gold-b, #ffd98a));
  border-color: var(--gel-gold-rim, #d9a532);
}

.om-help-txt { padding: 0 0 14px 36px; }
.om-help-txt p  { margin: 0 0 8px; font-size: 12.8px; line-height: 1.65; color: var(--ok-ink-soft, #6f6a85); }
.om-help-txt ul { margin: 0; padding-left: 16px; }
.om-help-txt li { margin-bottom: 6px; font-size: 12.6px; line-height: 1.6; color: var(--ok-ink-soft, #6f6a85); }
.om-help-txt strong { color: var(--ok-ink, #2b2740); }
.om-help-txt code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--ok-soft, #f6f4fd);
  border: 1px solid var(--ok-line, #e6e3f2);
  font-size: 11.5px;
}
.om-help-empty {
  margin: 20px 0; text-align: center;
  font-size: 12.5px; color: var(--ok-ink-faint, #a09aba);
}

/* ── EMPTY STATES ──────────────────────────────────────────────────── */
.om-empty {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 18px 14px;
  margin: 8px 0;
  text-align: center;
  border: 1px dashed var(--ok-line, rgba(201, 151, 61, .3));
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
}
.om-empty[hidden] { display: none; }
.om-empty-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px dashed rgba(201, 151, 61, .38);
  color: rgba(201, 151, 61, .7);
  font-size: 14px;
}
.om-empty strong {
  font-family: 'Cinzel', serif;
  font-size: 12.5px; letter-spacing: .3px;
}
.om-empty span {
  font-size: 11.8px; line-height: 1.6;
  opacity: .72;
  max-width: 270px;
}
.om-empty .om-btn { margin-top: 6px; min-height: 34px; font-size: 10.5px; }

.om-batch-count {
  margin: 6px 2px 0;
  font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: .5px;
  opacity: .7;
}
.om-batch-count[hidden] { display: none; }

/* The dashed upload circles are guides, not errors. */
.om-ph { cursor: help; }

@media print {
  .om-help-scrim, #omFirst, #omHelpBtn,
  .om-empty, .om-batch-count { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .om-help { animation: none; }
}

/* ── Quick walkthrough entry ─────────────────────────────────────────
   Certificate Studio's four-step introduction used to open itself on
   launch, on top of the boot curtain and the privacy notice. It is not
   deleted — it lives here, where a teacher can call for it. */
.om-help-start{
  display:flex;align-items:center;gap:12px;width:100%;
  margin:0 0 12px;padding:12px 14px;
  border:1px solid rgba(201,154,61,.34);border-radius:14px;
  background:linear-gradient(180deg,rgba(216,177,92,.14),rgba(184,134,47,.09));
  font:inherit;text-align:start;cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.om-help-start:hover{
  background:linear-gradient(180deg,rgba(216,177,92,.22),rgba(184,134,47,.14));
  border-color:rgba(201,154,61,.55);
}
.om-help-start:focus-visible{outline:2px solid #B8862F;outline-offset:2px}
.om-help-start > span:first-child{
  flex:0 0 32px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:rgba(184,134,47,.18);
  color:#8A6420;font-size:1rem;
}
.om-help-start > span:last-child{
  display:flex;flex-direction:column;gap:2px;
  font-size:.9rem;font-weight:700;color:#101A2D;
}
.om-help-start small{font-size:.76rem;font-weight:500;color:#5A6478}