/* The working-area gate: who may open a dashboard or a demo.
 *
 * Dashboards and demos are work surfaces - a layout canvas, an operator
 * timeline, a BOM table. Everything else in the product is a page you read or
 * a form you fill, and must work on a phone. Only these five pages carry this
 * file: slp/dashboard, slp/demo, runway/dashboard, runway/demo, admin.
 *
 * THE RULE
 *
 *     width >= 1024px  AND  (not a touch device  OR  landscape)
 *
 * The width half refuses phones in both orientations - a phone turned sideways
 * is 844px at most - and any desktop window narrower than 1024.
 *
 * The orientation half is why it is not width alone: an iPad Pro in PORTRAIT is
 * 1024px wide, so a width-only rule admits it. It is restricted to coarse
 * pointers because a portrait DESKTOP monitor is a legitimate 1080x1920
 * workstation, not a rotation problem.
 *
 *   device                    portrait            landscape
 *   iPhone 15        393x852  refused    852x393  refused
 *   iPhone Pro Max   430x932  refused    932x430  refused
 *   iPad mini        744x1133 rotate     1133x744 WORKS
 *   iPad 10.2        810x1080 rotate     1080x810 WORKS
 *   iPad Air 11      820x1180 rotate     1180x820 WORKS
 *   Galaxy Tab       800x1280 rotate     1280x800 WORKS
 *   iPad Pro 12.9   1024x1366 rotate     1366x1024 WORKS
 *   portrait monitor 1080x1920 WORKS (not a touch device)
 *   desktop window    900 wide refused
 *
 * WHAT IT REPLACED
 *
 * Three separate mechanisms, all at max-width:767px, which is a phone
 * threshold rather than a work-surface one:
 *
 *   slp-responsive.js  enforceDevice(), built the overlay in JavaScript
 *   runway-base.css    one copy of the rule
 *   runway-dashboard.css  a second copy of the same rule
 *
 * Measured against that, before this file existed: a phone in landscape (844px)
 * opened both dashboards and both demos; every tablet in portrait above 767px
 * did too; and SLP's demo had no gate at any size, because demo.html was never
 * added to the JavaScript's restricted list. iPad mini portrait was refused
 * only by the accident of being 744px wide.
 *
 * It is CSS rather than JavaScript on purpose. It applies before any script
 * runs, it cannot be left in the wrong state by a script that threw, and it
 * follows a rotation with no resize listener and no reflow timing to get wrong.
 *
 * It is a presentation gate, not an access control. The page behind it still
 * loads and still authenticates; what a person may open is decided by RLS and
 * the entitlement checks, which do not care what size the screen is.
 */

.kk-screen-gate { display: none }

/* Two messages, because the remedy is different. A tablet that would work in
   landscape is told to turn; anything that would not is told it needs a bigger
   screen. min-height:1024px is the test for "rotating this would be enough",
   since rotating swaps the axes. */
.kk-screen-gate .gate-rotate,
.kk-screen-gate .gate-small { display: none }

@media (max-width: 1023.98px), (pointer: coarse) and (orientation: portrait) {
  /* Everything except the gate. Stated this way so it holds on five pages with
     five different root elements, rather than naming a wrapper per page. */
  body > *:not(.kk-screen-gate) { display: none !important }

  .kk-screen-gate {
    display: flex; position: fixed; inset: 0; z-index: 2147483647;
    align-items: center; justify-content: center; padding: 24px;
    background: var(--kk-gate-bg, #f4f7f9);
    font-family: Inter, "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    /* The gate is the whole screen, so it owns the scrollbar. */
    overflow: auto;
  }
  .kk-screen-gate .gate-small { display: block }
  .kk-screen-gate .gate-card {
    width: min(420px, 100%); box-sizing: border-box;
    padding: 30px 26px 26px; text-align: center;
    background: var(--kk-gate-card, #fff);
    border: 1px solid var(--kk-gate-line, #dbe4ea);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(16, 40, 58, .14);
  }
  .kk-screen-gate .gate-mark {
    display: block; margin: 0 auto 16px; width: 46px; height: 46px;
    color: var(--kk-gate-accent, #3d7fb5);
  }
  .kk-screen-gate h1 {
    margin: 0 0 8px; font-size: 20px; line-height: 1.3; font-weight: 800;
    color: var(--kk-gate-text, #17354d);
  }
  .kk-screen-gate p {
    margin: 0; font-size: 13px; line-height: 1.6;
    color: var(--kk-gate-muted, #637a89);
  }
  .kk-screen-gate .gate-size {
    display: block; margin-top: 14px; font-size: 11px; letter-spacing: .04em;
    text-transform: uppercase; font-weight: 700;
    color: var(--kk-gate-muted, #637a89); opacity: .75;
  }
  .kk-screen-gate .gate-back {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
    padding: 11px 16px; border-radius: 10px; text-decoration: none;
    font-size: 12px; font-weight: 800;
    background: var(--kk-gate-accent, #3d7fb5); color: #fff;
  }
  .kk-screen-gate .gate-back:focus-visible {
    outline: 2px solid var(--kk-gate-text, #17354d); outline-offset: 2px;
  }
}

/* A touch device held upright whose long edge WOULD be wide enough: the fix is
   a quarter turn, so say that instead of telling someone to find another
   machine. */
@media (pointer: coarse) and (orientation: portrait) and (min-height: 1024px) {
  .kk-screen-gate .gate-small { display: none }
  .kk-screen-gate .gate-rotate { display: block }
}

/* A short viewport - a phone in landscape is 390px tall - would otherwise put
   the card's own content into a scroll. */
@media (max-height: 460px) {
  .kk-screen-gate { align-items: flex-start; padding: 16px }
  .kk-screen-gate .gate-card { padding: 20px 18px 18px }
  .kk-screen-gate .gate-mark { width: 32px; height: 32px; margin-bottom: 10px }
  .kk-screen-gate h1 { font-size: 17px }
}