/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — UNIVERSAL CANVAS FIT
   Companion stylesheet to owlmark-canvas-fit.js.

   Everything here is scoped to body.om-fit, which the engine adds only
   once it has successfully found a stage, a wrapper and a page. If the
   script fails to load, not one rule below applies and each studio
   falls back to exactly the behaviour it had before.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The scroll box ──────────────────────────────────────────────────
   min-width:max-content was the root of two separate defects. It made
   the scroller reserve the paper's unscaled width at every zoom level,
   and in Planner Studio — whose #printable is an auto-width flex column
   — it triggered the browser's infinite-available-width intrinsic
   sizing pass and produced a canvas one million pixels across.
   The engine now supplies an exact pixel size instead. */
body.om-fit .canvas-page-wrap{
  min-width:0 !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 auto !important;      /* centres while it fits, collapses when it does not */
  display:block !important;
  position:relative;
  /* transform:scale() shrinks what is painted but not the layout box, so an
     80%-zoomed page still pushed its full unscaled width into the stage's
     scrollable area — a horizontal scrollbar appeared with nothing to scroll
     to. Clipping to the wrapper (which the engine sizes to exactly the
     painted size) removes the phantom overflow. The clip margin is generous
     so the paper's drop shadow survives; browsers without it clip at the
     edge, losing a little shadow but never any document. */
  overflow:clip;
  overflow-clip-margin:0;
}

/* Clipping exactly to the painted size would cut the paper's drop shadow off
   in the two studios where #printable is itself the sheet. The wrapper is the
   same size as the painted sheet, so the shadow simply moves out to it and
   looks identical. Studios that stack several sheets inside #printable mark
   nothing here — each of their pages keeps its own shadow, safely inside. */
body.om-fit .canvas-page-wrap[data-om-paper="self"]{
  border-radius:10px;
  box-shadow:0 26px 70px rgba(16,26,45,.32),0 0 0 1px rgba(201,154,61,.18);
}
body.om-fit .canvas-page-wrap[data-om-paper="self"] > #printable{
  box-shadow:none !important;
}

/* transform-origin must agree with the box the engine reserves, and the
   box is measured from the top left corner. */
body.om-fit #printable{
  transform-origin:top left !important;
  margin:0 !important;
}

/* Scrollbars have to be legible when a manual zoom overflows: this is
   the teacher's only signal that there is more paper to the right. */
body.om-fit .canvas-stage{
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(201,154,61,.62) rgba(16,26,45,.07);
  overscroll-behavior:contain;
}
body.om-fit .canvas-stage::-webkit-scrollbar{width:13px;height:13px}
body.om-fit .canvas-stage::-webkit-scrollbar-track{
  background:rgba(16,26,45,.06);border-radius:10px;
}
body.om-fit .canvas-stage::-webkit-scrollbar-thumb{
  border-radius:10px;
  background:linear-gradient(180deg,#D8B15C,#B8862F);
  border:3px solid transparent;background-clip:padding-box;
}
body.om-fit .canvas-stage::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#E2BE72,#C4923A);
  border:3px solid transparent;background-clip:padding-box;
}
body.om-fit .canvas-stage::-webkit-scrollbar-corner{background:transparent}

/* ── Zoom preset menu ────────────────────────────────────────────── */
.om-zoom-menu{
  position:fixed;z-index:17000;min-width:186px;
  padding:7px;border-radius:15px;
  background:linear-gradient(180deg,#FFFDF8,#F6F0E2);
  border:1px solid rgba(201,154,61,.34);
  box-shadow:0 20px 48px rgba(16,26,45,.26),0 2px 6px rgba(16,26,45,.12);
  font-family:'Manrope',system-ui,sans-serif;
}
.om-zm-item{
  display:flex;align-items:center;gap:9px;width:100%;
  min-height:40px;padding:8px 11px;
  border:0;border-radius:10px;background:transparent;
  font:inherit;font-size:.86rem;font-weight:600;color:#101A2D;
  text-align:start;cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.om-zm-item:hover{background:rgba(201,154,61,.14)}
.om-zm-item.current{color:#8A6420}
.om-zm-item:focus-visible{
  outline:2px solid #B8862F;outline-offset:-2px;background:rgba(201,154,61,.16);
}
.om-zm-tick{
  width:14px;flex:0 0 14px;text-align:center;
  color:#B8862F;font-weight:800;
}
.om-zm-sep{
  margin:5px 9px;border:0;border-top:1px solid rgba(16,26,45,.1);
}
body.lang-ar .om-zoom-menu{font-family:'Cairo',system-ui,sans-serif}

@media (prefers-reduced-motion: reduce){
  .om-zm-item{transition:none}
}

/* ── Print ───────────────────────────────────────────────────────────
   The engine's inline width and height on the wrapper describe a screen
   scroll box. On paper they would crop the document, so they are
   overridden here rather than being cleared in JavaScript — which would
   leave the screen broken if a print dialog were cancelled. */
@media print{
  body.om-fit .canvas-page-wrap{
    width:auto !important;height:auto !important;
    min-width:0 !important;max-width:none !important;
    margin:0 !important;padding:0 !important;
    display:block !important;
    overflow:visible !important;overflow-clip-margin:0 !important;
  }
  body.om-fit #printable{
    transform:none !important;transform-origin:top left !important;
    margin:0 !important;
    /* #printable carries transition:transform in some studios. Printing while
       that transition is still running snapshots a part-scaled page, so it is
       cancelled outright on paper. */
    transition:none !important;
  }
  body.om-fit .canvas-page-wrap[data-om-paper="self"]{
    border-radius:0 !important;box-shadow:none !important;
  }
}