/* Sketchable — the phone layer.
 *
 * LINKED, never inlined: inlining put every class name in this file into every
 * page's HTML, which breaks any bare-substring assertion about a page's markup and
 * makes the document meaningfully larger for a screen most of these rules do not
 * apply to. `tests/src/design_test.ch` pins that it is linked, not inlined.
 *
 * Only the things the structural `#globalcss` block cannot express. The editor's
 * own reflow (rails to a bottom bar) is in there instead, because it is ordinary
 * `@media (max-width: ...)` and belongs with the rest of the design.
 */

/* Touch targets are gated on `pointer: coarse`, not on width: a narrow desktop
   window is still a mouse and keeps the compact targets, and a 900px tablet is
   still a finger and must not be left with 30px buttons. */
@media (pointer: coarse) {
    .sk-btn, .sk-tool {
        min-width: 44px;
        min-height: 44px;
    }
    .sk-btn-sm { min-height: 36px; }
    .sk-local-row { flex-wrap: wrap; }
    .sk-card-actions { flex-wrap: wrap; }
}

/* iOS auto-zooms any input under 16px on focus and never zooms back, so the floor
   is 16px rather than a `maximum-scale=1` on the viewport — that would lock out
   the people who need to zoom. */
@media (max-width: 820px) {
    .sk-input, .sk-select, .sk-toolbar input[type="text"], .sk-head input[type="text"] {
        font-size: 16px;
    }
    .sk-main { padding: 1rem 0.85rem 2.5rem; }
    .sk-grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.7rem; }
    .sk-local-date { width: 100%; }
}

/* Safe-area insets go in `padding-*`, never `margin-*`. The page frame centres with
   `margin: 0 auto`, and overriding `auto` hard-pins it to one side — so a notch in
   landscape costs the inset rather than the centring. */
@supports (padding: max(0px)) {
    @media (max-width: 820px) {
        .sk-main {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
        }
        .sk-rail {
            padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
            padding-left: max(0.6rem, env(safe-area-inset-left));
            padding-right: max(0.6rem, env(safe-area-inset-right));
        }
    }
}

/* No rubber-band scroll around the canvas: the drawing app pans with two fingers
   inside the stage, and a page-level bounce fights it. */
.sk-editor {
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}
.sk-stage, .sk-canvas {
    overscroll-behavior: none;
    touch-action: none;
}

/* A dialog that fills a phone screen, because a 30rem iframe with a keyboard open
   is unusable. */
@media (max-width: 560px) {
    .sk-dialog, .sk-text-dialog {
        width: 96vw;
        max-width: 96vw;
    }
    .sk-dialog-frame { height: 60vh; }
}