/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — TOOL GUIDE AND COACH MARKS
   Companion stylesheet to owlmark-guide.js.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Guide panel ─────────────────────────────────────────────────── */
.omg-scrim{
  position:fixed;inset:0;z-index:17500;
  display:flex;justify-content:flex-end;
  background:rgba(11,18,32,0);
  transition:background .24s ease;
}
.omg-scrim.open{background:rgba(11,18,32,.5)}

.omg-panel{
  width:min(432px, 100%);height:100%;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#FFFDF8,#F6F0E2);
  border-inline-start:1px solid rgba(201,154,61,.34);
  box-shadow:-24px 0 60px rgba(10,16,32,.34);
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.22,.8,.3,1);
}
[dir="rtl"] .omg-panel{transform:translateX(-100%)}
.omg-scrim.open .omg-panel{transform:none}

.omg-head{
  display:flex;align-items:center;gap:12px;
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(16,26,45,.09);
}
.omg-crest{width:34px;height:34px;object-fit:contain;flex:0 0 34px}
.omg-headtx{flex:1 1 auto;min-width:0}
.omg-headtx h2{
  margin:0;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.34rem;font-weight:700;color:#101A2D;
}
.omg-headtx p{margin:1px 0 0;font-size:.72rem;font-weight:600;color:#8A6420;letter-spacing:.06em;text-transform:uppercase}
body.lang-ar .omg-headtx h2{font-family:'Cairo',system-ui,sans-serif;font-size:1.16rem}
body.lang-ar .omg-headtx p{letter-spacing:0;text-transform:none}

.omg-x{
  flex:0 0 44px;width:44px;height:44px;
  border:1px solid rgba(16,26,45,.12);border-radius:11px;
  background:rgba(16,26,45,.04);color:#3A4257;
  font-size:1rem;cursor:pointer;
}
.omg-x:hover{background:rgba(16,26,45,.09)}
.omg-x:focus-visible{outline:2px solid #B8862F;outline-offset:2px}

.omg-search{
  margin:14px 18px 8px;padding:11px 13px;
  min-height:44px;
  border:1px solid rgba(16,26,45,.14);border-radius:12px;
  background:#FFFDF8;color:#101A2D;
  font-family:'Manrope',system-ui,sans-serif;font-size:.88rem;
}
.omg-search:focus{outline:2px solid #B8862F;outline-offset:-1px;border-color:#B8862F}

.omg-body{flex:1 1 auto;overflow:auto;padding:6px 18px 18px}

.omg-topic{
  margin:0 0 8px;border-radius:13px;
  border:1px solid rgba(16,26,45,.1);
  background:rgba(255,255,255,.62);
  overflow:hidden;
}
.omg-topic[hidden]{display:none !important}
.omg-topic > summary{
  list-style:none;cursor:pointer;
  padding:13px 15px;min-height:44px;
  display:flex;align-items:center;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.9rem;font-weight:700;color:#101A2D;
}
.omg-topic > summary::-webkit-details-marker{display:none}
.omg-topic > summary::after{
  content:"";margin-inline-start:auto;flex:0 0 8px;
  width:8px;height:8px;border-inline-end:2px solid #8A6420;border-block-end:2px solid #8A6420;
  transform:rotate(45deg);transition:transform .18s ease;
}
.omg-topic[open] > summary::after{transform:rotate(-135deg)}
.omg-topic > summary:hover{background:rgba(201,154,61,.1)}
.omg-topic > summary:focus-visible{outline:2px solid #B8862F;outline-offset:-2px}

.omg-txt{
  padding:0 15px 14px;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.85rem;line-height:1.6;color:#4A5468;
}
.omg-txt p{margin:0 0 9px}
.omg-txt ul{margin:0;padding-inline-start:19px;display:flex;flex-direction:column;gap:6px}
.omg-txt strong{color:#101A2D}
body.lang-ar .omg-topic > summary,body.lang-ar .omg-txt,body.lang-ar .omg-search{
  font-family:'Cairo',system-ui,sans-serif;
}

.omg-empty{padding:16px;border-radius:12px;background:rgba(16,26,45,.04);color:#5A6478;font-size:.86rem}

.omg-foot{padding:12px 18px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(16,26,45,.09)}
.omg-relaunch{
  width:100%;min-height:44px;padding:10px 14px;
  border:1px solid rgba(16,26,45,.14);border-radius:12px;
  background:rgba(16,26,45,.04);color:#3A4257;
  font-family:'Manrope',system-ui,sans-serif;font-size:.84rem;font-weight:700;cursor:pointer;
}
.omg-relaunch:hover{background:rgba(16,26,45,.09)}
.omg-relaunch:focus-visible{outline:2px solid #B8862F;outline-offset:2px}
body.lang-ar .omg-relaunch{font-family:'Cairo',system-ui,sans-serif}

@media (max-width: 520px){
  .omg-scrim{align-items:flex-end;justify-content:center}
  .omg-panel{
    width:100%;height:88dvh;
    border-radius:20px 20px 0 0;
    border-inline-start:0;border-top:1px solid rgba(201,154,61,.34);
    transform:translateY(100%);
  }
  [dir="rtl"] .omg-panel{transform:translateY(100%)}
  .omg-scrim.open .omg-panel{transform:none}
}

/* ── Coach mark ──────────────────────────────────────────────────────
   Small, anchored, never a full-screen layer. The document behind it
   stays usable, which is the whole point of not making it a modal. */
.omc{
  position:fixed;z-index:16500;
  width:min(286px, calc(100vw - 20px));
  padding:14px 15px 12px;
  border-radius:15px;
  background:linear-gradient(180deg,#FFFDF8,#F6F0E2);
  border:1px solid rgba(201,154,61,.42);
  box-shadow:0 18px 44px rgba(16,26,45,.28),0 2px 6px rgba(16,26,45,.14);
  opacity:0;transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease;
}
.omc.open{opacity:1;transform:none}
.omc-arrow{
  position:absolute;top:-6px;width:12px;height:12px;
  background:#FFFDF8;
  border-inline-start:1px solid rgba(201,154,61,.42);
  border-block-start:1px solid rgba(201,154,61,.42);
  transform:rotate(45deg);
}
.omc-t{
  display:block;margin-bottom:5px;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.06rem;font-weight:700;color:#101A2D;
}
.omc-b{
  margin:0 0 11px;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.82rem;line-height:1.5;color:#4A5468;
}
.omc-acts{display:flex;gap:7px;justify-content:flex-end}
.omc-acts button{
  min-height:40px;padding:8px 14px;
  border-radius:10px;cursor:pointer;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.81rem;font-weight:700;
}
.omc-go{
  border:1px solid #A87C2A;
  background:linear-gradient(180deg,#D8B15C,#B8862F);color:#fff;
}
.omc-go:hover{background:linear-gradient(180deg,#E2BE72,#C4923A)}
.omc-x{
  border:1px solid rgba(16,26,45,.14);
  background:rgba(16,26,45,.04);color:#3A4257;
}
.omc-x:hover{background:rgba(16,26,45,.09)}
.omc-acts button:focus-visible{outline:2px solid #B8862F;outline-offset:2px}
body.lang-ar .omc-t{font-family:'Cairo',system-ui,sans-serif;font-size:.98rem}
body.lang-ar .omc-b,body.lang-ar .omc-acts button{font-family:'Cairo',system-ui,sans-serif}

@media (prefers-reduced-motion: reduce){
  .omg-scrim,.omg-panel,.omc,.omg-topic > summary::after{transition:none !important}
  .omg-panel{transform:none !important}
}

@media print{
  .omg-scrim,.omc{display:none !important}
}