/* ══════════════════════════════════════════════════════════════════════
   OWLMARK CERTIFICATE STUDIO — RESPONSIVE
   By Mourad Mekki

   The app was a two-column flex: a fixed ~322px sidebar and the workspace.
   Below about 1100px the sidebar ate the canvas; on a phone it was a
   crushed, horizontally-scrolling desktop.

   THE STRATEGY

     Desktop   ≥ 1181px   Unchanged. Not one rule touches it.
     Tablet    768–1180   The sidebar becomes an off-canvas drawer. The
                          certificate gets the full width. Direct editing
                          is preserved — the drawer slides away, it does
                          not take the canvas with it.
     Phone     ≤ 767px    A companion: certificate on top, controls in the
                          drawer, essential actions in a bottom bar. Touch
                          targets ≥ 44px throughout.

   EVERY rule below is scoped to `@media screen`. Print is a separate
   medium and must not inherit a single line of this — a phone-shaped
   certificate would be a disaster on paper.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   TABLET AND BELOW — the sidebar goes off-canvas
   ══════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1180px) {

  /* No horizontal scrollbar. Ever. This is the single most visible
     symptom of a broken responsive layout. */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* The sidebar leaves the flow and becomes a drawer. It keeps its own
     styling, its own scroll, and all of its contents — nothing inside it
     is rebuilt or moved. */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(360px, 88vw) !important;
    min-width: 0 !important;
    z-index: 9500;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.2, .8, .3, 1);
    box-shadow: 12px 0 40px rgba(0, 0, 0, .38);
    overscroll-behavior: contain;
  }
  body.om-drawer-open .sidebar { transform: translateX(0); }

  /* The workspace takes the whole width the sidebar gave up. */
  .main { width: 100%; }

  /* Backdrop — tapping it closes the drawer. */
  .om-backdrop {
    position: fixed; inset: 0;
    z-index: 9400;
    background: rgba(10, 16, 28, .5);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  body.om-drawer-open .om-backdrop { opacity: 1; pointer-events: auto; }

  /* The drawer toggle. Hidden on desktop, where there is no drawer. */
  .om-drawer-btn { display: inline-flex !important; }

  /* Dialogs must fit the screen, not overflow it. */
  .om-dlg, .om-help {
    max-height: 88vh;
    overflow-y: auto;
  }
  .om-help { width: min(400px, 92vw); }

  /* The toolbar must scroll rather than wrap into a tangle. */
  .main-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .main-toolbar::-webkit-scrollbar { height: 3px; }
  .main-toolbar::-webkit-scrollbar-thumb {
    background: rgba(201, 151, 61, .3); border-radius: 3px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PHONE — the companion
   ══════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {

  .sidebar { width: 100vw !important; }

  /* The certificate is the point of the screen. Give it the top, and
     scale it to fit rather than letting it overflow. */
  .main {
    height: auto;
    min-height: 100vh;
    padding-bottom: 76px;              /* room for the bottom bar */
    overflow: visible;
  }
  .sheet-wrap {
    transform: scale(var(--om-fit, 1)) !important;
    transform-origin: top center !important;
    margin: 0 auto !important;
  }
  /* The scaled sheet still reserves its unscaled height in the flow, which
     leaves a large gap beneath it. Collapse that. */
  #sheetWrap { height: var(--om-fit-h, auto); }

  /* Stage tabs scroll horizontally rather than compressing to nothing. */
  .sb-tabs, .stage-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .sb-tabs::-webkit-scrollbar, .stage-tabs::-webkit-scrollbar { display: none; }
  .sb-tabs > *, .stage-tabs > * { flex: none; }

  /* ── touch targets ──
     44px is the floor. Anything smaller is a miss, not a tap. */
  .tb-btn, .om-btn, .om-chip, .sb-tab, .stage-tab,
  button, .pg-thumb, input[type="file"] + label {
    min-height: 44px;
  }
  .om-chip { min-height: 38px; padding: 0 12px; }
  .om-pfav, .om-fav { width: 38px; height: 38px; }   /* was 22-24px */

  /* Inputs must not zoom the page on focus in Safari — that needs 16px. */
  input, select, textarea { font-size: 16px !important; }

  /* Dialogs become sheets: full width, anchored to the bottom, where a
     thumb can actually reach the buttons. */
  .om-dlg-scrim { padding: 0; align-items: flex-end; }
  .om-dlg {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .om-dlg-actions { flex-direction: column-reverse; }
  .om-dlg-actions .om-btn { width: 100%; }

  .om-help { width: 100vw; border-left: 0; }

  /* Gallery: two columns, comfortably tappable. */
  .pg-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── the bottom bar — the four things you actually need ── */
  .om-mobile-bar {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 9300;
    align-items: stretch;
    gap: 1px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--panel, #0f1c2e);
    border-top: 1px solid rgba(201, 151, 61, .22);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .28);
  }
  .om-mobile-bar button {
    flex: 1;
    min-height: 58px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    border: 0; background: transparent;
    color: rgba(240, 232, 213, .78);
    font-family: 'Cinzel', serif;
    font-size: 9.5px; letter-spacing: .6px;
    cursor: pointer;
  }
  .om-mobile-bar button span:first-child { font-size: 16px; }
  .om-mobile-bar button:active { background: rgba(201, 151, 61, .12); }
  .om-mobile-bar button:focus-visible {
    outline: 2px solid #c9973d; outline-offset: -2px;
  }
}

/* The bottom bar and drawer button do not exist above their breakpoints. */
.om-mobile-bar { display: none; }
.om-drawer-btn { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   THE PHONE NOTICE — shown once, never a wall
   ══════════════════════════════════════════════════════════════════════ */
.om-phone-note .om-dlg { text-align: center; }
.om-phone-note .om-phone-owl {
  width: 54px; height: 54px; margin: 0 auto 12px;
  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: 24px;
}
.om-phone-note ul {
  list-style: none; margin: 0 0 16px; padding: 0;
  text-align: left;
}
.om-phone-note li {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 0;
  font-size: 12.6px; line-height: 1.55;
  color: var(--ok-ink-soft, #6f6a85);
  border-bottom: 1px solid var(--ok-line, #e6e3f2);
}
.om-phone-note li:last-child { border-bottom: 0; }
.om-phone-note li b { color: var(--ok-ink, #2b2740); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   PRINT — none of the above may follow the certificate onto paper.
   Stated explicitly rather than relied upon.
   ══════════════════════════════════════════════════════════════════════ */
@media print {
  .om-backdrop, .om-mobile-bar, .om-drawer-btn { display: none !important; }
  .sidebar { position: static !important; transform: none !important; }
  .sheet-wrap { transform: none !important; }
  #sheetWrap { height: auto !important; }
  html, body { overflow: visible !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .om-backdrop { transition: none !important; }
}