/* ============================================================================
   FRAME & GROOVE — phone layer (iOS portrait)
   Loaded last, over tokens / base / components / app / editor / disc / bone.

   1. Touch          2. Controls        3. Shell → bottom tab bar
   4. Views          5. Landscape
   ========================================================================= */

/* ======================= 1. TOUCH ======================================= */
/* Every hover in the kit latches after a tap on a touch device and stays lit
   until something else is tapped. */
@media (hover: none) {
  .btn:hover { background: var(--surface-3); }
  .btn-primary:hover { background: var(--accent); }
  .btn-ghost:hover { background: transparent; color: var(--text-2); }
  .btn-outline:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
  .btn-danger:hover { background: transparent; color: var(--danger); }
  .rail-btn:hover { color: var(--text-4); background: transparent; }
  .rail-btn:hover .rb-icon { opacity: .55; filter: saturate(.35); }
  .rail-btn[aria-current="true"]:hover { color: var(--text-1); background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .rail-btn[aria-current="true"]:hover .rb-icon { opacity: 1; filter: none; }
  .list-row:hover, .mob-base:hover { background: transparent; transform: none; border-color: var(--line); }
  .crumbs .crumb:hover { color: var(--text-3); background: transparent; }
  .crumbs .crumb.current:hover { color: var(--text-1); }
  .segmented button:hover { color: var(--text-3); }

  /* The tooltips are pointer affordances; a tap fires them and then leaves
     the bubble hanging over what was just tapped. */
  .tipbubble { display: none !important; }
}

@media (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }
  .btn, .rail-btn, .list-row, .segmented button, .swatch, .tool-btn,
  .stage, .stage canvas, .mob-3d, .canvas-wrap, .px-canvas {
    -webkit-user-select: none; user-select: none;
  }
  /* Painting on the canvas, turning the 3D mob and dragging a waveform are all
     drags — none of them should scroll the page as well. */
  .stage, .stage-wrap, .stage canvas, .mob-3d, .canvas-wrap, .px-canvas,
  .wave, .wave canvas { touch-action: none; }
}

/* ======================= 2. CONTROLS ==================================== */
/* The kit is sized for a mouse: 32px targets and 13px type. 13px also makes
   iOS zoom the page the moment a field takes focus, and it never zooms back. */
@media (max-width: 860px) {
  .input, .select, .textarea { height: 40px; font-size: 16px; }
  .textarea { height: auto; min-height: 88px; padding-top: 8px; padding-bottom: 8px; }
  .input-sm, .select-sm { height: 34px; font-size: 16px; }

  .btn { height: 38px; padding: 0 var(--s-4); font-size: var(--t-14); }
  .btn-sm { height: 32px; padding: 0 var(--s-3); font-size: var(--t-13); }
  .btn-lg, .btn-xl { height: 46px; }
  .btn-icon { width: 38px; padding: 0; }
  .btn-icon.btn-sm { width: 32px; }
  .btn-icon.btn-lg { width: 46px; }

  /* Checkboxes and radios ship at their 13px default, which is a 13px target. */
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
  input[type="range"] { height: 28px; }
}

/* ======================= 3. SHELL ======================================= */
/* The icon rail costs 68px of a 393pt screen and puts navigation at the far
   edge from a thumb. Below 720px it becomes a bottom tab bar instead: same
   buttons, same order, same states — laid on their side. */
@media (max-width: 720px) {
  .shell { flex-direction: column; }

  .viewhost { order: 1; flex: 1 1 0; min-height: 0; }

  .rail {
    order: 2;
    flex: none;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--s-1) calc(4px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--line-hair);
    background: var(--surface-1);
  }
  .rail > .rail-sep, .rail > .spacer { display: none; }
  /* Eight tabs across 393pt is 49px each — still over the 44pt minimum, and
     wide enough for a 9px uppercase label. */
  .rail-btn { flex: 1 1 0; width: auto; min-width: 0; height: 50px; gap: 1px; padding: 0 2px; }
  .rail-btn .rb-icon { width: 24px; height: 24px; }
  .rail-btn .rb-label { font-size: 8.5px; letter-spacing: .02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  /* The current-tab marker is a bar down the left edge of the rail. Turned on
     its side it reads as a stray line floating above the bar, and a tab bar
     does not need it — the lit icon, the label and the tinted plate already
     say which tab you are on. */
  .rail-btn[aria-current="true"]::before { display: none; }
  .rail-btn[aria-current="true"] {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  .rail-btn[aria-current="true"] .rb-label { color: var(--accent); }

  /* Top bar: home link, wordmark, breadcrumb, save state and four tool
     buttons do not fit in 393pt. The palette and the shortcut sheet are both
     keyboard affordances. */
  /* padding-top is 0 in a Safari tab, where Safari owns the status bar. On
     the Home Screen that strip belongs to the page, so the bar steps under
     it rather than sliding beneath the clock. */
  .topbar {
    padding: env(safe-area-inset-top) var(--s-2) 0;
    height: auto; min-height: calc(var(--topbar-h) + env(safe-area-inset-top));
    gap: var(--s-2);
  }
  .topbar .divider-v { display: none; }
  .topbar [data-tip^="Command palette"] .caption,
  .topbar [data-tip^="Keyboard shortcuts"] { display: none; }
  /* "Frame & Groove" wrapped to three lines and made the top bar three times
     as tall as it needs to be. */
  .logo-word { font-size: var(--t-13); white-space: nowrap; }
  /* The breadcrumb repeats what the tab bar already says, and at this width it
     only gets to show a couple of characters of it. */
  .topbar .crumbs { display: none; }

  /* Safe area at the sides, for landscape and for the rounded corners. */
  .topbar { padding-left: max(var(--s-2), env(safe-area-inset-left)); padding-right: max(var(--s-2), env(safe-area-inset-right)); }
  .view-header, .lib-toolbar, .view-body {
    padding-left: max(var(--s-4), env(safe-area-inset-left));
    padding-right: max(var(--s-4), env(safe-area-inset-right));
  }
}


/* ======================= 4. VIEWS ======================================= */
@media (max-width: 560px) {
  .view-header { padding-top: var(--s-5); padding-bottom: var(--s-3); }
  .view-header h1 { font-size: var(--t-21); }
  .view-body { padding-bottom: var(--s-6); }

  /* The packs toolbar put a 250px search field and a sort select on one line
     and clipped the select off the right edge. */
  .lib-toolbar { flex-wrap: wrap; gap: var(--s-2); }
  .lib-toolbar .input-group { flex: 1 0 100%; }
  .lib-search { width: 100%; }
  .lib-toolbar .select { flex: 1 1 auto; min-width: 0; }
  .lib-toolbar > .spacer { display: none; }

  /* Empty states line their actions up in a nowrap row, so the last one ran
     off the right edge. */
  .empty .row { flex-wrap: wrap; justify-content: center; }
  .empty .row > .btn { flex: 0 1 auto; }

  .view-header > .row.wrap { width: 100%; }
  .view-header > .row.wrap > .btn {
    flex: 1 1 150px; min-width: 0;
    height: auto; min-height: 46px; padding: 8px var(--s-3);
    white-space: normal; line-height: 1.25; text-align: center;
  }

  /* ---- The editor ------------------------------------------------------
     Four columns — the item list, the tool dock, the canvas and the panels —
     left the canvas 91px wide on a 393pt screen, with 302px of chrome around
     it. Everything stacks, and the canvas gets the room. */
  .workspace { flex-direction: column; }

  /* Item list: a strip of thumbnails across the top that scrolls sideways. */
  .wk-sidebar {
    width: auto; flex: none; flex-direction: row; align-items: stretch;
    border-right: 0; border-bottom: 1px solid var(--line-hair);
  }
  .wk-sidebar-head, .wk-sidebar-foot {
    flex: none; border-bottom: 0; border-top: 0;
    display: flex; align-items: center; padding: var(--s-2);
  }
  .wk-sidebar-head { border-right: 1px solid var(--line-hair); }
  .wk-sidebar-foot { border-left: 1px solid var(--line-hair); }
  .wk-sidebar-list {
    flex: 1 1 auto; min-width: 0; min-height: 0;
    flex-direction: row; align-items: center;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; gap: 2px;
  }
  .wk-sidebar-list::-webkit-scrollbar { display: none; }
  .wk-sidebar-list > * { flex: none; }
  .wk-sidebar .list-row { width: 44px; height: 44px; }
  .wk-sidebar-head, .wk-sidebar-foot { padding: var(--s-1) var(--s-2); }

  .editor { flex-direction: column; }

  /* Tool dock: a wrapped strip above the canvas rather than a column beside
     it, so no tool ends up off-screen. */
  .tooldock {
    width: auto; flex: none;
    flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center;
    overflow: visible;
    padding: var(--s-1) var(--s-2);
    border-right: 0; border-bottom: 1px solid var(--line-hair);
  }
  .tooldock > * { flex: none; }
  .tooldock .rail-sep { width: 1px; height: 22px; margin: 0 var(--s-1); }

  /* The canvas is the point of the screen, so it takes what is left and the
     panels get a fixed slice — they scroll internally anyway. */
  .stage-wrap { flex: 1 1 auto; min-height: 44svh; }
  .edpanels {
    width: auto; flex: none; height: 28svh; min-height: 190px;
    border-left: 0; border-top: 1px solid var(--line-hair);
  }

  /* The stage bar holds 744px of controls. As designed it scrolls sideways,
     which hides most of them with nothing to say they are there; wrapped, it
     was costing the canvas 167px. Tighten the gaps so it packs into fewer
     rows and everything is still visible. */
  .stage-bar {
    height: auto; min-height: 40px;
    flex-wrap: wrap; overflow-x: visible;
    padding: var(--s-1) var(--s-2); gap: var(--s-1);
    row-gap: 4px;
  }
  .stage-bar > .spacer { display: none; }
  .stage-bar .sb-sep { display: none; }
  .stage-bar .sb-group { gap: 2px; flex-wrap: wrap; min-width: 0; }

  /* Panel internals sized for a 244px column. */
  .block-grid-scroll { max-height: 34svh; }
  .vp-scroll { max-height: 32svh; }
  .mob-pick-list { max-height: 34svh; }
  .frame-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wall-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .palette-grid { grid-template-columns: repeat(auto-fill, 26px); }

  /* Mobs: model and sheet side by side in a 393pt pane is two 196px panes. */
  .mob-panes[data-mode="split"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
  .mob-side { border-left: 0; border-top: 1px solid var(--line-hair); max-height: 40svh; }
  .mob-import { grid-template-columns: minmax(0, 1fr); }
  .mob-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Discs. */
  .disc-cols { grid-template-columns: minmax(0, 1fr); }
  .gen-controls { grid-template-columns: minmax(0, 1fr); }
  .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .export-grid { grid-template-columns: minmax(0, 1fr); }
  .import-layout { grid-template-columns: minmax(0, 1fr); }

  /* Keyboard hints for keys a phone does not have. */
  .kbd-row, .kbd-hint { display: none; }

  /* Modals become sheets. */
  .overlay { padding: 0; display: flex; align-items: flex-end; justify-content: center; }
  .modal, .modal-wide, .modal-xwide {
    width: 100%; max-width: 100%;
    max-height: 90svh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .modal-foot { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .modal-foot > .btn { flex: 1 1 auto; }
}

/* ======================= 5. LANDSCAPE =================================== */
/* ~390pt tall: stacking four editor panes leaves nothing of any of them. Put
   the rail and the editor columns back, where width is the plentiful one. */
@media (max-height: 500px) and (orientation: landscape) {
  .shell { flex-direction: row; }
  .rail {
    order: 0; width: 52px; flex-direction: column; justify-content: flex-start;
    border-top: 0; border-right: 1px solid var(--line-hair);
    padding: var(--s-1) 0 calc(var(--s-1) + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
  }
  .rail > .spacer { display: block; flex: 1; }
  .rail-btn { flex: none; width: 46px; height: 42px; }
  .viewhost { order: 1; }

  .workspace, .editor { flex-direction: row; }
  .wk-sidebar { display: none; }               /* the tab bar still reaches every view */
  .tooldock {
    width: var(--tooldock-w, 46px); flex: none;
    flex-direction: column; flex-wrap: nowrap;
    border-right: 1px solid var(--line-hair); border-bottom: 0;
    overflow-y: auto;
  }
  .tooldock .rail-sep { width: 22px; height: 1px; margin: var(--s-1) 0; }
  .stage-wrap { flex: 1 1 0; height: auto; min-height: 0; }
  .edpanels { width: 228px; flex: none; border-left: 1px solid var(--line-hair); border-top: 0; }
}