/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — MOBILE WORKSPACE
   Companion stylesheet to owlmark-mobile.js.

   Everything is scoped to body.om-mobile, which the script adds only at
   or below 760px and removes again on the way back up. Desktop and
   tablet-landscape layouts are untouched by this file.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --om-bar-h:60px;
  --om-top-h:52px;
  --om-safe-b:env(safe-area-inset-bottom, 0px);
  --om-safe-t:env(safe-area-inset-top, 0px);
}

/* ── Only ever visible on the phone layout ───────────────────────── */
#omMobileTop,#omMobileBar,#omSheet,#omSheetScrim{display:none}
.om-moved-home{display:none !important}

/* The scrim and the sheet are laid out with display:block/flex below, and a
   bare display rule outranks the hidden attribute's user-agent style. A
   closed scrim would then go on covering the screen invisibly and swallow
   every tap, including the ones on the bottom bar. hidden must win. */
#omSheet[hidden],#omSheetScrim[hidden],.oms-host[hidden]{display:none !important}

body.om-mobile #omMobileTop,
body.om-mobile #omMobileBar{display:flex}

/* The desktop header holds nothing on mobile once its two control groups
   have moved into the More sheet, so it stops taking up room. It is not
   removed — widening the window puts everything back into it. */
body.om-mobile #studioHeader{display:none !important}

/* ── Compact top strip ───────────────────────────────────────────── */
body.om-mobile #omMobileTop{
  position:sticky;top:0;z-index:900;
  align-items:center;gap:10px;
  height:var(--om-top-h);
  padding:0 12px;padding-top:var(--om-safe-t);
  background:linear-gradient(180deg,#16233C,#101A2D);
  border-bottom:1px solid rgba(201,154,61,.28);
  box-shadow:0 2px 12px rgba(16,26,45,.22);
}
.omt-brand{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-inline-start:-8px;
  flex:0 0 44px;border-radius:12px;text-decoration:none;
}
.omt-brand img{width:26px;height:26px;object-fit:contain}
.omt-brand:focus-visible{outline:2px solid #D8B15C;outline-offset:-3px}

.omt-name{
  flex:1 1 auto;min-width:0;min-height:44px;
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding:4px 10px;border:0;border-radius:12px;
  background:rgba(255,255,255,.06);
  font-family:inherit;text-align:start;cursor:pointer;
}
.omt-name:focus-visible{outline:2px solid #D8B15C;outline-offset:-2px}
.omt-name-text{
  font-size:.9rem;font-weight:700;color:#F6F0E2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.omt-name-text.is-placeholder{color:rgba(246,240,226,.62);font-weight:600;font-style:italic}
.omt-status{
  font-size:.66rem;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:rgba(246,240,226,.62);
}
.omt-status.ok{color:#9FD2A9}
.omt-status.warn{color:#F0B4A2}
.omt-status:empty{display:none}

/* ── Sticky bottom task bar ──────────────────────────────────────── */
body.om-mobile #omMobileBar{
  /* Above the sheet on purpose. The bar is how a teacher moves between
     Edit, Preview and Export; if an open sheet covered it, the only way
     out of the sheet would be to close it first. */
  position:fixed;left:0;right:0;bottom:0;z-index:16800;
  align-items:stretch;
  height:calc(var(--om-bar-h) + var(--om-safe-b));
  padding-bottom:var(--om-safe-b);
  background:linear-gradient(180deg,#16233C,#101A2D);
  border-top:1px solid rgba(201,154,61,.3);
  box-shadow:0 -6px 22px rgba(16,26,45,.3);
}
.omb-item{
  flex:1 1 0;min-width:0;min-height:44px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:transparent;cursor:pointer;
  font-family:inherit;color:rgba(246,240,226,.7);
  padding:6px 2px;
  transition:color .16s ease,background .16s ease;
}
.omb-item .omb-ic{display:flex;width:22px;height:22px}
.omb-item .omb-ic svg{width:100%;height:100%}
.omb-lb{font-size:.66rem;font-weight:700;letter-spacing:.02em}
.omb-item.current{color:#E4C67E}
.omb-item.current .omb-ic{
  filter:drop-shadow(0 0 6px rgba(201,154,61,.4));
}
.omb-item:focus-visible{outline:2px solid #D8B15C;outline-offset:-3px;border-radius:10px}
body.lang-ar .omb-lb{letter-spacing:0}

/* ── Bottom sheet ────────────────────────────────────────────────── */
body.om-mobile #omSheetScrim{
  display:block;position:fixed;inset:0;z-index:16600;
  background:rgba(11,18,32,.5);
  opacity:0;transition:opacity .22s ease;
}
body.om-mobile #omSheetScrim.open{opacity:1}

body.om-mobile #omSheet{
  display:flex;flex-direction:column;
  position:fixed;left:0;right:0;z-index:16700;
  /* rests on top of the task bar, never over it */
  bottom:calc(var(--om-bar-h) + var(--om-safe-b));
  max-height:min(78dvh, 100dvh - var(--om-top-h) - var(--om-bar-h) - var(--om-safe-b) - 12px);
  background:linear-gradient(180deg,#FFFDF8,#F6F0E2);
  border-top:1px solid rgba(201,154,61,.34);
  border-radius:22px 22px 0 0;
  box-shadow:0 -18px 46px rgba(16,26,45,.32);
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.22,.72,.3,1);
}
body.om-mobile #omSheet.open{transform:translateY(0)}
/* the scrim must not dim the bar the teacher is about to use */
body.om-mobile #omSheetScrim{bottom:calc(var(--om-bar-h) + var(--om-safe-b))}

.oms-grip{
  width:42px;height:4px;border-radius:99px;margin:9px auto 2px;
  background:rgba(16,26,45,.18);flex:0 0 auto;
}
.oms-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 14px 10px;flex:0 0 auto;
  border-bottom:1px solid rgba(16,26,45,.09);
}
.oms-head h2{
  margin:0;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.28rem;font-weight:700;color:#101A2D;
}
body.lang-ar .oms-head h2{font-family:'Cairo',sans-serif;font-size:1.1rem}
.oms-close{
  width:44px;height:44px;flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(16,26,45,.12);border-radius:12px;
  background:rgba(255,255,255,.7);color:#101A2D;cursor:pointer;
}
.oms-close svg{width:19px;height:19px}
.oms-close:focus-visible{outline:2px solid #B8862F;outline-offset:2px}

.oms-body{flex:1 1 auto;overflow:hidden;display:flex;min-height:0}
.oms-host{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.oms-host[hidden]{display:none}
.oms-empty{
  margin:0;padding:26px 20px;text-align:center;
  color:#5C6478;font-size:.9rem;line-height:1.55;
}

/* The studio's own panel becomes the sheet's content: it no longer needs
   its card frame, its sticky offset or its viewport-height ceiling. */
body.om-mobile #omSheet #panel{
  position:static !important;top:auto !important;
  max-height:none !important;height:100%;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  background:transparent !important;
}
body.om-mobile #omSheet .panel-view{max-height:none !important;padding:14px}
body.om-mobile #omSheet #panelTabs{position:sticky;top:0;z-index:2}

/* Header groups look like a stacked menu once they are in the sheet. */
body.om-mobile #omHost-more{padding:12px 14px 20px}
body.om-mobile #omHost-more .hd-center,
body.om-mobile #omHost-more .hd-right{
  display:flex !important;flex-wrap:wrap;gap:8px;align-items:center;
  width:100%;margin:0 0 12px;
}
body.om-mobile #omHost-more .hd-btn{
  min-height:44px;flex:1 1 calc(50% - 8px);justify-content:flex-start;
}
body.om-mobile #omHost-more .hd-btn.icon{flex:0 0 44px;min-width:44px;justify-content:center}
body.om-mobile #omHost-more .hd-btn span{display:inline !important}
body.om-mobile #omHost-more #saveName{
  flex:1 1 100%;min-height:44px;order:-1;
}
body.om-mobile #omHost-more .hd-sep{display:none}
body.om-mobile #omHost-more .hd-pills{flex:1 1 100%}
body.om-mobile #omHost-more .hd-pills button{min-height:40px;flex:1 1 0}
body.om-mobile #omHost-more .hd-brand-text{display:none}

body.om-mobile #omHost-export{padding:12px 14px 20px}
body.om-mobile #omHost-export .p-card{
  border:0;box-shadow:none;background:transparent;padding:0;
}
body.om-mobile #omHost-export .ok-btn{min-height:46px}

/* ── The document is the hero: give it the whole screen ──────────── */
body.om-mobile #workbench{
  display:block !important;padding:8px 8px 0 !important;gap:0 !important;
}
body.om-mobile #canvasArea{order:0 !important;display:block !important}
body.om-mobile .canvas-stage{
  min-height:calc(100dvh - var(--om-top-h) - var(--om-bar-h) - var(--om-safe-b) - 96px) !important;
  padding:12px 8px 18px !important;
}
body.om-mobile.view-preview .canvas-stage{
  min-height:calc(100dvh - var(--om-top-h) - var(--om-bar-h) - var(--om-safe-b) - 52px) !important;
}
/* room for the fixed bar, so the last of the page is never trapped under it */
body.om-mobile{padding-bottom:calc(var(--om-bar-h) + var(--om-safe-b)) !important}
body.om-mobile.om-sheet-open{overflow:hidden}

/* The canvas toolbar stays, but as a single scrollable strip rather than
   a wrapping block that pushes the paper off screen. On a 390px phone the
   strip is a little wider than the screen — the "Edit Mode" status badge
   (and, on the timetable, the Density button) sit just past the right
   edge. A hidden scrollbar meant that was invisible: nothing told the
   teacher the strip scrolls. The mask-image below fades the right edge
   whenever content overflows, which is the standard "there is more this
   way" cue — the strip still scrolls, but now it looks scrollable. The
   fade is drawn by the browser's compositor (mask), so it costs nothing
   and never intercepts a tap. */
body.om-mobile .canvas-toolbar{
  display:flex !important;flex-wrap:nowrap;overflow-x:auto;
  gap:6px;padding:6px 8px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
}
body.om-mobile .canvas-toolbar::-webkit-scrollbar{display:none}
body.om-mobile .canvas-toolbar .ct-group{flex:0 0 auto}
/* The status badge is a label, not a control; letting it shrink first
   keeps the real buttons (Grid, Density) on-screen longer. */
body.om-mobile .canvas-toolbar .mode-badge{
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.om-mobile .ct-btn{min-height:38px;min-width:38px}

/* Studio floating furniture must clear the bar. */
body.om-mobile #okStudioNav,
body.om-mobile .floating-toast,
body.om-mobile #printBar{
  bottom:calc(var(--om-bar-h) + var(--om-safe-b) + 12px) !important;
}

@media (prefers-reduced-motion: reduce){
  body.om-mobile #omSheet,
  body.om-mobile #omSheetScrim{transition:none}
  .omb-item{transition:none}
}

/* ── Print ───────────────────────────────────────────────────────── */
@media print{
  #omMobileTop,#omMobileBar,#omSheet,#omSheetScrim{display:none !important}
  body.om-mobile{padding-bottom:0 !important}
  /* Content parked in a sheet must not be printed as part of the paper. */
  body.om-mobile #omSheetBody{display:none !important}
}