/* Extracted from vr/index.html — architecture-400 R1. Do not hand-duplicate; edit here.
 *
 * Phone / narrow layout — keep PHONE_MQ in vr/phoneLayout.js in sync.
 * Portrait ≤900px, or landscape phone / tablet (short viewport). Bottom sheet, not a side column.
 */

/* T21 — touch targets on coarse pointers */
@media (pointer: coarse) {
  /* Touch: keep a soft affordance; full chrome on press */
  #localpark {
    opacity: 0.32;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }
  #localpark:active,
  #localpark:focus-visible {
    opacity: 1;
    background: rgba(6, 10, 18, .9);
    border-color: rgba(140, 170, 255, .32);
  }
  #localframe button,
  #localbar .seg button,
  #localbar .local-iconbtn,
  #localMove button,
  #localframetag,
  #localkeybtn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }
  .dock-sheet-dismiss {
    min-width: 104px;
    min-height: 44px;
  }
}

@media (max-width: 900px), ((max-height: 560px) and (max-width: 1100px)) {
  :root {
    --gutter: 8px;
    --phone-ribbon-h: 74px;
    --phone-dock-fab: 52px;
  }
  #topbar {
    flex-wrap: nowrap;
    min-height: 44px;
    gap: 6px;
    padding: 6px 8px;
  }
  #topbar .brand,
  #scalerung,
  .wide-only { display: none !important; }
  #topbar .top-mid { gap: 4px; }
  #topbar .actions { flex-wrap: nowrap; flex-shrink: 0; gap: 4px; }
  #topbar .actions button {
    padding: 8px;
    min-height: 44px;
    min-width: 44px;
  }
  #topbar .actions .btn-label,
  #topbar #tourbtn .btn-label { display: none; }
  #topbar .actions .ico,
  #topbar #tourbtn .ico { width: 16px; height: 16px; }
  #tourbtn { min-height: 44px; min-width: 44px; width: 44px; height: 44px; }
  #worldchip { font-size: 11px; flex: 1 1 auto; min-width: 0; }
  #lessonchip { max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; }

  /* Phone: menu is the bottom FAB, not a topbar twin */
  #topbar #docktoggle { display: none !important; }
  #dockscrim.on { display: block; }
  #dockfab {
    display: inline-flex;
    left: calc(var(--gutter) + var(--safe-l));
    bottom: calc(var(--phone-ribbon-h) + 10px + var(--safe-b));
    z-index: 9;
  }
  #ui.phone-dock-open #dockfab { display: none; }
  #localfab {
    top: calc(56px + var(--safe-t));
    right: calc(var(--gutter) + var(--safe-r));
    z-index: 7;
    width: auto;
    min-width: 48px;
    padding: 0 12px;
    gap: 6px;
    border-radius: 14px;
  }
  #localfab .btn-label {
    display: inline;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
  }
  #localfab .localfab-peek { display: none; }

  /* Minimap — peek (200px) top-right; full sheet over the globe */
  #localpanel.phone-map {
    z-index: 7;
    box-shadow: 0 10px 36px rgba(0, 0, 0, .48), 0 0 0 1px rgba(110, 160, 255, .14);
  }
  #localpanel.phone-peek.snap-tr,
  #localpanel.phone-peek.snap-tl,
  #localpanel.phone-peek.snap-bl,
  #localpanel.phone-peek.snap-br {
    width: min(58vw, calc(var(--local-map-px, 200px) + 28px));
    max-height: none;
    padding: 5px 6px 6px;
  }
  #localpanel.phone-peek.phone-free {
    position: fixed;
    z-index: 8;
    right: auto;
    bottom: auto;
    width: min(58vw, calc(var(--local-map-px, 200px) + 28px));
  }
  #localpanel.phone-peek #localbar {
    left: 4px;
    right: 4px;
    padding: 3px 4px;
    cursor: grab;
    touch-action: none;
  }
  #localpanel.phone-peek #localview {
    border-radius: 8px;
    border-color: rgba(110, 160, 255, .28);
    touch-action: none;
  }
  #localpanel.phone-peek #localbar:active { cursor: grabbing; }
  #localpanel.phone-peek #localframetag {
    min-width: 28px;
    font-size: 8px;
    letter-spacing: .1em;
  }
  #localpanel.phone-peek #locallegendrow {
    margin-top: 2px;
    max-height: 28px;
    overflow: hidden;
  }
  #localpanel.phone-peek #localstatus {
    font-size: 10px;
    max-height: 2.6em;
  }
  #localpanel.phone-peek #localstatus .st[data-k="in"] b {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  #localpanel.phone-full {
    z-index: 9;
    border-color: rgba(110, 160, 255, .35);
    box-shadow: 0 18px 56px rgba(0, 0, 0, .55);
  }
  #localpanel.phone-full.expanded {
    transform: none !important;
    left: calc(var(--gutter) + var(--safe-l));
    right: calc(var(--gutter) + var(--safe-r));
    bottom: calc(var(--phone-ribbon-h) + 8px + var(--safe-b));
    max-height: calc(100dvh - 56px - var(--phone-ribbon-h) - var(--safe-t) - var(--safe-b));
  }
  #localpanel.phone-full.expanded #localmapwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    flex: 1 1 auto;
  }
  #localpanel.phone-full.expanded #localview,
  #localpanel.phone-peek #localview {
    width: var(--local-map-px, 200px) !important;
    height: var(--local-map-px, 200px) !important;
    max-width: 100% !important;
    max-height: none !important;
    flex: 0 0 auto;
    margin: 0 auto;
    border-color: rgba(110, 160, 255, .32);
    touch-action: none;
  }
  #localpanel.phone-map #localpark {
    opacity: 0.45;
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    font-size: 0;
  }
  #localpanel.phone-map #localpark::after {
    content: 'Hide';
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: Syne, sans-serif;
  }
  #localpanel.phone-full #localpark {
    opacity: 0.72;
  }
  .local-map-toggle {
    display: none;
    pointer-events: auto;
    position: absolute;
    z-index: 4;
    right: 8px;
    bottom: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 999px;
    font-family: Syne, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e8f0ff;
    background: rgba(8, 12, 22, .92);
    border: 1px solid rgba(110, 160, 255, .5);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    backdrop-filter: blur(12px);
  }
  .local-map-toggle[aria-pressed="true"] {
    border-color: rgba(228, 184, 106, .55);
    background: rgba(28, 22, 12, .94);
    color: #f0e0c8;
  }
  #localpanel.phone-full .local-map-toggle {
    top: 8px;
    bottom: auto;
    right: 8px;
  }
  #localpanel.phone-map .local-map-toggle { display: inline-flex; align-items: center; justify-content: center; }

  #dock {
    display: none;
    top: auto;
    left: calc(var(--gutter) + var(--safe-l));
    right: calc(var(--gutter) + var(--safe-r));
    bottom: calc(var(--phone-ribbon-h) + 6px + var(--safe-b));
    width: auto;
    max-height: min(48dvh, calc(100dvh - var(--phone-ribbon-h) - 72px - var(--safe-t) - var(--safe-b)));
    z-index: 6;
    padding-top: 2px;
    border-radius: 16px 16px 14px 14px;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .38), 0 12px 40px rgba(0, 0, 0, .4);
  }
  #dock:not(.is-open) { display: none !important; }
  #dock::before { display: none; }
  .dock-sheet-bar { display: flex; }
  #dock.is-open { display: flex; }
  #dock.lab-mode {
    height: auto;
    width: auto;
    max-height: min(44dvh, calc(100dvh - var(--phone-ribbon-h) - 72px - var(--safe-t) - var(--safe-b)));
  }
  #strokeDetails { margin-top: 10px; }
  #strokeDetails summary { margin-bottom: 6px; }
  #pane-tools .god-note.phone-only { margin-bottom: 6px; }
  .dock-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #toolsStrike, #toolsClimate { grid-template-columns: 1fr; }
  #dock.is-open .dock-tabs { display: flex !important; }
  #dock.is-open .dock-body { display: block !important; }
  .dock-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    gap: 2px;
    padding-bottom: 2px;
  }
  .dock-tabs::-webkit-scrollbar { display: none; }
  .dock-tabs button {
    flex: 1 0 auto;
    min-width: 48px;
    min-height: 48px;
    padding: 4px 2px 3px;
  }
  .dock-tabs .btn-label {
    display: block;
    font-size: 7px;
    letter-spacing: .05em;
    line-height: 1.05;
    text-transform: uppercase;
    max-width: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .suite-desk-tab .btn-label {
    display: block;
    font-size: 7px;
    letter-spacing: .04em;
    line-height: 1.05;
    text-transform: uppercase;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .suite-desk-tab { min-width: 48px; min-height: 48px; padding: 6px 4px; }
  .phone-only { display: block !important; }
  .desk-only { display: none !important; }
  .clim-strip { grid-template-columns: 1fr 1fr; }
  .clim-compare { grid-template-columns: 1fr; }
  .tools button, .dock-foot button, .god-actions button, .god-primary,
  #toolsLand button, #toolsLife button, #toolsStrike button, #toolsClimate button, #toolsEvil button {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 12px;
  }
  .dock-body { font-size: 13px; line-height: 1.45; }
  #landpickclose, #landpickcontinue, #catclose { min-height: 44px; min-width: 44px; }
  .lp-card { min-height: 44px; }
  #localkey .lk-grid,
  #localkey .lk-grid.guilds,
  #localkey .lk-grid.marks,
  #localkey .lk-grid.primer { grid-template-columns: 1fr; }

  .guides-actions {
    grid-template-columns: 1fr 1fr;
  }
  .guides-actions #viewOpenKey,
  .suite-desk[data-desk-panel="guides"] #viewOpenKey {
    width: 100%;
  }
  .mind-hint {
    font-size: 11px;
    line-height: 1.35;
    margin-top: 4px;
  }

  #timeribbon {
    left: calc(var(--gutter) + var(--safe-l));
    right: calc(var(--gutter) + var(--safe-r));
    width: auto;
    bottom: calc(6px + var(--safe-b));
    z-index: 8;
  }
  #timeribbon .ics-ribbon { padding: 6px 8px 5px; }
  #timeribbon .rib-lived-speed { display: none; }
  #timeribbon .rib-lived-season { margin-top: 2px; }
  #timeribbon .rib-lived-season-btn { min-height: 36px; height: 36px; }
  #timeribbon .rib-era-line { display: none; }
  #timeribbon .rib-marks,
  #timeribbon .rib-face-hint,
  #timeribbon .rib-faces,
  #timeribbon .rib-hold,
  #timeribbon .rib-life { display: none; }
  #timeribbon .ics-ribbon { padding: 7px 10px 6px; }
  #ui.phone-dock-open #timeribbon { opacity: 0; pointer-events: none; }

  #toolrail {
    display: flex;
    bottom: calc(var(--phone-ribbon-h) + 12px + var(--safe-b));
    right: calc(var(--gutter) + var(--safe-r));
    left: auto;
    z-index: 5;
    max-width: min(220px, calc(100vw - var(--phone-dock-fab) - 28px - var(--safe-l) - var(--safe-r)));
  }
  #ui.phone-dock-open #toolrail { display: none; }

  #darkhud.darkhud-chip-host {
    max-width: min(180px, calc(100vw - var(--phone-dock-fab) - 96px - var(--safe-l) - var(--safe-r)));
    bottom: calc(var(--phone-ribbon-h) + 12px + var(--safe-b));
  }
  #ui.phone-dock-open #darkhud { opacity: 0; pointer-events: none; }

  #localpanel.snap-tl,
  #localpanel.snap-tr {
    top: calc(56px + var(--safe-t));
    bottom: auto;
  }
  #localpanel.snap-bl,
  #localpanel.snap-br {
    top: auto;
    bottom: calc(var(--phone-ribbon-h) + 12px + var(--safe-b));
  }
  #localpanel.snap-tl,
  #localpanel.snap-bl {
    left: calc(var(--gutter) + var(--safe-l));
    right: auto;
  }
  #localpanel.snap-tr,
  #localpanel.snap-br {
    right: calc(var(--gutter) + var(--safe-r));
    left: auto;
  }
  #localpanel.expanded {
    top: calc(52px + var(--safe-t));
    bottom: calc(var(--phone-ribbon-h) + 8px + var(--safe-b));
    left: calc(var(--gutter) + var(--safe-l));
    right: calc(var(--gutter) + var(--safe-r));
    width: auto;
    transform: none;
    max-height: calc(100dvh - 56px - var(--phone-ribbon-h) - var(--safe-t) - var(--safe-b));
  }
  #ui.phone-dock-open #localpanel.phone-full { opacity: 0; pointer-events: none; }
  /* Compact map chrome — stats strip wraps instead of overflowing */
  #localstatus,
  #locallegend {
    font-size: 10px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #locallegendrow {
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
  }

  #receipt {
    bottom: calc(var(--phone-ribbon-h) + 72px + var(--safe-b));
    width: min(420px, calc(100vw - 20px - var(--safe-l) - var(--safe-r)));
  }

  #catpanel {
    top: calc(52px + var(--safe-t));
    left: calc(var(--gutter) + var(--safe-l));
    right: calc(var(--gutter) + var(--safe-r));
    bottom: calc(var(--gutter) + var(--safe-b));
    width: auto;
    max-height: none;
    height: auto;
    z-index: 8;
  }

  #reveal {
    left: 50%;
    right: auto;
    bottom: calc(22% + var(--safe-b));
    width: min(420px, calc(100vw - 16px - var(--safe-l) - var(--safe-r)));
  }
  #moment { top: 18%; width: min(92vw, 28rem); padding: 0 8px; box-sizing: border-box; }

  /* Thought: bottom-left above ribbon, clear of menu FAB */
  #thought {
    top: auto;
    bottom: calc(var(--phone-ribbon-h) + var(--phone-dock-fab) + 16px + var(--safe-b));
    left: calc(var(--gutter) + var(--safe-l));
    right: auto;
    width: min(18rem, calc(100vw - var(--phone-dock-fab) - 20px - var(--safe-l) - var(--safe-r)));
    max-width: none;
    z-index: 6;
  }
  #thought .th-text {
    font-size: clamp(13px, 3.6vw, 16px);
    line-height: 1.4;
  }
  #thought .th-suggest { font-size: 10px; }
  #thought .th-trail { display: none; }
  #ui.phone-dock-open #thought {
    opacity: 0 !important;
    pointer-events: none;
  }

  #eoref {
    top: calc(56px + var(--safe-t));
    width: min(140px, 36vw);
  }
}

.phone-only { display: none; }

@media (max-width: 900px) and (max-height: 480px),
       ((max-height: 560px) and (max-width: 1100px)) {
  #dock {
    max-height: calc(100dvh - 64px - var(--safe-t) - var(--safe-b));
  }
  #thought { display: none; }
}

@media (pointer: coarse) {
  #topbar button, .dock-tabs button, .rib-pause, .rib-ff, .rib-step,
  .suite-desk-tab, .tools button, .dock-foot button, #toolrail .toolrail-arm, #toolrail .toolrail-clear {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Portrait phones: map peek stays readable without crushing the globe */
@media (max-width: 900px) and (orientation: portrait),
       ((max-height: 560px) and (max-width: 1100px) and (orientation: landscape)) {
  #localpanel.phone-peek:not(.expanded) {
    width: min(54vw, 220px);
  }
}