/* John Galactic · Rev B. Phone UI only; artwork and desktop keep their own styles. */
.mobile-top-control { display: none; }
@media screen and (max-width: 640px) {
  :root {
    font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    --ios-bg: #D9EEE8; --ios-panel: #C6E3DB; --ios-text: #101413;
    --ios-muted: #5E6A66; --ios-info: #1F3260; --ios-line: #5E6A66;
    --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom);
    /* Insets have one source, also used by screenshot/geometry hooks. */
    --ios-tab-height: 56px;
    --ios-clear-bottom: calc(var(--ios-tab-height) + 8px + var(--sab) + 8px);
    --ios-clear-top: calc(var(--sat) + 8px + 44px + 8px);
    /* Mint 2 / Panel glass, Ash / Steel hairline, Black shadow. */
    --ios-glass: #C6E3DBB8; --ios-glass-line: #5E6A6640; --ios-shadow: #0000001F;
    --ios-vh: 100dvh; --ios-top: 0px; --ios-bottom: 0px;
    --on-black: var(--ios-text); --ash-on-black: var(--ios-muted);
    --blue-on-black: var(--ios-info); --panel: var(--ios-panel); --raised: var(--ios-panel);
  }
  :root[data-mobile-theme="dark"] { --ios-bg: #000000; --ios-panel: #111414; --ios-text: #E3F1EC; --ios-muted: #86908D; --ios-info: #8FA8DA; --ios-line: #2E3034; --ios-glass: #111414B8; --ios-glass-line: #2E3034CC; --ios-shadow: #00000066; }
  html, body { height: 100dvh; min-height: 0; padding: 0; margin: 0; background: var(--ios-bg); color: var(--ios-text); font: 1rem/1.6 var(--sans); }
  :focus-visible { outline-color: var(--ios-info); }
  /* The document cannot scroll. Absolute positioning fills the viewport without
     a fixed shell's stacking context trapping chrome beneath body-level modals. */
  .app-shell { position: absolute; top: var(--ios-top); bottom: auto; left: 0; height: var(--ios-vh); min-height: 0; padding: 0; grid-template-rows: minmax(0, 1fr); }
  .top-bar { position: fixed; top: calc(var(--ios-top) + var(--sat) + 8px); left: calc(16px + env(safe-area-inset-left)); right: calc(16px + env(safe-area-inset-right)); height: 44px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 12px; padding: 0; background: transparent; border: 0; z-index: 650; pointer-events: none; }
  .top-bar .top-left, .top-bar .top-center, .top-bar .top-right,
  .mobile-page-picker, .left-rail { display: none; }
  .ios-glass { background: var(--ios-glass); border: 1px solid var(--ios-glass-line); box-shadow: 0 4px 16px var(--ios-shadow); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
  .mobile-top-control { display: block; height: 44px; min-width: 44px; padding: 0; border-radius: 999px; color: var(--ios-text); pointer-events: auto; font: 600 24px/1 var(--sans); }
  .mobile-back { font-size: 36px; font-weight: 400; }
  .mobile-title { justify-self: center; width: 100%; max-width: 240px; min-width: 0; padding: 0 16px; font: 600 18px/1.2 var(--sans); }
  .mobile-title span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  button, input, select, textarea, [role="button"] { min-height: 44px; min-width: 44px; }
  input, select, textarea { font-size: max(1rem, 16px) !important; }
  input[type="checkbox"], input[type="radio"] { appearance: auto; margin: 0; }
  .modal .primary { background: #E8501A; border-color: #E8501A; color: #FFFFFF; font-weight: 700; }
  .studio-body, .studio-body.drawer-closed { height: 100%; min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); grid-template-areas: "canvas"; }
  .canvas-area { grid-area: canvas; grid-template-rows: minmax(0, 1fr); background: var(--ios-bg); }
  .mobile-document, .mobile-page-info, .mobile-canvas-hint { display: none; }
  /* Keep chrome appearance from recoloring the user's artwork or previews. */
  .artboard { --on-black: #E3F1EC; --ash-on-black: #86908D; --blue-on-black: #8FA8DA; --panel: #111414; --raised: #1C2021; }
  /* The viewport reaches both edges; only its scroll content reserves chrome space.
     A fixed gradient mask lets content fade as it passes under the top controls. */
  .canvas-viewport { background: var(--ios-bg); padding: var(--ios-clear-top) 0 var(--ios-clear-bottom); scroll-padding-top: var(--ios-clear-top); scroll-padding-bottom: var(--ios-clear-bottom); -webkit-mask-image: linear-gradient(to bottom, transparent, #000000 var(--ios-clear-top)); mask-image: linear-gradient(to bottom, transparent, #000000 var(--ios-clear-top)); }
  .pages { min-height: 100%; padding: 0; gap: 0; justify-content: flex-start; }
  .page-wrapper:not(.active), .page-bar, #addPageEndBtn { display: none; }
  .artboard.studio, .page-wrapper.active .artboard.studio { box-shadow: 0 0 0 1px var(--ios-line); }
  .mobile-tools { position: fixed; left: calc(16px + env(safe-area-inset-left)); right: calc(16px + env(safe-area-inset-right)); bottom: calc(var(--ios-bottom) + var(--sab) + 8px); display: flex; align-items: center; height: var(--ios-tab-height); min-height: 0; padding: 0 4px; border-radius: 999px; z-index: 650; }
  .mobile-tools button { flex: 1; min-width: 44px; height: 48px; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ios-muted); font: .6875rem/1.2 var(--sans); }
  .mobile-tools button > span { display: block; font: 24px/26px var(--sans); }
  .mobile-tools button[aria-pressed="true"] { color: var(--ios-info); background: var(--ios-panel); }
  .ios-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 610; background: #000000; opacity: .45; }
  .left-drawer, .mobile-inspector, .ios-sheet { position: fixed; inset: auto 0 calc(var(--ios-bottom) + var(--ios-clear-bottom)); width: auto; height: calc(var(--ios-vh) * .5); max-height: calc(var(--ios-vh) - var(--ios-clear-top) - var(--ios-clear-bottom)); z-index: 620; background: var(--ios-bg); color: var(--ios-text); border: 1px solid var(--ios-line); border-radius: 8px 8px 0 0; box-shadow: none; overflow: hidden; padding: 0 env(safe-area-inset-right) .5rem env(safe-area-inset-left); transition: height .22s cubic-bezier(.16,1,.3,1); }
  .left-drawer[data-snap="2"], .mobile-inspector[data-snap="2"], .ios-sheet[data-snap="2"] { height: calc(var(--ios-vh) - var(--ios-clear-top) - var(--ios-clear-bottom)); }
  .mobile-inspector:not([hidden]), .ios-sheet:not([hidden]) { display: flex; flex-direction: column; }
  .mobile-inspector[hidden], .ios-sheet[hidden], .ios-backdrop[hidden] { display: none; }
  .drawer-header, .sheet-header { position: relative; display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; min-height: 3.5rem; flex-shrink: 0; border-bottom: 1px solid var(--ios-line); }
  .drawer-header::before, .drawer-header h3 { display: none; }
  .sheet-snap { position: relative; touch-action: none; background: transparent; color: var(--ios-text); border: 0; padding: 1rem .5rem .25rem; font-size: 1rem; font-weight: 600; }
  .sheet-header .sheet-snap { flex: 1; }
  .sheet-grabber, .mobile-library-snap::before { content: ""; position: absolute; top: .25rem; left: 50%; transform: translateX(-50%); width: 2rem; height: .25rem; border-radius: 4px; background: var(--ios-muted); }
  .mobile-library-snap { display: block; width: 44px; }
  #mobileLibrarySelect { display: block; flex: 1; min-width: 0; }
  .sheet-header > button:not(.sheet-snap), .drawer-header > button:not(.sheet-snap), #mobileLibrarySelect { padding: .5rem; background: var(--ios-bg); color: var(--ios-info); border: 1px solid var(--ios-line); border-radius: 4px; }
  .drawer-content, .ios-sheet-content, .mobile-inspector #contextBar { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; flex: 1; padding: 1rem; gap: .75rem; }
  .ios-sheet-content { display: flex; flex-direction: column; }
  .ios-sheet-content button { padding: .625rem .75rem; text-align: left; border: 1px solid var(--ios-line); border-radius: 4px; color: var(--ios-text); background: var(--ios-panel); font-size: 1rem; }
  .ios-sheet-content button[aria-current="page"] { border-color: var(--ios-info); color: var(--ios-info); }
  .ios-sheet-content label { display: grid; gap: .375rem; }
  .ios-sheet-content input, .ios-sheet-content select { padding: .625rem; border: 1px solid var(--ios-line); background: var(--ios-bg); }
  .left-drawer, .mobile-inspector, .mobile-inspector #contextBar { --panel: var(--ios-panel); --raised: var(--ios-panel); --on-black: var(--ios-text); --ash-on-black: var(--ios-muted); --blue-on-black: var(--ios-info); }
  .drawer-content .drawer-note { color: var(--ios-muted); }
  .drawer-content .tpl-card, .drawer-content .comp-card, .drawer-content .elem-tile, .drawer-content .layer-row, .drawer-content .empty-note { background: var(--ios-panel); color: var(--ios-text); border-color: var(--ios-line); box-shadow: none; }
  .drawer-content .tpl-name, .drawer-content .elem-tile { font-size: .875rem; }
  .drawer-content .tpl-sub, .ctx-label { font-size: .6875rem; }
  .drawer-content input, .drawer-content select, .mobile-inspector .ctx-input, .mobile-inspector .ctx-select { background: var(--ios-bg); color: var(--ios-text); border-color: var(--ios-line); max-width: 100%; }
  .drawer-content .tb-btn, .mobile-inspector .tb-btn, .mobile-inspector .icon-btn { background: var(--ios-panel); color: var(--ios-info); border-color: var(--ios-line); font-size: .875rem; }
  .drawer-content .tb-btn.primary { background: var(--ios-text); color: var(--ios-bg); border-color: var(--ios-text); }
  .drawer-content .la { flex-wrap: wrap; }
  .drawer-content .la button { width: 44px; height: 44px; }
  .mobile-inspector #contextBar { display: flex; flex-direction: column; align-items: stretch; white-space: normal; background: var(--ios-bg); border: 0; color: var(--ios-text); }
  .mobile-inspector .ctx-group { flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; }
  .mobile-inspector .seg button { color: var(--ios-info); font-size: .875rem; }
  .mobile-inspector .seg button[aria-pressed="true"] { background: var(--ios-text); color: var(--ios-bg); }
  .mobile-inspector .color-dot { width: 44px; height: 44px; }
  .float-pill { left: max(.75rem, env(safe-area-inset-left)) !important; right: max(.75rem, env(safe-area-inset-right)); top: auto !important; bottom: calc(var(--ios-clear-bottom) + 8px); width: auto; padding: .25rem; border-radius: 4px; background: var(--ios-bg); box-shadow: none; justify-content: space-around; }
  .float-pill button { color: var(--ios-info); padding: .25rem; font-size: .8125rem; }
  #fpUpBtn, #fpDownBtn { display: none; }
  .studio-body:not(.drawer-closed) .float-pill, .studio-body:has(.mobile-inspector:not([hidden])) .float-pill { visibility: hidden; }
  .modal-back { top: var(--ios-top); bottom: var(--ios-bottom); padding: 0; background: var(--ios-bg); align-items: stretch; }
  .modal, .modal.wide { width: 100%; height: 100%; max-height: 100%; border: 0; border-radius: 0; box-shadow: none; background: var(--ios-bg); padding: var(--ios-clear-top) 0 var(--ios-clear-bottom); scroll-padding-top: var(--ios-clear-top); scroll-padding-bottom: var(--ios-clear-bottom); -webkit-mask-image: linear-gradient(to bottom, transparent, #000000 var(--ios-clear-top)); mask-image: linear-gradient(to bottom, transparent, #000000 var(--ios-clear-top)); }
  .modal > * { flex-shrink: 0; }
  .modal-head { position: static; flex-shrink: 0; background: transparent; border: 0; padding: .75rem; }
  .modal-head h2 { font-size: 1.25rem; }
  .modal-body { padding: 1rem; min-width: 0; }
  .modal-body .tb-btn { background: var(--ios-panel); color: var(--ios-text); border-color: var(--ios-line); font-size: .875rem; white-space: normal; }
  .modal .field input, .modal .field select, .password-form input:not([hidden]) { background: var(--ios-bg); color: var(--ios-text); border-color: var(--ios-line); }
  .modal-foot { margin-top: auto; flex-wrap: wrap; padding: .875rem .75rem; }
  .proj-grid { grid-template-columns: minmax(0, 1fr); }
  .proj-card, .manual-modal-body .card { background: var(--ios-panel); border-color: var(--ios-line); border-radius: 4px; }
  .proj-card .info b { font-size: 1rem; }
  .proj-card .info span { font-size: .625rem; }
  .proj-card .thumb { background: var(--ios-panel); border-color: var(--ios-line); }
  .proj-card .acts { gap: .5rem; }
  #projectsBody, #projectsModal .modal-head { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
  #projectsBody { overscroll-behavior-y: contain; }
  /* Back closes Projects; retain the header alternative for assistive tech and
     reveal it on keyboard focus without adding a second visible mobile exit. */
  #projectsModal [data-close="projectsModal"]:not(:focus-visible) { position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .modal:has(#projectsBody) { overscroll-behavior-y: contain; }
  .ios-refresh { font-size: .875rem; color: var(--ios-info); padding: .5rem 1rem; text-align: center; }
  .ctx-menu { max-height: calc(var(--ios-vh) - var(--ios-clear-bottom) - var(--ios-clear-top)); overflow-y: auto; background: var(--ios-bg); color: var(--ios-text); border-color: var(--ios-line); }
  .ctx-menu button { font-size: .875rem; }
  .guides-pop { z-index: 640; left: calc(16px + env(safe-area-inset-left)) !important; right: calc(16px + env(safe-area-inset-right)); top: calc(var(--ios-top) + var(--ios-clear-top)) !important; }
  .ios-sheet-content button:disabled { opacity: .4; }
  .lock-toast { bottom: calc(var(--ios-bottom) + var(--ios-clear-bottom)); left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); transform: none; max-width: none; background: var(--ios-panel); color: var(--ios-text); border-color: var(--ios-line); font-size: .875rem; padding-bottom: .75rem; }
  .lock-toast.show { transform: none; }
  @media (prefers-reduced-transparency: reduce) {
    .ios-glass { background: var(--ios-panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .canvas-viewport, .modal { -webkit-mask-image: none; mask-image: none; }
  }
  @supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .ios-glass { background: var(--ios-panel); }
  }
  @media (hover: none) { .tpl-card .card-x { display: block; width: 44px; height: 44px; color: var(--ios-text); background: var(--ios-panel); } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
}
@media screen and (max-width: 640px) and (prefers-color-scheme: dark) {
  :root:not([data-mobile-theme="light"]) { --ios-bg: #000000; --ios-panel: #111414; --ios-text: #E3F1EC; --ios-muted: #86908D; --ios-info: #8FA8DA; --ios-line: #2E3034; --ios-glass: #111414B8; --ios-glass-line: #2E3034CC; --ios-shadow: #00000066; }
}
@media screen and (max-width: 640px) and (pointer: coarse) {
  .artboard.studio .rh { width: var(--mobile-hit); height: var(--mobile-hit); background: transparent; border: 0; margin: 0; border-radius: 0; }
  .artboard.studio .rh::before { content: ''; position: absolute; left: 50%; top: 50%; width: var(--mobile-dot); height: var(--mobile-dot); transform: translate(-50%, -50%); background: #D9EEE8; outline: 2px solid #1F3260; }
  .artboard.studio .rh.nw { top: calc(var(--mobile-hit) / -2); left: calc(var(--mobile-hit) / -2); }
  .artboard.studio .rh.ne { top: calc(var(--mobile-hit) / -2); right: calc(var(--mobile-hit) / -2); }
  .artboard.studio .rh.sw { bottom: calc(var(--mobile-hit) / -2); left: calc(var(--mobile-hit) / -2); }
  .artboard.studio .rh.se { bottom: calc(var(--mobile-hit) / -2); right: calc(var(--mobile-hit) / -2); }
  .artboard.studio .rh.n, .artboard.studio .rh.s, .artboard.studio .rh.e, .artboard.studio .rh.w, .artboard.studio .rot { display: none !important; }
}