/* Mobile layout, navigation and photo editor (owner, 15 Oct 2026). Loaded last; overrides only what it names. */

/* Page changes always start at the top: no smooth scrolling of the whole page (it was interrupted on phones and left
   visitors at the footer). Same-page #anchor links are smoothed in app.js instead. */
html { scroll-behavior: auto !important; }
.dash__main h1:focus, main h1:focus { outline: none; }

/* 16px side gutter on phones, nothing touching the screen edges. */
@media (max-width: 600px) {
  .container { padding-inline: 16px; }
  .panelc { padding: 16px; border-radius: 14px; }
  .auth { padding: 24px 16px 96px; }
  .auth__card { padding: 22px 18px; border-radius: 20px; }
  .modal { padding: 18px 16px; }
  .dash__main h1 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 4px; }
  .dash__main > .sub { margin: 4px 0 16px; }
  .row-actions .btn { flex: 1 1 auto; }
  .aphead { gap: 10px; }
  img, video, iframe, canvas, svg { max-width: 100%; }
  pre, code { overflow-wrap: anywhere; }
  table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Dashboard grid: columns may shrink below their content (fixes the 360px overflow). */
.dash > * { min-width: 0; }
.dash__main { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Dashboard navigation on phones and small tablets ---------- */
.dmb, .dtab { display: none; }
@media (max-width: 900px) {
  .dash { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 12px calc(150px + env(safe-area-inset-bottom)); }
  .dash__side { display: none !important; }
  .dmb { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; }
  .dmb__me { display: inline-flex; border-radius: 50%; }
  .dmb__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .dmb__who b { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
  .dmb__track { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(63, 91, 245, .1); color: var(--emerald, #3F5BF5); }
  .dmb__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card, #fff); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
  .dmb__btn:focus-visible, .dd a:focus-visible, .dd button:focus-visible, .dtab a:focus-visible { outline: 3px solid var(--mint, #9DB2FF); outline-offset: 2px; }

  .dd { position: fixed; inset: 0; z-index: 200; }
  .dd__bg { position: absolute; inset: 0; background: rgba(7, 10, 28, .5); }
  .dd__panel { position: absolute; top: 0; bottom: 0; right: 0; width: min(340px, 88vw); background: var(--card, #fff); display: flex; flex-direction: column;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .4); overflow-y: auto; }
  .dd-in { animation: ddIn .2s ease-out; } .dd-out { animation: ddIn .15s ease-in reverse; }
  @keyframes ddIn { from { transform: translateX(100%); } to { transform: none; } }
  .dd__head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
  .dd__me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
  .dd__me span { display: grid; min-width: 0; } .dd__me b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dd__me small { color: var(--emerald, #3F5BF5); font-size: .8rem; }
  .dd__close { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 10px; }
  .dd__nav { display: grid; gap: 2px; }
  .dd__group { margin: 12px 8px 4px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .dd__nav a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 12px; text-decoration: none; color: var(--ink); font-size: 1rem; }
  .dd__nav a svg { color: var(--muted); flex: 0 0 auto; }
  .dd__nav a .jx__n { margin-left: auto; }
  .dd__nav a.is-active { background: rgba(63, 91, 245, .1); color: var(--emerald, #3F5BF5); font-weight: 600; }
  .dd__nav a.is-active svg { color: var(--emerald, #3F5BF5); }
  .dd__out { margin-top: auto; padding-top: 14px; }
  html.dd-open, html.dd-open body { overflow: hidden; }

  .dtab { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; background: var(--card, #fff);
    border-top: 1px solid var(--line); padding: 4px 4px env(safe-area-inset-bottom); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .35); }
  .dtab button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .72rem; cursor: pointer; border-radius: 10px; }
  .dtab a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; text-decoration: none; color: var(--muted); font-size: .72rem; position: relative; border-radius: 10px; }
  .dtab a.is-active { color: var(--emerald, #3F5BF5); font-weight: 600; }
  .dtab a .jx__n { position: absolute; top: 4px; left: 55%; }
  /* Dashboard on phones: Help lives in the tab bar, so the floating button is hidden and never covers page buttons
     (owner, 16 Oct 2026: it covered "I have a head mount now"). The Help panel still opens above the bar. */
  body:has(.dtab) .hw { bottom: calc(70px + env(safe-area-inset-bottom)); }
  body:has(.dtab) .hw__btn { display: none; }
  body:has(.dtab) .vl-toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body:has(.dtab) .footer { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* Outside the dashboard: room under the last buttons so the Help button never covers them. */
@media (max-width: 600px) {
  main { padding-bottom: 72px; }
  body:has(.dtab) main { padding-bottom: 0; }
}

/* ---------- Profile photo ---------- */
.photo__stage { position: relative; }
.photo__stage .cropper-view-box, .photo__stage .cropper-face { border-radius: 50%; }
.photo__stage .cropper-view-box { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: -2px; }
/* A faint face oval inside the circle: line the face up with it. */
.photo__stage .cropper-view-box::after { content: ''; position: absolute; left: 28%; right: 28%; top: 14%; bottom: 24%; border: 2px dashed rgba(255, 255, 255, .75); border-radius: 50%; pointer-events: none; }
.photo__zoom { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.photo__zoom input[type=range] { flex: 1; min-height: 44px; }
.photo-tips { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--paper, #F4F6FC); margin: 10px 0; }
.photo-tips summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.photo-tips__lead { margin: 6px 0 10px; font-weight: 600; }
.photo-tips__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .photo-tips__grid { grid-template-columns: 1fr 1fr; } }
.photo-tips ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.photo-tips li { display: flex; gap: 8px; align-items: flex-start; }
.photo-tips .ok { color: #0E7C66; font-weight: 700; } .photo-tips .no { color: #B42318; font-weight: 700; }
.photo-tips__tiles { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.photo-tips__tile { display: grid; gap: 4px; justify-items: center; font-size: .78rem; text-align: center; width: 96px; }
.photo-tips__tile b.ok, .photo-tips__tile b.no { font-weight: 600; }
.photo-req { border: 2px solid var(--emerald, #3F5BF5); }
.photo-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-pick label { cursor: pointer; }

/* Head strap links: on phones the question sits on its own line and the two shop buttons share the next one. */
@media (max-width: 600px) {
  .mount-links > .sub { flex-basis: 100%; }
  .mount-links > .btn { flex: 1 1 0; width: auto; }
}

/* Radios and checkboxes inside a form field keep their own size (the W-9 classification list). */
.field .check input[type=radio], .field .check input[type=checkbox] { width: auto; padding: 0; flex: none; }

/* Jobs tabs: scroll sideways without a scrollbar (no stray vertical scrollbar either). */
.jtabs { overflow-y: hidden; scrollbar-width: none; }
.jtabs::-webkit-scrollbar { display: none; }

/* Dialogs (photo crop, confirmations) sit above the tab bar and the Help button. */
.modal-bg { z-index: 300; }

/* Phones: the Help button is a compact round icon so it covers as little as possible. */
@media (max-width: 600px) {
  .hw__btn { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .hw__btn > span { font-size: 0; gap: 0; }
  .hw__btn > span svg { width: 22px; height: 22px; }
}

/* Touch targets on phones and tablets (owner, 16 Oct 2026): every button at least 44px tall; small text buttons inside a
   sentence (.tap44) get a 44px tap area without changing the line. */
@media (max-width: 900px) {
  .btn { height: auto; min-height: 44px; }
  body .cvs__chip { min-height: 44px; padding: 4px 14px; }
  body .cvs__arrow { width: 44px; height: 44px; }
  .tap44 { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .check { min-height: 44px; }
  .checkgrid .check, .modal .check { align-items: center; margin: 0; }
  .checkgrid .check input, .modal .check input { margin-top: 0; }
  .vl-toast > button:last-child { min-width: 44px; min-height: 44px; margin: -12px -12px -12px 0; }
  .vl-toast__action { min-height: 44px; }
  .seg button { min-height: 44px; }
}

/* Programmatic focus target (page heading after navigation): no visible box (owner, 16 Oct 2026). */
h1[tabindex="-1"]:focus,h1[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}