/* Phone UI (phase 1). Everything visible lives inside the phone media query; desktop and tablets only get the
   rules that keep the phone-only elements hidden. Pairs with phone-ui.js. */
.phone-only,.phone-start,.phone-banner,.phone-gesture-chip,.phone-rail,.phone-section,.phone-guide-note{display:none}

@media (max-width:760px),(max-height:520px) and (pointer:coarse){
  /* The labelled phone rail replaces the icon rail and the old upload box */
  html body.phone-ui.phone-ui .sidebar .tool-rail{display:none!important}
  body.phone-ui #uploadBtn,body.phone-ui #fileName,body.phone-ui #openFontFolder,body.phone-ui .phone-flat-only,
  body.phone-ui .template-toolbar [data-template-view=left],body.phone-ui .template-toolbar [data-template-view=right]{display:none!important}
  body.phone-ui .phone-only{display:inline-flex}
  body.phone-ui .phone-guide-note{display:block}
  body.phone-ui .sidebar .panel-label,body.phone-ui .phone-section .swatch-label,body.phone-ui .phone-section .hm-mini-head,body.phone-ui .phone-section .v,body.phone-ui .phone-section small,body.phone-ui .phone-section .big-field-context{font-size:12px}
  body.phone-ui .sidebar{scroll-padding-top:124px}/* focus and scrollIntoView keep controls clear of the sticky header and rail */

  body.phone-ui .phone-rail{display:flex;gap:6px;position:sticky;top:53px;z-index:2;padding:8px 10px;overflow-x:auto;background:var(--s1);border-bottom:1px solid var(--b1);scrollbar-width:none}
  .phone-rail::-webkit-scrollbar{display:none}
  .phone-rail-btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;min-height:52px;padding:4px 8px;border:1px solid var(--b2);border-radius:10px;background:var(--s2);color:var(--t1);font:600 12px/1.1 var(--sans)}
  .phone-rail-btn span{font-size:17px;line-height:1;color:var(--accent)}
  .phone-rail-btn:active,.phone-rail-btn:focus-visible{background:var(--s3);outline:2px solid var(--accent);outline-offset:-2px}

  /* Short screens (iPhone SE, landscape): a one-line rail leaves more of the half-height sheet for the controls */
  @media (max-height:740px){.phone-rail-btn{flex-direction:row;gap:6px;min-height:44px;padding:4px 12px}body.phone-ui .phone-rail{padding:6px 10px}}
  body.phone-ui .phone-section{display:block;padding:16px}
  .phone-section-title{margin:0 0 12px;font-size:15px;font-weight:700;color:var(--t1);letter-spacing:0}
  .phone-section+.phone-section{border-top:1px solid var(--b1)}
  .phone-hint{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--t2)}
  .phone-add-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .phone-add-btn{background:var(--s2)!important;color:var(--t1)!important;border:1px solid var(--b2)!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px!important;height:auto;padding:8px 4px;font-size:13px;border-radius:12px}
  .phone-add-btn span{font-size:20px;line-height:1;color:var(--accent)}
  .phone-section #textInput{margin-top:14px}

  /* Background: the flat preview is shown in the sheet and is the tap target for Pick */
  .phone-section .hm-mini{display:block!important;position:static!important;width:auto!important;max-width:none!important;margin:12px 0 0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--s2)}
  .phone-section .hm-mini-canvas-wrap{aspect-ratio:auto;height:150px;background:repeating-conic-gradient(#2a2b30 0 25%,#1c1d21 0 50%) 0 0/16px 16px}
  .phone-section #heightmapCanvas{image-rendering:auto;max-height:150px}
  body.phone-picking .phone-section .hm-mini{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
  body.phone-picking .phone-section #heightmapCanvas{cursor:crosshair}
  #bgPick[aria-pressed=true]{background:var(--accent);color:#101114;border-color:var(--accent)}

  .lock-aspect{width:100%;justify-content:center;margin:4px 0 2px}
  .lock-aspect[aria-pressed=false]{color:var(--t2)}

  .phone-all{padding:0!important}
  .phone-all>summary{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:60px;padding:10px 16px;cursor:pointer;list-style:none;font-weight:700;font-size:15px}
  .phone-all>summary::-webkit-details-marker{display:none}
  .phone-all>summary::after{content:'▾';position:absolute;right:18px;color:var(--t3)}
  .phone-all{position:relative}
  .phone-all[open]>summary::after{content:'▴'}
  .phone-all>summary small{font-weight:400;font-size:12px;color:var(--t3)}
  #phoneAllBody>.panel{border-top:1px solid var(--b1)}

  /* Empty sleeve: Add logo call to action over the canvas */
  .phone-start:not([hidden]){display:block;position:absolute;left:max(12px,var(--safe-l));right:max(12px,var(--safe-r));bottom:14px;z-index:7;padding:16px;border-radius:16px;background:rgba(22,23,27,.94);border:1px solid var(--b2);box-shadow:0 14px 40px #0009}
  .phone-start h2{margin:0 0 4px;font-size:18px;color:var(--t1)}
  .phone-start p{margin:0 0 12px;font-size:13px;color:var(--t2);line-height:1.4}
  .phone-start-extra:not([hidden]){display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .phone-start-extra .btn{flex:1 1 auto;font-size:14px}
  .phone-start-link{display:block;margin:12px auto 0;padding:6px 10px;min-height:36px;background:none;border:0;color:var(--accent,#7cc4ff);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .phone-own-sleeve{margin-top:14px;padding-top:12px;border-top:1px solid var(--b2)}
  .phone-own-sleeve-btn{width:100%;min-height:44px;font-size:15px}
  .phone-own-sleeve .phone-hint{margin:6px 0 0}
  #generateBtn.phone-export-empty{background:transparent;color:var(--t2);border:1px solid var(--b2)}

  /* Banner: restored design, re-import custom template, large-operation notes */
  .phone-banner:not([hidden]){display:flex;flex-direction:column;gap:8px;position:absolute;top:62px;left:max(10px,var(--safe-l));right:max(10px,var(--safe-r));z-index:8;padding:10px 12px;border-radius:12px;background:rgba(22,23,27,.95);border:1px solid var(--accent);font-size:14px;color:var(--t1)}
  .phone-banner p{margin:0;line-height:1.4}
  .phone-banner-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .phone-banner-close{margin-left:auto;min-width:44px;font-size:20px}
  body.mobile-settings-open .phone-banner{display:none}

  .phone-gesture-chip:not([hidden]){display:block;position:absolute;top:62px;left:50%;transform:translateX(-50%);z-index:9;padding:6px 12px;border-radius:999px;background:rgba(16,17,20,.86);border:1px solid var(--b2);font:600 13px var(--mono);color:var(--t1);pointer-events:none;white-space:nowrap}
  .template-toolbar [aria-pressed=true]{background:var(--accent)!important;color:#101114!important;border-color:var(--accent)}
}