/* ══════════════════════════════════════════════════════════════════════
   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; }
}