/*
==========================================================
SPOT SKETCH v1.3 — RESPONSIVE PRESENTATION
Owns viewport, mobile-shell, touch, and compact-surface presentation.

Purpose:
Defines shared responsive contracts without redesigning individual
workflows. Later mobile packages should consume these tokens and HTML
viewport attributes instead of introducing isolated breakpoint logic.
==========================================================
*/


/*
────────────────────────────────────────────
1. Responsive Runtime Tokens
────────────────────────────────────────────
*/

@supports (height:100dvh){
  :root{
    --app-viewport-height:100dvh;
    --app-layout-viewport-height:100dvh;
  }
}


/*
────────────────────────────────────────────
2. Dynamic Viewport Contract
────────────────────────────────────────────
*/

html{
  width:100%;
  height:100%;
  overflow:hidden;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

body{
  width:100%;
  height:var(--app-viewport-height);
  min-height:var(--app-viewport-height);
  overflow:hidden;
  overscroll-behavior:none;
}

#app{
  width:100%;
  height:var(--app-viewport-height);
  min-height:0;
}

main,
#stage{
  min-width:0;
  min-height:0;
}

/* Prevent browser text-size inflation from changing dense technical UI. */
input,
button,
select,
textarea{
  max-width:100%;
}


/*
────────────────────────────────────────────
3. Safe-Area Foundation
────────────────────────────────────────────
*/

#appHeader{
  margin-top:calc(var(--safe-area-top) + var(--responsive-header-top));
  margin-right:calc(var(--safe-area-right) + var(--responsive-header-inline));
  margin-bottom:var(--responsive-header-bottom);
  margin-left:calc(var(--safe-area-left) + var(--responsive-header-inline));
  padding-block:var(--responsive-header-padding-block);
  padding-inline:var(--responsive-header-padding-inline);
  gap:var(--responsive-header-gap);
}

.header-controls{
  gap:var(--responsive-control-gap);
}

.floating-calculation-button{
  bottom:calc(var(--safe-area-bottom) + 24px) !important;
}

.app-notification-stack{
  right:calc(var(--safe-area-right) + var(--responsive-notification-offset)) !important;
  bottom:calc(var(--safe-area-bottom) + var(--responsive-notification-offset)) !important;
}

.dialog-overlay,
.replace-image-overlay,
.export-workspace-overlay,
.project-manager-overlay{
  box-sizing:border-box;
  min-height:var(--app-viewport-height);
  padding-top:max(var(--responsive-surface-inset), var(--safe-area-top));
  padding-right:max(var(--responsive-surface-inset), var(--safe-area-right));
  padding-bottom:max(var(--responsive-surface-inset), var(--safe-area-bottom));
  padding-left:max(var(--responsive-surface-inset), var(--safe-area-left));
}


.metering-setup-overlay{
  box-sizing:border-box;
  min-height:var(--app-viewport-height);
  padding-top:calc(var(--safe-area-top) + var(--responsive-metering-top-inset));
  padding-right:max(24px, var(--safe-area-right));
  padding-bottom:max(24px, var(--safe-area-bottom));
  padding-left:max(24px, var(--safe-area-left));
}

.calculation-setup-overlay{
  min-height:var(--app-viewport-height);
  padding-top:calc(var(--safe-area-top) + var(--responsive-calculation-top-inset));
  padding-right:max(22px, var(--safe-area-right));
  padding-bottom:calc(var(--safe-area-bottom) + 24px);
  padding-left:max(22px, var(--safe-area-left));
}

.export-workspace,
.project-manager{
  max-height:calc(
    var(--app-viewport-height) -
    max(var(--responsive-surface-inset), var(--safe-area-top)) -
    max(var(--responsive-surface-inset), var(--safe-area-bottom))
  );
}

.metering-setup-panel{
  max-height:calc(
    var(--app-viewport-height) -
    var(--safe-area-top) -
    var(--responsive-metering-top-inset) -
    max(24px, var(--safe-area-bottom))
  );
}

#picker.picker-viewport-fixed{
  max-height:calc(
    var(--app-viewport-height) -
    var(--safe-area-top) -
    var(--safe-area-bottom) -
    24px
  ) !important;
}


/*
────────────────────────────────────────────
4. Pointer and Touch Contracts
────────────────────────────────────────────
*/

html[data-pointer="coarse"] button:not(.bubble),
html[data-pointer="hybrid"] button:not(.bubble),
html[data-pointer="coarse"] select,
html[data-pointer="hybrid"] select,
html[data-pointer="coarse"] input:not([type="checkbox"]):not([type="radio"]),
html[data-pointer="hybrid"] input:not([type="checkbox"]):not([type="radio"]){
  min-height:var(--responsive-touch-target);
}

html[data-pointer="coarse"] .picker-option,
html[data-pointer="hybrid"] .picker-option,
html[data-pointer="coarse"] .add-menu-item,
html[data-pointer="hybrid"] .add-menu-item{
  min-height:var(--responsive-touch-target);
}

html[data-pointer="coarse"] button,
html[data-pointer="hybrid"] button{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Editing with a software keyboard should not leave the workflow action
   floating above form fields. The action returns after the keyboard closes. */
html[data-keyboard="visible"] .floating-calculation-button{
  opacity:0 !important;
  pointer-events:none !important;
}


/*
────────────────────────────────────────────
5. Breakpoint Contracts
────────────────────────────────────────────
*/

/* Small laptop: preserve the desktop shell while reducing unused chrome. */
@media (max-width:1280px){
  :root{
    --responsive-app-gutter:14px;
    --responsive-surface-inset:18px;
    --responsive-header-top:10px;
    --responsive-header-bottom:9px;
    --responsive-header-inline:14px;
    --responsive-header-padding-inline:14px;
    --responsive-header-gap:10px;
    --responsive-control-gap:8px;
  }

  #appHeader{
    grid-template-columns:auto minmax(0,1fr) auto;
  }

  .header-controls{
    min-width:0;
  }
}

/* Tablet contract: panels stay inset, controls become touch-sized and the
   next package may replace the header without changing surface geometry. */
@media (max-width:900px){
  :root{
    --responsive-app-gutter:12px;
    --responsive-surface-inset:12px;
    --responsive-header-top:8px;
    --responsive-header-bottom:8px;
    --responsive-header-inline:10px;
    --responsive-header-padding-inline:12px;
    --responsive-header-padding-block:8px;
    --responsive-header-gap:8px;
    --responsive-control-gap:7px;
    --responsive-panel-radius:20px;
    --responsive-dialog-radius:16px;
    --responsive-metering-top-inset:76px;
    --responsive-calculation-top-inset:72px;
  }

  .dialog,
  .replace-image-dialog,
  .export-workspace,
  .project-manager,
  .metering-setup-panel{
    border-radius:var(--responsive-panel-radius);
  }

  .dialog{
    border-radius:var(--responsive-dialog-radius);
  }

  .export-workspace-overlay,
  .project-manager-overlay,
  .replace-image-overlay,
  .dialog-overlay{
    padding-top:max(var(--responsive-surface-inset), var(--safe-area-top));
    padding-right:max(var(--responsive-surface-inset), var(--safe-area-right));
    padding-bottom:max(var(--responsive-surface-inset), var(--safe-area-bottom));
    padding-left:max(var(--responsive-surface-inset), var(--safe-area-left));
  }
}

/* Mobile contract: this is a foundation, not yet the final mobile shell.
   It guarantees correct viewport, safe-area, scroll and touch geometry. */
@media (max-width:620px){
  :root{
    --responsive-app-gutter:8px;
    --responsive-surface-inset:8px;
    --responsive-header-top:6px;
    --responsive-header-bottom:6px;
    --responsive-header-inline:8px;
    --responsive-header-padding-inline:10px;
    --responsive-header-padding-block:7px;
    --responsive-header-gap:6px;
    --responsive-control-gap:6px;
    --responsive-panel-radius:18px;
    --responsive-dialog-radius:16px;
    --responsive-notification-offset:12px;
    --responsive-metering-top-inset:64px;
    --responsive-calculation-top-inset:60px;
  }

  .floating-calculation-button{
    left:calc(var(--safe-area-left) + var(--responsive-mobile-action-offset));
    right:calc(var(--safe-area-right) + var(--responsive-mobile-action-offset));
    bottom:calc(var(--safe-area-bottom) + var(--responsive-mobile-action-offset)) !important;
  }

  .app-notification-stack{
    left:calc(var(--safe-area-left) + var(--responsive-notification-offset)) !important;
    right:calc(var(--safe-area-right) + var(--responsive-notification-offset)) !important;
    bottom:calc(var(--safe-area-bottom) + var(--responsive-notification-offset)) !important;
    width:auto !important;
  }

  .dialog-overlay,
  .replace-image-overlay,
  .export-workspace-overlay,
  .project-manager-overlay{
    padding-top:max(var(--responsive-surface-inset), var(--safe-area-top));
    padding-right:max(var(--responsive-surface-inset), var(--safe-area-right));
    padding-bottom:max(var(--responsive-surface-inset), var(--safe-area-bottom));
    padding-left:max(var(--responsive-surface-inset), var(--safe-area-left));
  }


  .metering-setup-overlay{
    padding-top:calc(var(--safe-area-top) + var(--responsive-metering-top-inset));
    padding-right:max(var(--responsive-surface-inset), var(--safe-area-right));
    padding-bottom:max(var(--responsive-surface-inset), var(--safe-area-bottom));
    padding-left:max(var(--responsive-surface-inset), var(--safe-area-left));
  }

  .dialog,
  .replace-image-dialog{
    width:100%;
    max-width:100%;
  }
}


/*
────────────────────────────────────────────
6. Orientation and Accessibility Contracts
────────────────────────────────────────────
*/

html[data-viewport-size="mobile"][data-orientation="landscape"]{
  --responsive-header-top:4px;
  --responsive-header-bottom:4px;
  --responsive-surface-inset:6px;
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
}


/*
==========================================================
PACKAGE 02 — MOBILE APPLICATION SHELL

Purpose:
Turns the responsive foundation into an application shell for tablet and
mobile without changing the underlying desktop workflow or data model.
==========================================================
*/


/*
────────────────────────────────────────────
7. Mobile Shell Tokens and Base Elements
────────────────────────────────────────────
*/

.mobile-only,
.mobile-header-title,
.mobile-action-bar{
  display:none;
}

.mobile-surface-portal{
  display:contents;
}

.mobile-action-bar[hidden],
.mobile-surface-heading[hidden]{
  display:none !important;
}


/*
────────────────────────────────────────────
8. Tablet and Mobile Application Chrome
────────────────────────────────────────────
*/

@media (max-width:900px){
  body.mobile-shell-active{
    --mobile-shell-inline:max(10px,var(--safe-area-left));
  }

  body.mobile-shell-active #appHeader{
    position:relative;
    z-index:var(--layer-header);
    margin:
      calc(var(--safe-area-top) + 8px)
      calc(var(--safe-area-right) + 10px)
      8px
      calc(var(--safe-area-left) + 10px);
    padding:10px 12px;
    border-radius:var(--mobile-shell-header-radius);
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "brand identifier identifier"
      "metering metering lat";
    align-items:center;
    column-gap:10px;
    row-gap:8px;
    background:rgba(248,248,250,.88);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 8px 30px rgba(0,0,0,.08);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
  }

  body.dark.mobile-shell-active #appHeader{
    background:rgba(31,31,35,.90);
    border-color:rgba(255,255,255,.09);
    box-shadow:0 10px 30px rgba(0,0,0,.22);
  }

  body.mobile-shell-active .header-logo{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
  }

  body.mobile-shell-active .mobile-header-title{
    display:block;
    color:var(--text);
    font-size:13px;
    font-weight:780;
    letter-spacing:-.015em;
    white-space:nowrap;
  }

  body.mobile-shell-active .header-controls{
    display:contents;
  }

  body.mobile-shell-active .add-wrap,
  body.mobile-shell-active .project-info-wrap{
    display:contents;
  }

  body.mobile-shell-active #addBtn,
  body.mobile-shell-active #projectInfoBtn,
  body.mobile-shell-active #locationBtn,
  body.mobile-shell-active #exportBtn,
  body.mobile-shell-active #themeBtn{
    display:none !important;
  }

  body.mobile-shell-active .image-identifier-wrap{
    width:100%;
    display:block;
  }

  body.mobile-shell-active .image-identifier-wrap > #imageIdentifier{
    width:100%;
    height:38px;
    padding:0 13px;
    border-radius:13px;
    background:rgba(120,120,128,.075);
    border-color:rgba(0,0,0,.075);
    font-size:13px;
    font-weight:620;
  }

  body.dark.mobile-shell-active .image-identifier-wrap > #imageIdentifier{
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.09);
  }

  body.mobile-shell-active #initialMeteringDisplay{
    justify-self:start;
    min-width:0;
    max-width:100%;
    height:34px;
    min-height:34px;
    padding:0 11px;
    overflow:hidden;
    border-radius:12px;
    font-size:11px;
  }

  body.mobile-shell-active #initialMeteringDisplay .initial-metering-value{
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body.mobile-shell-active #drBtn{
    justify-self:end;
    width:auto;
    min-width:64px;
    height:34px;
    margin:0;
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(120,120,128,.055);
    font-size:11px;
    font-weight:720;
  }

  html[data-metering-ready="false"] body.mobile-shell-active #drBtn{
    display:none;
  }

  body.mobile-shell-active main{
    padding-bottom:calc(
      var(--mobile-action-bar-height) +
      var(--safe-area-bottom) +
      var(--mobile-action-bar-gap)
    );
  }

  body.mobile-shell-active .mobile-action-bar{
    position:fixed;
    z-index:var(--mobile-shell-z);
    left:50%;
    right:auto;
    bottom:calc(var(--safe-area-bottom) + 8px);
    width:min(620px,calc(100% - var(--safe-area-left) - var(--safe-area-right) - 20px));
    min-height:64px;
    padding:6px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
    border:1px solid rgba(0,0,0,.10);
    border-radius:22px;
    background:rgba(250,250,251,.92);
    box-shadow:0 14px 42px rgba(0,0,0,.17);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    transform:translateX(-50%);
    opacity:1;
    transition:
      opacity var(--motion-standard,220ms) ease,
      transform var(--motion-panel,280ms) cubic-bezier(.2,.8,.2,1);
  }

  body.dark.mobile-shell-active .mobile-action-bar{
    background:rgba(31,31,35,.94);
    border-color:rgba(255,255,255,.10);
    box-shadow:0 16px 46px rgba(0,0,0,.34);
  }

  body.mobile-shell-active .mobile-action-bar.is-suppressed{
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,14px) scale(.985);
  }

  body.mobile-shell-active .mobile-action-button{
    width:100%;
    min-width:0;
    height:52px;
    min-height:52px;
    padding:5px 3px 4px;
    border:0;
    border-radius:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    background:transparent;
    color:var(--muted);
    font-size:9px;
    font-weight:690;
    line-height:1;
    letter-spacing:.01em;
    transition:
      background var(--motion-fast,140ms) ease,
      color var(--motion-fast,140ms) ease,
      opacity var(--motion-fast,140ms) ease;
  }

  body.mobile-shell-active .mobile-action-button svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  body.mobile-shell-active .mobile-action-button:hover,
  body.mobile-shell-active .mobile-action-button:focus-visible,
  body.mobile-shell-active .mobile-action-button.is-active{
    background:rgba(10,132,255,.095);
    color:var(--accent);
  }

  body.dark.mobile-shell-active .mobile-action-button:hover,
  body.dark.mobile-shell-active .mobile-action-button:focus-visible,
  body.dark.mobile-shell-active .mobile-action-button.is-active{
    background:rgba(10,132,255,.18);
    color:#77b8ff;
  }

  body.mobile-shell-active .mobile-action-button:disabled{
    opacity:.34;
    cursor:default;
  }

  body.mobile-shell-active .mobile-theme-sun{
    display:none;
  }

  body.mobile-shell-active .mobile-action-button.is-dark-active .mobile-theme-moon{
    display:none;
  }

  body.mobile-shell-active .mobile-action-button.is-dark-active .mobile-theme-sun{
    display:block;
  }

  body.mobile-shell-active .floating-calculation-button{
    z-index:calc(var(--mobile-shell-z) + 1);
    bottom:calc(
      var(--safe-area-bottom) +
      var(--mobile-action-bar-height) +
      17px
    ) !important;
  }

  html[data-keyboard="visible"] body.mobile-shell-active main{
    padding-bottom:0;
  }
}


/*
────────────────────────────────────────────
9. Mobile Bottom Sheets and Fullscreen Surfaces
────────────────────────────────────────────
*/

@media (max-width:900px){
  body.mobile-shell-active .mobile-only{
    display:flex;
  }

  body.mobile-shell-active .mobile-surface-heading{
    min-height:56px;
    padding:10px 12px 12px;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-bottom:1px solid var(--border);
  }

  body.mobile-shell-active .mobile-surface-heading > div{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  body.mobile-shell-active .mobile-surface-heading strong{
    color:var(--text);
    font-size:17px;
    font-weight:780;
    line-height:1.2;
  }

  body.mobile-shell-active .mobile-surface-eyebrow{
    color:var(--muted);
    font-size:9px;
    font-weight:760;
    letter-spacing:.075em;
    text-transform:uppercase;
  }

  body.mobile-shell-active .mobile-surface-close{
    width:36px;
    min-width:36px;
    height:36px;
    padding:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(120,120,128,.08);
    color:var(--muted);
    font-size:22px;
    font-weight:330;
    line-height:1;
  }

  body.mobile-shell-active .mobile-surface-close:hover{
    background:rgba(255,59,48,.10);
    color:var(--red);
  }

  body.mobile-shell-active #mobileSurfacePortal > .add-menu{
    position:fixed !important;
    z-index:var(--mobile-sheet-z) !important;
    left:max(10px,var(--safe-area-left)) !important;
    right:max(10px,var(--safe-area-right)) !important;
    top:auto !important;
    bottom:calc(
      var(--safe-area-bottom) +
      var(--mobile-action-bar-height) +
      16px
    ) !important;
    width:auto !important;
    max-height:min(62vh,520px) !important;
    padding:8px 10px 12px !important;
    border-radius:var(--mobile-shell-surface-radius) !important;
    background:rgba(250,250,251,.98) !important;
    border:1px solid rgba(0,0,0,.10) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.25) !important;
    transform-origin:bottom center;
  }

  body.dark.mobile-shell-active #mobileSurfacePortal > .add-menu{
    background:rgba(31,31,35,.985) !important;
    border-color:rgba(255,255,255,.10) !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .add-menu .add-section{
    padding:8px 0 0;
    gap:4px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .add-menu .add-menu-item{
    min-height:46px;
    height:auto;
    padding:0 14px;
    border-radius:14px;
    font-size:14px;
    font-weight:620;
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel{
    position:fixed !important;
    z-index:var(--mobile-sheet-z) !important;
    left:max(10px,var(--safe-area-left)) !important;
    right:max(10px,var(--safe-area-right)) !important;
    top:auto !important;
    bottom:calc(
      var(--safe-area-bottom) +
      var(--mobile-action-bar-height) +
      16px
    ) !important;
    width:auto !important;
    max-height:min(72vh,620px) !important;
    padding:16px !important;
    border-radius:var(--mobile-shell-surface-radius) !important;
    background:rgba(250,250,251,.985) !important;
    border:1px solid rgba(0,0,0,.10) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.25) !important;
  }

  body.dark.mobile-shell-active #mobileSurfacePortal > .location-panel{
    background:rgba(31,31,35,.985) !important;
    border-color:rgba(255,255,255,.10) !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu{
    position:fixed !important;
    z-index:calc(var(--layer-workspace) + 1) !important;
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:
      var(--safe-area-top)
      max(0px,var(--safe-area-right))
      var(--safe-area-bottom)
      max(0px,var(--safe-area-left)) !important;
    overflow:auto !important;
    border:0 !important;
    border-radius:0 !important;
    transform:none !important;
    background:rgba(248,248,250,.99) !important;
    box-shadow:none !important;
  }

  body.dark.mobile-shell-active #mobileSurfacePortal > .project-info-menu{
    background:rgba(25,25,29,.995) !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu[hidden]{
    display:none !important;
  }

  body.mobile-shell-active .mobile-gear-heading{
    position:sticky;
    top:0;
    z-index:6;
    padding-left:16px;
    padding-right:16px;
    background:inherit;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu > .metadata-section{
    margin:0 12px !important;
    padding:16px 4px !important;
    border:0 !important;
    border-bottom:1px solid var(--border) !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu > .metadata-divider{
    display:none !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-footer{
    position:sticky !important;
    bottom:0 !important;
    z-index:6 !important;
    margin:0 !important;
    padding:12px 14px calc(12px + var(--safe-area-bottom)) !important;
    background:inherit !important;
    border-top:1px solid var(--border) !important;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }

  body.mobile-shell-active .export-workspace-overlay,
  body.mobile-shell-active .project-manager-overlay{
    padding:0 !important;
    align-items:stretch !important;
  }

  body.mobile-shell-active .export-workspace,
  body.mobile-shell-active .project-manager{
    width:100% !important;
    height:var(--app-viewport-height) !important;
    max-width:none !important;
    max-height:none !important;
    border:0 !important;
    border-radius:0 !important;
  }

  body.mobile-shell-active .export-workspace-header,
  body.mobile-shell-active .project-manager-header{
    padding-top:calc(14px + var(--safe-area-top)) !important;
    padding-right:max(16px,var(--safe-area-right)) !important;
    padding-left:max(16px,var(--safe-area-left)) !important;
  }

  body.mobile-shell-active .export-workspace-footer,
  body.mobile-shell-active .project-manager-footer{
    padding-bottom:calc(13px + var(--safe-area-bottom)) !important;
  }

  body.mobile-shell-active .calculation-setup-overlay{
    padding:
      calc(var(--safe-area-top) + 64px)
      max(10px,var(--safe-area-right))
      calc(var(--safe-area-bottom) + 10px)
      max(10px,var(--safe-area-left)) !important;
  }

  body.mobile-shell-active .calculation-setup-panel{
    max-height:min(74vh,620px);
    overflow:auto;
    border-radius:24px !important;
  }

  body.mobile-shell-active .metering-setup-overlay{
    padding:
      calc(var(--safe-area-top) + 8px)
      max(8px,var(--safe-area-right))
      calc(var(--safe-area-bottom) + 8px)
      max(8px,var(--safe-area-left)) !important;
  }

  body.mobile-shell-active .metering-setup-panel{
    width:100%;
    height:100%;
    max-height:none;
    border-radius:22px;
  }
}


/*
────────────────────────────────────────────
10. Mobile Portrait and Landscape Variants
────────────────────────────────────────────
*/

@media (max-width:620px){
  :root{
    --mobile-action-bar-height:68px;
  }

  body.mobile-shell-active #appHeader{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "brand identifier"
      "metering lat";
  }

  body.mobile-shell-active .mobile-action-bar{
    left:calc(var(--safe-area-left) + 8px);
    right:calc(var(--safe-area-right) + 8px);
    width:auto;
    transform:none;
  }

  body.mobile-shell-active .mobile-action-bar.is-suppressed{
    transform:translateY(14px) scale(.985);
  }

  body.mobile-shell-active #initialMeteringDisplay{
    max-width:calc(100vw - 112px);
  }

  body.mobile-shell-active .floating-calculation-button{
    left:calc(var(--safe-area-left) + 12px) !important;
    right:calc(var(--safe-area-right) + 12px) !important;
    width:auto !important;
    bottom:calc(
      var(--safe-area-bottom) +
      var(--mobile-action-bar-height) +
      15px
    ) !important;
  }
}

html[data-viewport-size="mobile"][data-orientation="landscape"] body.mobile-shell-active #appHeader{
  margin-top:calc(var(--safe-area-top) + 4px);
  margin-bottom:4px;
  padding:6px 10px;
  grid-template-columns:auto minmax(160px,1fr) auto auto;
  grid-template-areas:"brand identifier metering lat";
  row-gap:0;
  border-radius:18px;
}

html[data-viewport-size="mobile"][data-orientation="landscape"] body.mobile-shell-active .mobile-header-title{
  display:none;
}

html[data-viewport-size="mobile"][data-orientation="landscape"] body.mobile-shell-active #initialMeteringDisplay{
  max-width:220px;
}

html[data-viewport-size="mobile"][data-orientation="landscape"] body.mobile-shell-active .mobile-action-bar{
  min-height:52px;
  padding:4px;
  border-radius:18px;
}

html[data-viewport-size="mobile"][data-orientation="landscape"] body.mobile-shell-active .mobile-action-button{
  height:44px;
  min-height:44px;
  padding:4px;
}

html[data-viewport-size="mobile"][data-orientation="landscape"] body.mobile-shell-active .mobile-action-label{
  display:none;
}

html[data-viewport-size="mobile"][data-orientation="landscape"] body.mobile-shell-active .mobile-action-button svg{
  width:19px;
  height:19px;
}

html[data-viewport-size="mobile"][data-orientation="landscape"] body.mobile-shell-active main{
  padding-bottom:calc(56px + var(--safe-area-bottom));
}


/*
────────────────────────────────────────────
11. Shell Motion and Reduced Motion
────────────────────────────────────────────
*/

@keyframes mobileSheetEnter{
  from{opacity:0;transform:translateY(16px) scale(.992)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media (max-width:900px){
  body.mobile-shell-active #mobileSurfacePortal > .add-menu:not([hidden]),
  body.mobile-shell-active #mobileSurfacePortal > .location-panel:not([hidden]){
    animation:mobileSheetEnter var(--motion-panel,280ms) cubic-bezier(.2,.8,.2,1) both !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .mobile-action-bar,
  .mobile-action-button,
  #mobileSurfacePortal > .add-menu,
  #mobileSurfacePortal > .location-panel{
    animation:none !important;
    transition:none !important;
  }
}

/* A rotated touch phone can enter the tablet width band. Compact landscape
   chrome therefore also keys off touch capability and orientation. */
@media (max-width:900px) and (max-height:520px){
  html[data-orientation="landscape"][data-touch="true"] body.mobile-shell-active #appHeader{
    margin-top:calc(var(--safe-area-top) + 4px);
    margin-bottom:4px;
    padding:6px 10px;
    grid-template-columns:auto minmax(160px,1fr) auto auto;
    grid-template-areas:"brand identifier metering lat";
    row-gap:0;
    border-radius:18px;
  }

  html[data-orientation="landscape"][data-touch="true"] body.mobile-shell-active .mobile-header-title,
  html[data-orientation="landscape"][data-touch="true"] body.mobile-shell-active .mobile-action-label{
    display:none;
  }

  html[data-orientation="landscape"][data-touch="true"] body.mobile-shell-active #initialMeteringDisplay{
    max-width:220px;
  }

  html[data-orientation="landscape"][data-touch="true"] body.mobile-shell-active .mobile-action-bar{
    min-height:52px;
    padding:4px;
    border-radius:18px;
  }

  html[data-orientation="landscape"][data-touch="true"] body.mobile-shell-active .mobile-action-button{
    height:44px;
    min-height:44px;
    padding:4px;
  }

  html[data-orientation="landscape"][data-touch="true"] body.mobile-shell-active .mobile-action-button svg{
    width:19px;
    height:19px;
  }

  html[data-orientation="landscape"][data-touch="true"] body.mobile-shell-active main{
    padding-bottom:calc(56px + var(--safe-area-bottom));
  }
}


/*
==========================================================
PACKAGE 03 — RECORDING TOUCH WORKFLOW

Purpose:
Touch-safe marker hit areas, mobile Recording pickers, compact bubble
presentation, and explicit touch move guidance.
==========================================================
*/

html[data-touch="true"] #photoCanvas{
  touch-action:manipulation;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
}

html[data-touch="true"] .bubble{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* The visible bubble stays compact while its tappable area grows invisibly. */
html[data-pointer="coarse"] .bubble::after,
html[data-pointer="hybrid"] .bubble::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:16px;
}

@media (max-width:900px){
  body.mobile-shell-active #picker.picker-mobile-sheet{
    position:fixed !important;
    z-index:calc(var(--layer-autocomplete) + 30) !important;
    left:max(10px,var(--safe-area-left)) !important;
    right:max(10px,var(--safe-area-right)) !important;
    top:auto !important;
    bottom:calc(
      var(--safe-area-bottom) +
      var(--mobile-action-bar-height) +
      var(--recording-mobile-picker-gap)
    ) !important;
    width:auto !important;
    max-width:none !important;
    max-height:min(
      var(--recording-mobile-picker-max-height),
      calc(var(--app-viewport-height) - var(--mobile-action-bar-height) - var(--safe-area-top) - var(--safe-area-bottom) - 34px)
    ) !important;
    padding:8px !important;
    border-radius:22px !important;
    overflow:auto !important;
    overscroll-behavior:contain;
    box-shadow:0 24px 70px rgba(0,0,0,.26),0 4px 18px rgba(0,0,0,.12) !important;
    animation:recordingPickerSheetEnter var(--motion-panel,280ms) cubic-bezier(.2,.8,.2,1) both !important;
  }

  body.mobile-shell-active #picker.picker-mobile-sheet.closing{
    animation:recordingPickerSheetExit 160ms cubic-bezier(.4,0,.8,.2) forwards !important;
  }

  body.mobile-shell-active #picker.picker-mobile-sheet .picker-title{
    position:sticky;
    top:-8px;
    z-index:3;
    margin:-8px -8px 6px;
    padding:13px 16px 11px;
    background:inherit;
    border-bottom:1px solid var(--border);
    font-size:13px;
    letter-spacing:.015em;
  }

  body.mobile-shell-active #picker.picker-mobile-sheet .picker-option{
    min-height:48px;
    height:auto;
    margin:2px 0;
    padding:8px 14px;
    border-radius:15px;
    font-size:15px;
    line-height:1.2;
  }

  body.mobile-shell-active #picker.picker-mobile-aperture{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:start;
    gap:2px;
  }

  body.mobile-shell-active #picker.picker-mobile-aperture .picker-title{
    grid-column:1 / -1;
  }

  body.mobile-shell-active #picker.picker-mobile-aperture .picker-option{
    min-width:0;
  }

  body.mobile-shell-active #picker.picker-mobile-marker-menu .picker-option{
    text-align:left;
    justify-content:flex-start;
  }

  body.mobile-shell-active .bubble{
    min-width:88px;
    min-height:46px;
    padding:4px 8px 6px;
    border-radius:10px;
  }

  body.mobile-shell-active .bubble-recording .value{
    font-size:14px;
  }

  body.mobile-shell-active .bubble .num{
    font-size:9px;
  }

  body.touch-marker-move-active,
  body.touch-marker-move-active *{
    cursor:auto !important;
  }

  body.touch-marker-move-active #photoCanvas{
    cursor:crosshair !important;
  }

  body.touch-marker-move-active #moveCursor{
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:calc(
      var(--safe-area-bottom) +
      var(--mobile-action-bar-height) +
      15px
    ) !important;
    min-height:42px;
    padding:7px 10px;
    gap:8px;
    border:1px solid rgba(10,132,255,.18);
    border-radius:999px;
    background:rgba(250,250,251,.94);
    box-shadow:0 10px 30px rgba(0,0,0,.16);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transform:translateX(-50%) !important;
  }

  body.dark.touch-marker-move-active #moveCursor{
    background:rgba(31,31,35,.95);
    border-color:rgba(92,190,255,.24);
    box-shadow:0 12px 34px rgba(0,0,0,.34);
  }

  body.touch-marker-move-active .move-cursor-dot{
    display:none;
  }

  body.touch-marker-move-active .move-cursor-label{
    margin:0;
    padding:0 5px;
    background:transparent;
    font-size:13px;
  }
}

@media (max-width:900px) and (max-height:520px){
  :root{
    --recording-mobile-picker-max-height:64vh;
  }

  body.mobile-shell-active #picker.picker-mobile-sheet{
    bottom:calc(var(--safe-area-bottom) + 58px) !important;
  }

  body.mobile-shell-active #picker.picker-mobile-aperture{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  body.touch-marker-move-active #moveCursor{
    bottom:calc(var(--safe-area-bottom) + 58px) !important;
  }
}

@keyframes recordingPickerSheetEnter{
  from{opacity:0;transform:translateY(18px) scale(.992)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes recordingPickerSheetExit{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(14px) scale(.992)}
}

@media (prefers-reduced-motion:reduce){
  #picker.picker-mobile-sheet{
    animation:none !important;
  }
}


/*
==========================================================
PACKAGE 04 — CALCULATION MOBILE LAYOUT
==========================================================
*/

/* Calculation Setup candidates should look invitational rather than disabled. */
body.calculation-setup-active .bubble-calculation-candidate:not(.bubble-calculation-reference){
  opacity:.78;
  transform:scale(.995);
  animation:
    calculationCandidateInvite 1.75s cubic-bezier(.4,0,.2,1)
    var(--calculation-candidate-delay,0ms) infinite alternate;
}

body.calculation-setup-active .bubble-calculation-candidate:not(.bubble-calculation-reference):hover,
body.calculation-setup-active .bubble-calculation-candidate:not(.bubble-calculation-reference):focus-visible{
  opacity:1;
  transform:scale(1.025);
  animation-play-state:paused;
}

@keyframes calculationCandidateInvite{
  from{
    opacity:.70;
    box-shadow:0 5px 13px rgba(0,0,0,.10);
  }
  to{
    opacity:1;
    box-shadow:
      0 0 0 3px rgba(42,167,161,.12),
      0 8px 20px rgba(0,0,0,.16);
  }
}

.calculation-mobile-close-symbol{
  display:none;
}

.calculation-guide-overlay[hidden]{
  display:none !important;
}

.calculation-guide-overlay{
  position:fixed;
  inset:0;
  z-index:calc(var(--layer-dialog) + 30);
  display:grid;
  place-items:center;
  padding:
    max(20px,var(--safe-area-top))
    max(18px,var(--safe-area-right))
    max(20px,var(--safe-area-bottom))
    max(18px,var(--safe-area-left));
  background:rgba(17,17,20,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:calculationGuideOverlayIn var(--motion-standard,220ms) ease both;
}

.calculation-guide-dialog{
  width:min(420px,100%);
  padding:20px;
  border:1px solid rgba(42,167,161,.24);
  border-radius:22px;
  background:rgba(252,252,253,.985);
  color:var(--text);
  box-shadow:0 28px 80px rgba(0,0,0,.32);
  animation:calculationGuideDialogIn var(--motion-panel,280ms) cubic-bezier(.2,.8,.2,1) both;
}

body.dark .calculation-guide-dialog{
  background:rgba(38,38,43,.99);
  border-color:rgba(50,184,176,.30);
}

.calculation-guide-eyebrow{
  display:inline-block;
  margin-bottom:8px;
  color:#2aa7a1;
  font-size:9px;
  font-weight:820;
  letter-spacing:.09em;
  text-transform:uppercase;
}

body.dark .calculation-guide-eyebrow{
  color:#8fe0dc;
}

.calculation-guide-dialog h2{
  margin:0;
  font-size:23px;
  line-height:1.15;
  letter-spacing:-.025em;
}

.calculation-guide-message{
  margin-top:14px;
  display:grid;
  gap:9px;
}

.calculation-guide-message p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.calculation-guide-message p:nth-child(2){
  color:var(--text);
  font-weight:680;
}

.calculation-guide-progress{
  height:3px;
  margin-top:18px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(120,120,128,.14);
}

.calculation-guide-progress span{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:#2aa7a1;
  transform-origin:left center;
  animation:calculationGuideCountdown 10s linear forwards;
}

.calculation-guide-actions{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.calculation-guide-actions small{
  color:var(--muted);
  font-size:10px;
  line-height:1.3;
}

.calculation-guide-ok-button{
  width:auto;
  min-width:86px;
  height:40px;
  padding:0 16px;
  border-color:#2aa7a1;
  background:#2aa7a1;
  color:white;
  font-size:11px;
  font-weight:790;
  letter-spacing:.035em;
}

body.dark .calculation-guide-ok-button{
  border-color:#32b8b0;
  background:#32b8b0;
  color:#101415;
}

@keyframes calculationGuideOverlayIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes calculationGuideDialogIn{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes calculationGuideCountdown{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}

@media (max-width:900px){
  /* The normal mobile action bar yields the lower edge to Calculation. */
  html[data-mobile-surface="calculation"] body.mobile-shell-active main,
  html[data-mobile-surface="calculation-setup"] body.mobile-shell-active main{
    padding-bottom:0;
  }

  body.mobile-shell-active .calculation-desktop-action-label{
    display:none;
  }

  body.mobile-shell-active .calculation-mobile-close-symbol{
    display:block;
    font-size:21px;
    font-weight:350;
    line-height:1;
  }

  /* Compact Calculation Setup action strip. */
  body.mobile-shell-active .calculation-setup-overlay{
    padding:
      calc(var(--safe-area-top) + 58px)
      max(8px,var(--safe-area-right))
      calc(var(--safe-area-bottom) + 8px)
      max(8px,var(--safe-area-left)) !important;
  }

  body.mobile-shell-active .calculation-setup-panel{
    width:100% !important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "setup-heading setup-actions"
      "setup-selection setup-selection";
    align-items:center;
    gap:8px 10px !important;
    padding:10px !important;
    overflow:visible !important;
    border-radius:19px !important;
  }

  body.mobile-shell-active .calculation-setup-heading{
    grid-area:setup-heading;
    min-width:0;
    display:block !important;
  }

  body.mobile-shell-active .calculation-setup-eyebrow{
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    font-size:10px;
    letter-spacing:.085em;
  }

  body.mobile-shell-active .calculation-setup-selection{
    grid-area:setup-selection;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  body.mobile-shell-active .calculation-setup-selection > div{
    min-height:38px;
    padding:6px 9px;
    border-radius:11px;
  }

  body.mobile-shell-active .calculation-setup-selection span{
    margin-bottom:2px;
    font-size:7px;
  }

  body.mobile-shell-active .calculation-setup-selection strong{
    font-size:10px;
  }

  body.mobile-shell-active .calculation-setup-actions{
    grid-area:setup-actions;
    display:flex !important;
    justify-content:flex-end;
    gap:7px;
  }

  body.mobile-shell-active .calculation-setup-secondary-button{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    padding:0 !important;
    display:grid;
    place-items:center;
    border-radius:50% !important;
  }

  body.mobile-shell-active .calculation-setup-primary-button{
    width:auto !important;
    min-width:128px !important;
    padding:0 13px !important;
    font-size:10px;
  }

  /* Active Calculation is a compact control dock, not an information card. */
  body.mobile-shell-active .calculation-status{
    position:fixed !important;
    z-index:calc(var(--mobile-sheet-z) - 5) !important;
    left:max(8px,var(--safe-area-left)) !important;
    right:max(8px,var(--safe-area-right)) !important;
    bottom:calc(var(--safe-area-bottom) + 8px) !important;
    width:auto !important;
    max-width:none !important;
    grid-template-rows:auto auto !important;
    row-gap:7px !important;
    padding:9px !important;
    border-radius:19px !important;
    transform:none !important;
  }

  body.mobile-shell-active .calculation-status-heading{
    min-height:28px;
    padding:0 1px 4px !important;
    border-bottom:0 !important;
  }

  body.mobile-shell-active .calculation-status-copy{
    display:block;
  }

  body.mobile-shell-active .calculation-status-copy > span{
    padding:0;
    background:transparent;
    font-size:9px;
  }

  body.mobile-shell-active .calculation-exit-button{
    width:34px;
    min-width:34px;
    height:34px;
    padding:0;
    display:grid;
    place-items:center;
    border-radius:50%;
  }

  body.mobile-shell-active .calculated-exposure-row{
    grid-template-columns:88px minmax(0,1fr) !important;
    align-items:center !important;
    gap:8px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  body.mobile-shell-active .calculation-control-mode{
    width:88px;
    height:38px;
    padding:0 7px;
    grid-template-columns:15px 1fr 15px;
    gap:4px;
    justify-self:stretch;
  }

  body.mobile-shell-active .calculated-exposure-fields{
    grid-template-columns:repeat(3,minmax(0,1fr)) minmax(58px,.72fr) !important;
    column-gap:5px !important;
  }

  body.mobile-shell-active .calculated-exposure-field,
  body.mobile-shell-active .calculation-save-actual-button{
    min-width:0;
    height:38px;
    padding:0 7px;
    border-radius:11px;
    font-size:10px;
  }

  body.mobile-shell-active .calculation-save-actual-button{
    margin-left:5px !important;
    letter-spacing:.025em;
  }

  /* Calculation pickers temporarily replace the compact dock. */
  body.mobile-shell-active:has(#picker.picker-mobile-calculation:not([hidden])) .calculation-status,
  body.mobile-shell-active:has(#picker.picker-mobile-calculation:not([hidden])) .calculation-setup-panel{
    opacity:0;
    pointer-events:none;
    transform:translateY(8px) scale(.99) !important;
  }

  body.mobile-shell-active #picker.picker-mobile-calculation{
    bottom:calc(var(--safe-area-bottom) + 8px) !important;
    max-height:min(
      70vh,
      calc(var(--app-viewport-height) - var(--safe-area-top) - var(--safe-area-bottom) - 80px)
    ) !important;
  }

  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-iso"],
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-shutter"],
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-aperture"]{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:start;
    gap:2px;
  }

  body.mobile-shell-active #picker.picker-mobile-calculation .picker-title{
    grid-column:1 / -1;
  }

  body.mobile-shell-active #picker.picker-mobile-zone,
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculation-marker-menu"]{
    display:block !important;
  }

  body.mobile-shell-active #picker.picker-mobile-zone .picker-option{
    display:flex;
    justify-content:space-between;
    gap:14px;
  }

  body.mobile-shell-active #picker.picker-mobile-zone .picker-option small{
    color:var(--muted);
    font-size:10px;
    text-align:right;
  }
}

@media (max-width:420px){
  body.mobile-shell-active .calculated-exposure-row{
    grid-template-columns:78px minmax(0,1fr) !important;
  }

  body.mobile-shell-active .calculation-control-mode{
    width:78px;
  }

  body.mobile-shell-active .calculated-exposure-field,
  body.mobile-shell-active .calculation-save-actual-button{
    padding-inline:5px;
    font-size:9px;
  }
}

@media (max-width:900px) and (max-height:520px){
  body.mobile-shell-active .calculation-status{
    left:max(6px,var(--safe-area-left)) !important;
    right:max(6px,var(--safe-area-right)) !important;
    bottom:calc(var(--safe-area-bottom) + 5px) !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    grid-template-rows:auto !important;
    align-items:center;
    gap:8px !important;
    padding:6px 8px !important;
  }

  body.mobile-shell-active .calculation-status-heading{
    min-width:82px;
    padding:0 !important;
  }

  body.mobile-shell-active .calculated-exposure-row{
    grid-template-columns:78px minmax(0,1fr) !important;
  }

  body.mobile-shell-active .calculation-setup-panel{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    grid-template-areas:"setup-heading setup-selection setup-actions" !important;
    padding:7px 8px !important;
  }

  body.mobile-shell-active .calculation-setup-selection > div{
    min-height:34px;
    padding:4px 7px;
  }

  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-iso"],
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-shutter"],
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-aperture"]{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

@media (prefers-reduced-motion:reduce){
  body.calculation-setup-active .bubble-calculation-candidate,
  .calculation-guide-overlay,
  .calculation-guide-dialog,
  .calculation-guide-progress span{
    animation:none !important;
  }

  body.calculation-setup-active .bubble-calculation-candidate:not(.bubble-calculation-reference){
    opacity:.9;
  }
}

/* Responsive display rules must never override the native hidden contract. */
@media (max-width:900px){
  body.mobile-shell-active .calculation-status[hidden]{
    display:none !important;
  }
}

/*
==========================================================
PACKAGE 05 — PROJECT AND METADATA SURFACES

Purpose:
Finishes the mobile Gear, Location, Project Manager and Add / Open / Save
editing surfaces while keeping desktop presentation unchanged.
==========================================================
*/

.mobile-add-project-context,
.project-manager-mobile-order{
  display:none;
}

@media (max-width:900px){
  /* ----------------------------------------------------
     Add / Open / Save bottom sheet
     ---------------------------------------------------- */
  body.mobile-shell-active .mobile-add-project-context{
    display:grid;
    gap:2px;
    margin:4px 2px 8px;
    padding:12px 14px;
    border:1px solid rgba(10,132,255,.14);
    border-radius:15px;
    background:rgba(10,132,255,.055);
  }

  body.dark.mobile-shell-active .mobile-add-project-context{
    border-color:rgba(95,190,255,.18);
    background:rgba(10,132,255,.10);
  }

  body.mobile-shell-active .mobile-add-context-label{
    color:var(--muted);
    font-size:9px;
    font-weight:760;
    letter-spacing:.07em;
    text-transform:uppercase;
  }

  body.mobile-shell-active .mobile-add-context-name{
    min-width:0;
    overflow:hidden;
    color:var(--text);
    font-size:14px;
    font-weight:760;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.mobile-shell-active .mobile-add-context-detail{
    min-width:0;
    overflow:hidden;
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.mobile-shell-active #mobileSurfacePortal > .add-menu .add-section-title{
    padding:9px 12px 5px;
    font-size:9px;
    font-weight:780;
    letter-spacing:.08em;
  }

  body.mobile-shell-active #mobileSurfacePortal > .add-menu .add-menu-divider{
    margin:7px 10px;
  }

  /* ----------------------------------------------------
     Gear Settings fullscreen editor
     ---------------------------------------------------- */
  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu{
    display:block !important;
    scroll-padding-bottom:calc(84px + var(--safe-area-bottom));
    -webkit-overflow-scrolling:touch;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-title-row{
    min-height:36px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-title-row > span{
    font-size:13px;
    font-weight:760;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-input,
  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-notes,
  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .range-pill{
    min-height:48px;
    border-radius:14px;
    font-size:16px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-notes{
    min-height:112px;
    padding:12px 13px;
    line-height:1.45;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .notes-button{
    width:42px;
    min-width:42px;
    height:42px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-range-row{
    gap:10px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-range-control{
    min-width:0;
    flex:1;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-range-control > span{
    font-size:10px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-footer{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:10px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-footer-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-footer-button{
    width:100%;
    min-width:0;
    min-height:46px;
    border-radius:14px;
  }

  /* ----------------------------------------------------
     Mobile Gear library autocomplete
     ---------------------------------------------------- */
  .project-library-autocomplete.project-library-autocomplete-mobile{
    z-index:calc(var(--layer-autocomplete) + 40) !important;
    padding:7px !important;
    overflow:auto !important;
    overscroll-behavior:contain;
    border-radius:17px !important;
    background:rgba(250,250,251,.99) !important;
    box-shadow:0 18px 50px rgba(0,0,0,.24) !important;
  }

  body.dark .project-library-autocomplete.project-library-autocomplete-mobile{
    background:rgba(35,35,39,.995) !important;
    border-color:rgba(255,255,255,.12) !important;
  }

  .project-library-autocomplete.project-library-autocomplete-mobile .project-library-autocomplete-row{
    min-height:46px;
    height:auto;
  }

  .project-library-autocomplete.project-library-autocomplete-mobile .project-library-autocomplete-label{
    min-height:44px;
    height:auto;
    padding:8px 12px;
    border-radius:13px;
    font-size:14px;
  }

  .project-library-autocomplete.project-library-autocomplete-mobile .project-library-autocomplete-delete{
    width:40px;
    min-width:40px;
    height:40px;
  }

  /* ----------------------------------------------------
     Location editor
     ---------------------------------------------------- */
  body.mobile-shell-active #mobileSurfacePortal > .location-panel{
    display:flex !important;
    flex-direction:column;
    overscroll-behavior:contain;
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel[hidden]{
    display:none !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel .location-panel-heading{
    flex:0 0 auto;
    margin:-4px -2px 8px;
    padding:0 2px 10px;
    border-bottom:1px solid var(--border);
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel .location-panel-heading strong{
    font-size:18px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel .location-field{
    flex:0 0 auto;
    gap:6px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel .location-field > span{
    font-size:10px;
    font-weight:740;
    letter-spacing:.045em;
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel input,
  body.mobile-shell-active #mobileSurfacePortal > .location-panel textarea{
    min-height:48px;
    border-radius:14px;
    font-size:16px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel textarea{
    min-height:118px;
    padding:12px 13px;
    resize:vertical;
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel .location-panel-actions{
    position:sticky;
    bottom:-16px;
    z-index:4;
    margin:10px -16px -16px;
    padding:12px 16px calc(12px + var(--safe-area-bottom));
    background:inherit;
    border-top:1px solid var(--border);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel .location-panel-actions button{
    min-height:46px;
    border-radius:14px;
  }

  /* ----------------------------------------------------
     Project Manager fullscreen mobile workflow
     ---------------------------------------------------- */
  body.mobile-shell-active .project-manager{
    grid-template-rows:auto auto minmax(0,1fr) auto !important;
    background:rgba(248,248,250,.995) !important;
  }

  body.dark.mobile-shell-active .project-manager{
    background:rgba(25,25,29,.998) !important;
  }

  body.mobile-shell-active .project-manager-header{
    position:relative;
    z-index:8;
    min-height:66px;
    padding-bottom:13px !important;
    background:inherit !important;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }

  body.mobile-shell-active .project-manager-brand-dot{
    width:12px;
    height:12px;
    flex-basis:12px;
  }

  body.mobile-shell-active .project-manager-heading h2{
    font-size:18px;
  }

  body.mobile-shell-active .project-manager-heading p{
    max-width:62vw;
    font-size:11px;
  }

  body.mobile-shell-active .project-manager-toolbar{
    align-items:stretch;
    gap:10px;
    padding:12px 14px;
    background:inherit;
  }

  body.mobile-shell-active .project-manager-name-field{
    max-width:none;
  }

  body.mobile-shell-active .project-manager-name-field input{
    min-height:46px;
    border-radius:14px;
    font-size:16px;
  }

  body.mobile-shell-active .project-manager-count{
    align-self:flex-end;
    margin-bottom:5px;
  }

  body.mobile-shell-active .project-manager-list{
    padding:12px 12px 18px;
    gap:11px;
    overscroll-behavior:contain;
    scroll-padding-bottom:118px;
  }

  body.mobile-shell-active .project-manager-row{
    grid-template-columns:auto 30px minmax(0,1fr);
    align-items:start;
    gap:10px;
    padding:12px;
    border-radius:var(--mobile-project-card-radius);
  }

  body.mobile-shell-active .project-manager-drag-handle{
    display:none !important;
  }

  body.mobile-shell-active .project-manager-mobile-order{
    display:flex;
    flex-direction:column;
    gap:5px;
    grid-column:1;
    grid-row:1 / span 2;
  }

  body.mobile-shell-active .project-manager-order-button{
    width:36px;
    min-width:36px;
    height:32px;
    min-height:32px;
    padding:0;
    border-radius:10px;
    background:rgba(120,120,128,.08);
    color:var(--muted);
    font-size:15px;
    line-height:1;
  }

  body.mobile-shell-active .project-manager-order-button:hover:not(.is-unavailable),
  body.mobile-shell-active .project-manager-order-button:focus-visible:not(.is-unavailable){
    background:rgba(10,132,255,.11);
    color:var(--accent);
  }

  body.mobile-shell-active .project-manager-order-button.is-unavailable{
    opacity:.28;
    pointer-events:none;
  }

  body.mobile-shell-active .project-manager-row-index{
    grid-column:2;
    grid-row:1;
  }

  body.mobile-shell-active .project-manager-row-main{
    grid-column:3;
    grid-row:1;
  }

  body.mobile-shell-active .project-manager-row-title-line{
    align-items:flex-start;
  }

  body.mobile-shell-active .project-manager-sketch-title{
    width:100%;
    min-height:42px;
    height:42px;
    padding:0 10px;
    font-size:15px;
  }

  body.mobile-shell-active .project-manager-active-badge{
    margin-top:7px;
  }

  body.mobile-shell-active .project-manager-row-meta{
    grid-template-columns:1fr 1fr;
    gap:6px 10px;
    margin-top:8px;
  }

  body.mobile-shell-active .project-manager-row-meta > div{
    display:block;
  }

  body.mobile-shell-active .project-manager-row-meta dt{
    margin-bottom:2px;
  }

  body.mobile-shell-active .project-manager-row-meta dd{
    font-size:11px;
  }

  body.mobile-shell-active .project-manager-row-actions{
    grid-column:3;
    grid-row:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:9px;
  }

  body.mobile-shell-active .project-manager-row-button{
    width:100%;
    min-height:42px;
    height:42px;
    border-radius:13px;
    font-size:12px;
  }

  body.mobile-shell-active .project-manager-footer{
    position:relative;
    z-index:8;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:10px 12px calc(10px + var(--safe-area-bottom)) !important;
    background:inherit !important;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }

  body.mobile-shell-active .project-manager-footer-actions,
  body.mobile-shell-active .project-manager-footer-left{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  body.mobile-shell-active .project-manager-footer-actions{
    order:1;
  }

  body.mobile-shell-active .project-manager-footer-left{
    order:2;
  }

  body.mobile-shell-active .project-manager-footer-button{
    width:100%;
    min-width:0;
    min-height:44px;
    height:44px;
    border-radius:14px;
    font-size:12px;
  }

  body.mobile-shell-active .project-manager-new-project-button,
  body.mobile-shell-active .project-manager-merge-button{
    color:var(--muted);
    background:transparent;
  }

  /* Nested New Spot Sketch and Merge flows fill the manager cleanly. */
  body.mobile-shell-active .spot-sketch-copy-panel,
  body.mobile-shell-active .project-merge-panel{
    padding:
      calc(10px + var(--safe-area-top))
      max(10px,var(--safe-area-right))
      calc(10px + var(--safe-area-bottom))
      max(10px,var(--safe-area-left));
    align-items:stretch;
    background:rgba(0,0,0,.42);
  }

  body.mobile-shell-active .spot-sketch-copy-card,
  body.mobile-shell-active .project-merge-card{
    width:100%;
    max-width:none;
    max-height:100%;
    margin:0;
    padding:18px;
    overflow:auto;
    border-radius:22px;
    overscroll-behavior:contain;
  }

  body.mobile-shell-active .spot-sketch-copy-source-field select,
  body.mobile-shell-active .project-merge-name-field input{
    min-height:48px;
    border-radius:14px;
    font-size:16px;
  }

  body.mobile-shell-active .spot-sketch-copy-option{
    min-height:58px;
    padding:10px 12px;
    border-radius:14px;
  }

  body.mobile-shell-active .spot-sketch-copy-actions,
  body.mobile-shell-active .project-merge-actions{
    position:sticky;
    bottom:-18px;
    margin:14px -18px -18px;
    padding:12px 18px calc(12px + var(--safe-area-bottom));
    background:inherit;
    border-top:1px solid var(--border);
  }

  body.mobile-shell-active .spot-sketch-copy-actions button,
  body.mobile-shell-active .project-merge-actions button{
    min-height:46px;
    border-radius:14px;
  }

  /* ----------------------------------------------------
     Dialogs shared by metadata and project workflows
     ---------------------------------------------------- */
  body.mobile-shell-active .dialog{
    max-height:calc(var(--app-viewport-height) - var(--safe-area-top) - var(--safe-area-bottom) - 20px);
    overflow:auto;
    overscroll-behavior:contain;
  }

  body.mobile-shell-active .dialog-buttons{
    gap:8px;
  }

  body.mobile-shell-active .dialog-button{
    min-height:46px;
    height:auto;
    padding:8px 16px;
    border-radius:14px;
  }

  /* Keyboard state: preserve content space and keep actions reachable. */
  html[data-keyboard="visible"] body.mobile-shell-active .mobile-form-editing .mobile-surface-heading,
  html[data-keyboard="visible"] body.mobile-shell-active .mobile-form-editing .project-manager-heading p{
    display:none !important;
  }

  html[data-keyboard="visible"] body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-footer,
  html[data-keyboard="visible"] body.mobile-shell-active #mobileSurfacePortal > .location-panel .location-panel-actions,
  html[data-keyboard="visible"] body.mobile-shell-active .project-manager-footer{
    padding-bottom:10px !important;
  }
}

@media (max-width:620px){
  /* Location becomes a true fullscreen metadata editor on phones. */
  body.mobile-shell-active #mobileSurfacePortal > .location-panel{
    inset:0 !important;
    width:100% !important;
    height:var(--app-viewport-height) !important;
    max-height:none !important;
    padding:
      calc(12px + var(--safe-area-top))
      max(16px,var(--safe-area-right))
      var(--safe-area-bottom)
      max(16px,var(--safe-area-left)) !important;
    border:0 !important;
    border-radius:0 !important;
    background:rgba(248,248,250,.995) !important;
    box-shadow:none !important;
  }

  body.dark.mobile-shell-active #mobileSurfacePortal > .location-panel{
    background:rgba(25,25,29,.998) !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel .location-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel .location-panel-actions{
    bottom:calc(-1 * var(--safe-area-bottom));
    margin-right:calc(-1 * max(16px,var(--safe-area-right)));
    margin-left:calc(-1 * max(16px,var(--safe-area-left)));
    padding-right:max(16px,var(--safe-area-right));
    padding-left:max(16px,var(--safe-area-left));
  }

  body.mobile-shell-active .project-manager-toolbar{
    flex-direction:column;
  }

  body.mobile-shell-active .project-manager-count{
    align-self:flex-start;
    margin:0;
  }

  body.mobile-shell-active .project-manager-row-meta{
    grid-template-columns:1fr;
  }

  body.mobile-shell-active .project-manager-heading p{
    display:none;
  }

  body.mobile-shell-active .dialog-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  body.mobile-shell-active .dialog-button{
    width:100%;
    min-width:0;
  }
}

@media (max-width:380px){
  body.mobile-shell-active .dialog-buttons,
  body.mobile-shell-active .location-panel-action-group{
    grid-template-columns:1fr;
  }

  body.mobile-shell-active .location-panel-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  body.mobile-shell-active .location-panel-action-group{
    display:grid;
    gap:8px;
  }
}

@media (prefers-reduced-motion:reduce){
  .project-manager-order-button,
  .project-library-autocomplete-mobile{
    transition:none !important;
    animation:none !important;
  }
}


/*
────────────────────────────────────────────
11. Mobile Export Workflow
────────────────────────────────────────────
*/

body.mobile-shell-active .export-workspace-body{
  display:block !important;
  min-height:0;
}

body.mobile-shell-active .export-workspace-settings{
  width:100% !important;
  max-width:none !important;
  flex:1 1 auto !important;
  padding:14px 14px 0 !important;
  overflow:auto !important;
}

body.mobile-shell-active .export-workspace-preview,
body.mobile-shell-active .export-preview-toolbar,
body.mobile-shell-active .export-preview-stage{
  display:none !important;
}

body.mobile-shell-active .export-format-section,
body.mobile-shell-active .export-content-section{
  display:none !important;
}

body.mobile-shell-active #actualExposureSection,
body.mobile-shell-active #documentNotesSection{
  margin-bottom:14px !important;
}

body.mobile-shell-active .export-workspace-heading p,
body.mobile-shell-active #actualExposureSection .export-settings-description,
body.mobile-shell-active #documentNotesSection > .export-settings-description,
body.mobile-shell-active #documentNotesSection .export-notes-subsection > .export-settings-description{
  display:none !important;
}

body.mobile-shell-active #actualExposureFields{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
}

body.mobile-shell-active .actual-exposure-choice{
  grid-template-columns:1fr 1fr !important;
}

body.mobile-shell-active .actual-exposure-choice-button,
body.mobile-shell-active .actual-exposure-select,
body.mobile-shell-active .export-notes-input,
body.mobile-shell-active .export-workspace-footer-button{
  min-height:48px;
}

body.mobile-shell-active .export-workspace-footer{
  padding-left:max(14px,var(--safe-area-left)) !important;
  padding-right:max(14px,var(--safe-area-right)) !important;
}


/*
==========================================================
PACKAGE 07 — MOBILE POLISH & BASELINE CANDIDATE
==========================================================
*/

/* Uniform mobile surface title language. */
.mobile-surface-title{
  min-width:0;
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:9px !important;
}

.mobile-surface-brand-dot,
.image-crop-brand-dot{
  width:13px;
  height:13px;
  flex:0 0 13px;
  border-radius:50%;
  background:var(--accent);
}

@media (max-width:900px){
  /* One-row mobile header: identity, Image Identifier, Initial and LAT. */
  body.mobile-shell-active #appHeader{
    grid-template-columns:28px minmax(74px,1fr) auto auto !important;
    grid-template-areas:"brand identifier metering lat" !important;
    min-height:44px;
    padding:6px 8px !important;
    column-gap:6px !important;
    row-gap:0 !important;
  }

  body.mobile-shell-active .header-logo{
    grid-area:brand;
    min-width:28px;
  }

  body.mobile-shell-active .header-logo .logo-dot{
    width:25px;
    height:25px;
    font-size:10px;
  }

  body.mobile-shell-active .mobile-header-title{
    display:none !important;
  }

  body.mobile-shell-active .image-identifier-wrap{
    grid-area:identifier;
    min-width:0;
  }

  body.mobile-shell-active #imageIdentifier{
    width:100% !important;
    min-width:0 !important;
    padding:0 9px !important;
    font-size:10px !important;
  }

  body.mobile-shell-active .image-location-button{
    display:none !important;
  }

  body.mobile-shell-active #initialMeteringDisplay{
    grid-area:metering;
    max-width:128px !important;
    min-height:30px !important;
    height:30px !important;
    padding:0 8px !important;
    gap:4px !important;
    border-radius:999px;
  }

  body.mobile-shell-active .initial-metering-label{
    width:14px;
    overflow:hidden;
    font-size:0 !important;
  }

  body.mobile-shell-active .initial-metering-label::after{
    content:"IN";
    font-size:8px;
    font-weight:780;
  }

  body.mobile-shell-active .initial-metering-value{
    font-size:9px !important;
  }

  body.mobile-shell-active .initial-metering-divider{
    font-size:8px;
  }

  body.mobile-shell-active #drBtn{
    grid-area:lat;
    width:auto !important;
    min-width:38px;
    padding:0 2px !important;
    margin:0 !important;
    font-size:10px !important;
  }

  /* Initial Metering Setup readability and scroll repair. */
  body.mobile-shell-active .metering-setup-panel{
    height:100% !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
  }

  body.mobile-shell-active .metering-setup-header{
    padding:12px 14px 9px !important;
  }

  body.mobile-shell-active .metering-setup-header h2{
    font-size:18px !important;
    white-space:nowrap;
  }

  body.mobile-shell-active .metering-setup-header p{
    font-size:10px !important;
  }

  body.mobile-shell-active .metering-setup-controls{
    min-height:0 !important;
    height:auto !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    padding:8px !important;
    overflow:hidden !important;
  }

  body.mobile-shell-active .metering-setup-control{
    min-height:0 !important;
    grid-template-rows:34px minmax(0,1fr) !important;
  }

  body.mobile-shell-active .metering-setup-control-heading{
    min-height:34px !important;
    padding:5px 8px !important;
    gap:5px !important;
    white-space:nowrap;
  }

  body.mobile-shell-active .metering-setup-control-heading span{
    font-size:9px !important;
  }

  body.mobile-shell-active .metering-setup-control-heading strong{
    min-width:0;
    max-width:72%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px !important;
    font-weight:650 !important;
  }

  body.mobile-shell-active .metering-setup-options{
    min-height:0 !important;
    max-height:none !important;
    height:100% !important;
    padding:6px 6px 42px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    color:var(--text) !important;
    opacity:1 !important;
  }

  body.mobile-shell-active .metering-setup-option{
    flex:0 0 auto;
    min-height:38px !important;
    color:var(--text) !important;
    opacity:1 !important;
  }

  body.mobile-shell-active .metering-setup-footer{
    padding:8px 10px calc(8px + var(--safe-area-bottom)) !important;
  }

  body.mobile-shell-active .metering-setup-summary{
    display:none !important;
  }

  body.mobile-shell-active .metering-setup-start-button{
    width:100% !important;
    min-height:42px !important;
  }

  /* Collapsible full-width icon-only bottom navigation. */
  body.mobile-shell-active .mobile-action-bar{
    display:block !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:calc(var(--mobile-expanded-bar-height) + var(--safe-area-bottom)) !important;
    min-height:0 !important;
    padding:5px max(8px,var(--safe-area-right)) calc(5px + var(--safe-area-bottom)) max(8px,var(--safe-area-left)) !important;
    border:0 !important;
    border-top:1px solid var(--border) !important;
    border-radius:0 !important;
    background:rgba(248,248,250,.97) !important;
    box-shadow:0 -8px 28px rgba(0,0,0,.12) !important;
    transform:translateY(calc(100% - var(--mobile-collapsed-bar-peek))) !important;
    transition:transform 220ms cubic-bezier(.2,.8,.2,1),opacity 180ms ease !important;
    overflow:visible !important;
  }

  body.dark.mobile-shell-active .mobile-action-bar{
    background:rgba(28,28,32,.98) !important;
  }

  body.mobile-shell-active .mobile-action-bar.is-expanded{
    transform:translateY(0) !important;
  }

  body.mobile-shell-active .mobile-action-bar.is-suppressed{
    transform:translateY(110%) !important;
  }

  body.mobile-shell-active .mobile-action-items{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
    gap:2px;
  }

  body.mobile-shell-active .mobile-action-handle{
    position:absolute;
    left:50%;
    top:-13px;
    width:54px;
    min-width:54px;
    height:18px;
    min-height:18px !important;
    padding:0;
    border:1px solid var(--border);
    border-bottom:0;
    border-radius:13px 13px 0 0;
    background:inherit;
    transform:translateX(-50%);
  }

  body.mobile-shell-active .mobile-action-handle span{
    display:block;
    width:22px;
    height:3px;
    margin:auto;
    border-radius:999px;
    background:var(--muted);
    opacity:.62;
  }

  body.mobile-shell-active .mobile-action-button{
    width:100% !important;
    min-width:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:12px !important;
    background:transparent !important;
  }

  body.mobile-shell-active .mobile-action-button svg{
    width:19px !important;
    height:19px !important;
  }

  body.mobile-shell-active .mobile-action-label{
    display:none !important;
  }

  body.mobile-shell-active .mobile-action-primary{
    color:var(--accent) !important;
    background:rgba(10,132,255,.08) !important;
  }

  body.mobile-shell-active main{
    padding-bottom:calc(var(--mobile-collapsed-bar-peek) + var(--safe-area-bottom)) !important;
  }

  html.mobile-action-bar-open body.mobile-shell-active main{
    padding-bottom:calc(var(--mobile-expanded-bar-height) + var(--safe-area-bottom)) !important;
  }

  /* Small inverse Calculation action, aligned to the lower left. */
  body.mobile-shell-active .floating-calculation-button{
    left:max(10px,var(--safe-area-left)) !important;
    right:auto !important;
    bottom:calc(var(--safe-area-bottom) + var(--mobile-collapsed-bar-peek) + 8px) !important;
    width:auto !important;
    min-width:0 !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 11px !important;
    border:1px solid rgba(35,145,93,.86) !important;
    border-radius:999px !important;
    background:rgba(35,145,93,.96) !important;
    color:#fff !important;
    font-size:9px !important;
    letter-spacing:.045em !important;
    box-shadow:0 5px 16px rgba(21,110,68,.22) !important;
  }

  html.mobile-action-bar-open body.mobile-shell-active .floating-calculation-button{
    bottom:calc(var(--safe-area-bottom) + var(--mobile-expanded-bar-height) + 8px) !important;
  }

  /* Fullscreen Add, Gear and Location share Export's title language. */
  body.mobile-shell-active #mobileSurfacePortal > .add-menu,
  body.mobile-shell-active #mobileSurfacePortal > .location-panel,
  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:var(--app-viewport-height) !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:rgba(248,248,250,.995) !important;
  }

  body.dark.mobile-shell-active #mobileSurfacePortal > .add-menu,
  body.dark.mobile-shell-active #mobileSurfacePortal > .location-panel,
  body.dark.mobile-shell-active #mobileSurfacePortal > .project-info-menu{
    background:rgba(25,25,29,.995) !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .add-menu{
    padding:var(--safe-area-top) max(12px,var(--safe-area-right)) var(--safe-area-bottom) max(12px,var(--safe-area-left)) !important;
    overflow:auto !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .add-menu .add-section{
    padding:14px 2px !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .location-panel{
    padding:var(--safe-area-top) max(14px,var(--safe-area-right)) calc(var(--safe-area-bottom) + 10px) max(14px,var(--safe-area-left)) !important;
    overflow:auto !important;
  }

  body.mobile-shell-active .location-panel-heading,
  body.mobile-shell-active .mobile-surface-heading{
    min-height:54px !important;
    padding:9px 2px 11px !important;
    border-bottom:1px solid var(--border) !important;
  }

  /* Clean, geometrically centered close icons across mobile surfaces. */
  body.mobile-shell-active :is(
    .mobile-surface-close,
    .location-panel-close,
    .export-workspace-close-button,
    .image-crop-close,
    .calculation-exit-button,
    .calculation-setup-secondary-button
  ){
    position:relative;
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 !important;
    font-size:0 !important;
    line-height:0 !important;
    border-radius:50% !important;
  }

  body.mobile-shell-active :is(
    .mobile-surface-close,
    .location-panel-close,
    .export-workspace-close-button,
    .image-crop-close,
    .calculation-exit-button,
    .calculation-setup-secondary-button
  )::before,
  body.mobile-shell-active :is(
    .mobile-surface-close,
    .location-panel-close,
    .export-workspace-close-button,
    .image-crop-close,
    .calculation-exit-button,
    .calculation-setup-secondary-button
  )::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:14px;
    height:1.6px;
    border-radius:999px;
    background:currentColor;
    transform-origin:center;
  }

  body.mobile-shell-active :is(.mobile-surface-close,.location-panel-close,.export-workspace-close-button,.image-crop-close,.calculation-exit-button,.calculation-setup-secondary-button)::before{
    transform:translate(-50%,-50%) rotate(45deg);
  }

  body.mobile-shell-active :is(.mobile-surface-close,.location-panel-close,.export-workspace-close-button,.image-crop-close,.calculation-exit-button,.calculation-setup-secondary-button)::after{
    transform:translate(-50%,-50%) rotate(-45deg);
  }

  body.mobile-shell-active .calculation-mobile-close-symbol{
    display:none !important;
  }

  /* Three-row horizontally scrolling value grids. */
  body.mobile-shell-active #picker.picker-mobile-aperture,
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-iso"],
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-shutter"],
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-aperture"]{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-rows:repeat(3,44px) !important;
    grid-auto-columns:minmax(82px,1fr) !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity;
    max-height:none !important;
  }

  body.mobile-shell-active #picker.picker-mobile-aperture .picker-title,
  body.mobile-shell-active #picker.picker-mobile-calculation .picker-title{
    left:0;
    grid-row:1 / 4 !important;
    align-self:stretch;
    display:flex;
    align-items:center;
    min-width:92px;
    margin:0 5px 0 0 !important;
    border:0 !important;
  }

  body.mobile-shell-active #picker.picker-mobile-aperture .picker-option,
  body.mobile-shell-active #picker.picker-mobile-calculation .picker-option{
    min-height:40px !important;
    height:40px !important;
    margin:0 !important;
    scroll-snap-align:start;
  }

  /* Larger visible Recording pins while bubbles remain compact. */
  body.mobile-shell-active .bubble{
    border-width:1.5px;
  }

  /* Calculation dock: one compact control row with icon-only confirm. */
  body.mobile-shell-active .calculation-status{
    left:max(6px,var(--safe-area-left)) !important;
    right:max(6px,var(--safe-area-right)) !important;
    bottom:calc(var(--safe-area-bottom) + 6px) !important;
    padding:7px !important;
    row-gap:4px !important;
    border-radius:15px !important;
  }

  body.mobile-shell-active .calculation-status-heading{
    min-height:24px !important;
    padding:0 1px 2px !important;
  }

  body.mobile-shell-active .calculated-exposure-row{
    grid-template-columns:52px minmax(0,1fr) !important;
    gap:4px !important;
  }

  body.mobile-shell-active .calculation-control-mode{
    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;
    height:34px !important;
    padding:0 4px !important;
    grid-template-columns:10px 24px 10px !important;
    gap:2px !important;
  }

  body.mobile-shell-active .calculated-exposure-fields{
    grid-template-columns:repeat(3,minmax(0,1fr)) 34px !important;
    column-gap:3px !important;
    min-width:0;
  }

  body.mobile-shell-active .calculated-exposure-field,
  body.mobile-shell-active .calculation-save-actual-button{
    min-width:0 !important;
    width:auto !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 4px !important;
    border-radius:9px !important;
    font-size:9px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body.mobile-shell-active .calculation-save-actual-button{
    margin-left:3px !important;
    padding:0 !important;
  }

  body.mobile-shell-active .calculation-confirm-label{
    display:none !important;
  }

  body.mobile-shell-active .calculation-confirm-symbol{
    display:inline !important;
    font-size:14px;
    line-height:1;
  }
}

.calculation-confirm-symbol{
  display:none;
}

/* Image Crop workflow. */
.image-crop-overlay{
  position:fixed;
  inset:0;
  z-index:calc(var(--layer-dialog) - 20);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(16px,var(--safe-area-top)) max(16px,var(--safe-area-right)) max(16px,var(--safe-area-bottom)) max(16px,var(--safe-area-left));
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.image-crop-overlay[hidden]{display:none !important}

.image-crop-dialog{
  width:min(920px,100%);
  height:min(760px,calc(var(--app-viewport-height) - 32px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:24px;
  background:rgba(248,248,250,.99);
  box-shadow:0 30px 90px rgba(0,0,0,.38);
}

body.dark .image-crop-dialog{background:rgba(27,27,31,.995)}

.image-crop-header,
.image-crop-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}

.image-crop-footer{
  justify-content:flex-end;
  border-top:1px solid var(--border);
  border-bottom:0;
}

.image-crop-heading{display:flex;align-items:center;gap:10px;min-width:0}
.image-crop-heading h2{margin:0;font-size:19px}
.image-crop-heading p{margin:2px 0 0;color:var(--muted);font-size:11px}
.image-crop-close{width:36px;height:36px;padding:0;border-radius:50%;font-size:21px}
.image-crop-body{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:12px}
.image-crop-ratios{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.image-crop-ratios button{width:auto;min-width:68px;height:34px;padding:0 11px}
.image-crop-ratios button.is-active{color:#fff;background:var(--accent);border-color:var(--accent)}
.image-crop-stage{min-height:0;position:relative;overflow:hidden;border-radius:16px;background:#111;touch-action:none}
#imageCropCanvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#imageCropCanvas:active{cursor:grabbing}
.image-crop-zoom{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;font-size:11px;color:var(--muted)}
.image-crop-zoom input{width:100%;height:auto;padding:0;background:transparent;border:0}
.image-crop-footer button{width:auto;min-width:92px}
.image-crop-confirm{color:#fff;background:var(--accent);border-color:var(--accent)}

@media (max-width:900px){
  .image-crop-overlay{padding:0}
  .image-crop-dialog{
    width:100%;
    height:var(--app-viewport-height);
    max-height:none;
    border:0;
    border-radius:0;
  }
  .image-crop-header{padding:calc(10px + var(--safe-area-top)) max(12px,var(--safe-area-right)) 10px max(12px,var(--safe-area-left))}
  .image-crop-heading p{display:none}
  .image-crop-body{padding:8px;gap:8px}
  .image-crop-ratios button{min-width:60px;height:32px;font-size:10px}
  .image-crop-footer{padding:8px max(12px,var(--safe-area-right)) calc(8px + var(--safe-area-bottom)) max(12px,var(--safe-area-left))}
  .image-crop-footer button{min-height:42px}
}

@media (max-width:900px){
  body.mobile-shell-active .calculation-control-track{
    width:24px !important;
    min-width:24px !important;
    height:20px !important;
  }
  body.mobile-shell-active .calculation-control-thumb{
    width:14px !important;
    height:14px !important;
    top:3px !important;
    left:3px !important;
  }
  body.mobile-shell-active .calculation-control-mode.is-aperture .calculation-control-thumb{
    left:7px !important;
  }
  body.mobile-shell-active .calculation-control-label{
    width:10px !important;
    min-width:10px !important;
    font-size:9px !important;
  }
}


/*
==========================================================
PACKAGE 07 HOTFIX 01 — MOBILE SHELL / PICKER / CALCULATION
==========================================================
*/

@media (max-width:900px){
  /* Flat information header: no outer capsule and no button-like status pills. */
  body.mobile-shell-active #appHeader{
    margin:0 !important;
    min-height:42px !important;
    padding:6px max(8px,var(--safe-area-right)) 6px max(8px,var(--safe-area-left)) !important;
    border:0 !important;
    border-bottom:1px solid var(--border) !important;
    border-radius:0 !important;
    background:var(--panel) !important;
    box-shadow:none !important;
  }

  body.mobile-shell-active #initialMeteringDisplay{
    width:auto !important;
    min-width:0 !important;
    max-width:128px !important;
    min-height:0 !important;
    height:auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }

  body.mobile-shell-active #initialMeteringDisplay:hover,
  body.mobile-shell-active #initialMeteringDisplay:active,
  body.mobile-shell-active #initialMeteringDisplay:focus-visible{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }

  body.mobile-shell-active #drBtn{
    height:auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  /* Loaded photographs start directly below the header instead of floating vertically. */

  /* Gear editor must stay inside the visual viewport in both axes. */
  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu{
    inset:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:var(--app-viewport-height) !important;
    max-height:var(--app-viewport-height) !important;
    padding:var(--safe-area-top) max(0px,var(--safe-area-right)) 0 max(0px,var(--safe-area-left)) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu > .metadata-section{
    width:auto !important;
    max-width:calc(100vw - max(24px, calc(var(--safe-area-left) + var(--safe-area-right) + 16px))) !important;
    overflow:hidden;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu :is(
    .metadata-input,
    .metadata-notes,
    .range-pill,
    .metadata-range-row,
    .metadata-footer
  ){
    max-width:100% !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-input,
  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-notes{
    width:100% !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .metadata-footer{
    left:0;
    right:0;
    width:100% !important;
    padding-bottom:calc(10px + var(--safe-area-bottom)) !important;
  }

  /* Restore the intended three-column, vertically scrolling value picker. */
  body.mobile-shell-active #picker.picker-mobile-aperture,
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-iso"],
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-shutter"],
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-aperture"]{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-columns:auto !important;
    align-content:start !important;
    scroll-snap-type:none !important;
    max-height:min(58vh,520px) !important;
  }

  body.mobile-shell-active #picker.picker-mobile-aperture .picker-title,
  body.mobile-shell-active #picker.picker-mobile-calculation .picker-title{
    top:0 !important;
    left:auto !important;
    z-index:3;
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:38px;
    margin:0 0 5px !important;
    align-self:auto !important;
    justify-content:flex-start;
    background:inherit;
  }

  body.mobile-shell-active #picker.picker-mobile-aperture .picker-option,
  body.mobile-shell-active #picker.picker-mobile-calculation .picker-option{
    min-height:42px !important;
    height:42px !important;
    scroll-snap-align:none !important;
  }

  /* Stable lower-left Calculation / Resume action in every state. */
  body.mobile-shell-active .floating-calculation-button,
  body.mobile-shell-active .floating-calculation-button.is-visible,
  body.mobile-shell-active .floating-calculation-button.has-saved-calculation,
  body.mobile-shell-active .floating-calculation-button:hover,
  body.mobile-shell-active .floating-calculation-button:active{
    left:max(10px,var(--safe-area-left)) !important;
    right:auto !important;
    margin:0 !important;
    transform:none !important;
  }

  /* Calculation top toolbar: S/A, Confirm and Close. */
  body.mobile-shell-active .calculation-status{
    padding:7px 8px 8px !important;
    row-gap:6px !important;
  }

  body.mobile-shell-active .calculation-status-heading{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:6px !important;
    min-height:32px !important;
    padding:0 !important;
  }

  body.mobile-shell-active .calculation-status-copy{
    min-width:0;
  }

  body.mobile-shell-active .calculation-status-copy > span{
    display:block !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px !important;
  }

  body.mobile-shell-active .calculation-mobile-toolbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    min-width:0;
  }

  body.mobile-shell-active .calculation-mobile-toolbar .calculation-control-mode{
    width:56px !important;
    min-width:56px !important;
    max-width:56px !important;
    height:30px !important;
    min-height:30px !important;
    margin:0 !important;
    padding:0 4px !important;
  }

  body.mobile-shell-active .calculation-mobile-toolbar .calculation-save-actual-button,
  body.mobile-shell-active .calculation-mobile-toolbar .calculation-exit-button{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:30px !important;
    min-height:30px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:9px !important;
  }

  body.mobile-shell-active .calculated-exposure-row{
    display:block !important;
  }

  body.mobile-shell-active .calculated-exposure-fields{
    gap:6px !important;
  }

  body.mobile-shell-active .calculated-exposure-field{
    height:38px !important;
    min-height:38px !important;
    padding:0 6px !important;
  }
}


/*
==========================================================
PACKAGE 07 HOTFIX 02 — FIXED MOBILE BAR + CALCULATION DRAWER
==========================================================
*/

@media (max-width:900px){
  /* The primary mobile navigation is now permanently available. */
  body.mobile-shell-active .mobile-action-bar,
  body.mobile-shell-active .mobile-action-bar.is-expanded{
    display:block !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:calc(var(--mobile-fixed-bar-content-height) + var(--safe-area-bottom)) !important;
    min-height:0 !important;
    padding:2px max(7px,var(--safe-area-right)) calc(2px + var(--safe-area-bottom)) max(7px,var(--safe-area-left)) !important;
    transform:none !important;
    opacity:1 !important;
    overflow:hidden !important;
    border:0 !important;
    border-top:1px solid var(--border) !important;
    border-radius:0 !important;
    box-shadow:0 -5px 18px rgba(0,0,0,.10) !important;
  }

  body.mobile-shell-active .mobile-action-bar.is-suppressed{
    transform:translateY(105%) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  body.mobile-shell-active .mobile-action-handle{
    display:none !important;
  }

  body.mobile-shell-active .mobile-action-items{
    height:var(--mobile-fixed-bar-content-height) !important;
  }

  body.mobile-shell-active .mobile-action-button{
    height:40px !important;
    min-height:40px !important;
    border-radius:10px !important;
  }

  body.mobile-shell-active main,
  html.mobile-action-bar-open body.mobile-shell-active main,
  html[data-mobile-surface="calculation"] body.mobile-shell-active main,
  html[data-mobile-surface="calculation-setup"] body.mobile-shell-active main{
    padding-bottom:var(--mobile-action-bar-height) !important;
  }

  body.mobile-shell-active #stage.has-image{
    align-items:flex-start !important;
    justify-content:center !important;
  }

  body.mobile-shell-active .floating-calculation-button,
  html.mobile-action-bar-open body.mobile-shell-active .floating-calculation-button{
    bottom:calc(var(--mobile-action-bar-height) + 8px) !important;
  }

  /* Gear header: fixed close area and a genuinely shrinkable title row. */
  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .mobile-gear-heading{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 36px !important;
    align-items:center !important;
    column-gap:10px !important;
    padding:
      10px
      max(12px,var(--safe-area-right))
      10px
      max(12px,var(--safe-area-left)) !important;
    overflow:hidden !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .mobile-gear-heading .mobile-surface-title{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  body.mobile-shell-active #mobileSurfacePortal > .project-info-menu .mobile-gear-heading .mobile-surface-title strong{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.mobile-shell-active #mobileGearCloseBtn{
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    justify-self:end !important;
  }

  /* Desktop-style, single-column value pickers on touch screens. */
  body.mobile-shell-active #picker.picker-mobile-aperture,
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-iso"],
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-shutter"],
  body.mobile-shell-active #picker.picker-mobile-calculation[data-picker-owner="calculated-aperture"]{
    display:block !important;
    left:max(12px,var(--safe-area-left)) !important;
    right:max(12px,var(--safe-area-right)) !important;
    width:auto !important;
    max-width:280px !important;
    margin-inline:auto !important;
    padding:8px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    grid-auto-flow:row !important;
    scroll-snap-type:y proximity !important;
    border-radius:18px !important;
  }

  body.mobile-shell-active #picker.picker-mobile-aperture{
    bottom:calc(var(--mobile-action-bar-height) + 8px) !important;
    max-height:min(55vh,360px) !important;
  }

  body.mobile-shell-active #picker.picker-mobile-calculation{
    bottom:calc(
      var(--mobile-action-bar-height) +
      var(--calculation-drawer-notch-height) +
      8px
    ) !important;
    max-height:min(55vh,360px) !important;
  }

  body.mobile-shell-active #picker.picker-mobile-aperture .picker-title,
  body.mobile-shell-active #picker.picker-mobile-calculation .picker-title{
    position:sticky !important;
    top:-8px !important;
    z-index:3 !important;
    display:flex !important;
    grid-column:auto !important;
    width:auto !important;
    min-height:38px !important;
    margin:-8px -8px 6px !important;
    padding:11px 12px 9px !important;
    justify-content:center !important;
    border-bottom:1px solid var(--border) !important;
    background:inherit !important;
  }

  body.mobile-shell-active #picker.picker-mobile-aperture .picker-option,
  body.mobile-shell-active #picker.picker-mobile-calculation .picker-option{
    width:100% !important;
    min-width:0 !important;
    height:38px !important;
    min-height:38px !important;
    margin:2px 0 !important;
    border-radius:999px !important;
    scroll-snap-align:center !important;
  }

  /* Calculation Setup and Calculation Mode use one full-width pull-up drawer language. */
  body.mobile-shell-active .calculation-setup-overlay{
    padding:0 !important;
    align-items:flex-end !important;
  }

  body.mobile-shell-active .calculation-setup-panel,
  body.mobile-shell-active .calculation-status{
    position:fixed !important;
    z-index:calc(var(--mobile-sheet-z) - 5) !important;
    left:0 !important;
    right:0 !important;
    bottom:var(--mobile-action-bar-height) !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-left:0 !important;
    border-radius:var(--calculation-drawer-radius) var(--calculation-drawer-radius) 0 0 !important;
    box-sizing:border-box !important;
    box-shadow:0 -10px 30px rgba(0,0,0,.15) !important;
    transform:translateY(0) !important;
    transition:transform 220ms cubic-bezier(.2,.8,.2,1) !important;
    overflow:hidden !important;
  }

  body.mobile-shell-active .calculation-setup-panel.is-collapsed,
  body.mobile-shell-active .calculation-status.is-collapsed{
    transform:translateY(calc(100% - var(--calculation-drawer-notch-height))) !important;
  }

  body.mobile-shell-active .calculation-setup-heading,
  body.mobile-shell-active .calculation-status-heading{
    width:100% !important;
    height:var(--calculation-drawer-notch-height) !important;
    min-height:var(--calculation-drawer-notch-height) !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 34px !important;
    align-items:center !important;
    gap:8px !important;
    padding:0 max(8px,var(--safe-area-right)) 0 max(12px,var(--safe-area-left)) !important;
    border:0 !important;
    border-bottom:1px solid var(--border) !important;
    cursor:pointer;
    user-select:none;
    touch-action:manipulation;
  }

  body.mobile-shell-active .calculation-setup-heading::before,
  body.mobile-shell-active .calculation-status-heading::before{
    content:"";
    position:absolute;
    left:50%;
    top:4px;
    width:28px;
    height:3px;
    border-radius:999px;
    background:var(--muted);
    opacity:.34;
    transform:translateX(-50%);
  }

  body.mobile-shell-active .calculation-setup-heading{
    position:relative !important;
    grid-area:auto !important;
  }

  body.mobile-shell-active .calculation-setup-heading > div{
    display:none !important;
  }

  body.mobile-shell-active .calculation-setup-eyebrow,
  body.mobile-shell-active .calculation-status-copy > span{
    display:block !important;
    min-width:0 !important;
    margin:0 !important;
    padding:4px 0 0 !important;
    overflow:hidden !important;
    color:#2aa7a1 !important;
    background:transparent !important;
    font-size:9px !important;
    font-weight:850 !important;
    letter-spacing:.08em !important;
    line-height:1 !important;
    text-overflow:ellipsis !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  body.mobile-shell-active .calculation-status-copy{
    min-width:0 !important;
    display:block !important;
  }

  body.mobile-shell-active .calculation-setup-secondary-button,
  body.mobile-shell-active .calculation-exit-button{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    margin:3px 0 0 !important;
    padding:0 !important;
    justify-self:end !important;
    border:0 !important;
    border-radius:9px !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body.mobile-shell-active .calculation-setup-panel{
    min-height:0 !important;
    max-height:none !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-areas:none !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:0 0 max(8px,var(--safe-area-bottom)) !important;
  }

  body.mobile-shell-active .calculation-setup-selection{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    padding:9px 10px 7px !important;
  }

  body.mobile-shell-active .calculation-setup-selection > div{
    min-width:0 !important;
    min-height:40px !important;
    padding:6px 9px !important;
    border-radius:11px !important;
  }

  body.mobile-shell-active .calculation-setup-actions{
    display:block !important;
    padding:0 10px !important;
  }

  body.mobile-shell-active .calculation-setup-primary-button{
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    height:38px !important;
  }

  body.mobile-shell-active .calculation-status{
    display:grid !important;
    grid-template-rows:var(--calculation-drawer-notch-height) auto !important;
    row-gap:0 !important;
    padding:0 0 max(8px,var(--safe-area-bottom)) !important;
  }

  body.mobile-shell-active .calculated-exposure-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    padding:9px 10px 0 !important;
  }

  body.mobile-shell-active .calculation-mobile-primary-row{
    display:grid !important;
    grid-template-columns:minmax(118px,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
  }

  body.mobile-shell-active .calculation-mobile-primary-row .calculation-control-mode{
    width:min(190px,100%) !important;
    min-width:118px !important;
    max-width:190px !important;
    height:34px !important;
    min-height:34px !important;
    justify-self:start !important;
    padding:0 8px !important;
    grid-template-columns:18px minmax(44px,1fr) 18px !important;
    gap:7px !important;
  }

  body.mobile-shell-active .calculation-mobile-primary-row .calculation-control-track{
    width:100% !important;
    min-width:44px !important;
    height:20px !important;
  }

  body.mobile-shell-active .calculation-mobile-primary-row .calculation-save-actual-button{
    width:auto !important;
    min-width:116px !important;
    max-width:none !important;
    height:34px !important;
    min-height:34px !important;
    margin:0 !important;
    padding:0 11px !important;
    border-radius:10px !important;
    font-size:8px !important;
    white-space:nowrap !important;
  }

  body.mobile-shell-active .calculation-mobile-primary-row .calculation-confirm-label{
    display:inline !important;
  }

  body.mobile-shell-active .calculation-mobile-primary-row .calculation-confirm-symbol{
    display:none !important;
  }

  body.mobile-shell-active .calculated-exposure-fields{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
  }

  body.mobile-shell-active .calculated-exposure-field{
    width:100% !important;
    min-width:0 !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 7px !important;
    font-size:9px !important;
    border-radius:11px !important;
  }

  body.mobile-shell-active .calculation-reference-summary,
  body.mobile-shell-active .calculation-reference-help,
  body.mobile-shell-active .calculation-guidance{
    display:none !important;
  }

  /* Picker opening leaves the drawer notch visible instead of removing context. */
  body.mobile-shell-active:has(#picker.picker-mobile-calculation:not([hidden])) .calculation-status,
  body.mobile-shell-active:has(#picker.picker-mobile-calculation:not([hidden])) .calculation-setup-panel{
    opacity:1 !important;
    pointer-events:auto !important;
  }
}

@media (max-width:390px){
  body.mobile-shell-active .calculation-mobile-primary-row{
    grid-template-columns:minmax(104px,1fr) auto !important;
    gap:7px !important;
  }

  body.mobile-shell-active .calculation-mobile-primary-row .calculation-control-mode{
    min-width:104px !important;
  }

  body.mobile-shell-active .calculation-mobile-primary-row .calculation-save-actual-button{
    min-width:104px !important;
    padding-inline:8px !important;
    font-size:7.5px !important;
  }
}

@media (max-width:900px) and (max-height:520px){
  body.mobile-shell-active .calculation-status,
  body.mobile-shell-active .calculation-setup-panel{
    left:0 !important;
    right:0 !important;
    bottom:var(--mobile-action-bar-height) !important;
    width:100% !important;
  }

  body.mobile-shell-active .calculation-status{
    grid-template-columns:1fr !important;
    grid-template-rows:var(--calculation-drawer-notch-height) auto !important;
  }

  body.mobile-shell-active .calculation-setup-panel{
    grid-template-columns:1fr !important;
    grid-template-areas:none !important;
  }
}


/* ==========================================================
   RESPONSIVE DEVELOPMENT PACKAGE 10
   Mobile Interaction and Form Stability
   ========================================================== */

@media (max-width:900px){
  /* Match desktop selected-value contrast inside Initial Metering Setup. */
  body.mobile-shell-active .metering-setup-option.is-selected,
  body.mobile-shell-active .metering-setup-option.is-selected *{
    color:#fff !important;
  }

  /* Initial and LAT are peer information, not differently scaled controls. */
  body.mobile-shell-active #initialMeteringDisplay,
  body.mobile-shell-active #drBtn,
  body.mobile-shell-active #initialMeteringDisplay :is(.initial-metering-label,.initial-metering-value),
  body.mobile-shell-active #drBtn{
    font-size:10px !important;
    line-height:1.15 !important;
  }

  /* iOS does not page-zoom fields whose effective font size is at least 16px. */
  body.mobile-shell-active :is(
    #imageIdentifier,
    #projectInfoMenu input,
    #projectInfoMenu textarea,
    #locationPanel input,
    #locationPanel textarea,
    #projectManagerOverlay input,
    #exportWorkspace input,
    #exportWorkspace textarea,
    #exportWorkspace select
  ){
    font-size:16px !important;
  }

  /* Mobile close affordances share one red, background-free visual language. */
  body.mobile-shell-active button[aria-label^="Close"],
  body.mobile-shell-active button[aria-label^="Exit"]{
    color:#ff453a !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }

  /* Device location is an explicit draft action, never an automatic request. */
  body.mobile-shell-active .location-current-button{
    min-height:44px;
    margin:0 12px 10px;
    width:calc(100% - 24px);
  }

  /* The desktop moon icon is reused in the mobile action bar. */
  body.mobile-shell-active .mobile-theme-desktop-icon{
    width:18px;
    height:18px;
    fill:currentColor;
  }

  /* Notifications stay away from the lower touch workflow. */
  body.mobile-shell-active .app-notification-stack{
    top:calc(var(--safe-area-top) + var(--header-height, 44px) + 8px) !important;
    right:max(10px,var(--safe-area-right)) !important;
    bottom:auto !important;
    left:max(10px,var(--safe-area-left)) !important;
    width:auto !important;
    gap:6px !important;
  }
  body.mobile-shell-active .app-notification{
    max-width:430px !important;
    min-height:0 !important;
    padding:9px 10px !important;
    margin-inline:auto;
    grid-template-columns:28px minmax(0,1fr) 28px !important;
    border-radius:13px !important;
  }
  body.mobile-shell-active .app-notification-title{font-size:11px !important}
  body.mobile-shell-active .app-notification-message{font-size:10px !important;line-height:1.3 !important}

  /* Move mode is a direct bubble/marker drag on touch devices. */
  body.mobile-shell-active.touch-marker-move-active .bubble,
  body.mobile-shell-active.touch-marker-dragging .bubble{
    touch-action:none !important;
  }
  body.mobile-shell-active.touch-marker-dragging #imageWrap{
    touch-action:none !important;
  }

  /* Mobile export: primary share action plus a quiet compatibility JPEG. */
  body.mobile-shell-active .export-workspace-footer{
    display:grid !important;
    grid-template-columns:auto auto minmax(0,1fr) !important;
    gap:7px !important;
  }
  body.mobile-shell-active .export-workspace-jpeg-button{
    color:var(--muted);
    background:transparent;
  }
  body.mobile-shell-active .export-workspace-jpeg-button[hidden]{display:none !important}
}

/* ==========================================================
   RESPONSIVE DEVELOPMENT PACKAGE 11
   Mobile Image Navigation and Headerless Calculation Shell
   ========================================================== */

.image-viewport{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
}

.image-viewport #imageWrap{
  flex:0 0 auto;
  pointer-events:auto;
  will-change:transform;
}

.mobile-image-reset-button{
  display:none;
}

@media (max-width:900px){
  body.mobile-shell-active .image-viewport{
    align-items:flex-start;
    justify-content:center;
    touch-action:none;
    overscroll-behavior:none;
  }

  body.mobile-shell-active .image-viewport #imageWrap{
    touch-action:none;
    transition:transform 180ms cubic-bezier(.2,.8,.2,1);
  }

  body.mobile-shell-active.mobile-image-panning .image-viewport #imageWrap{
    transition:none;
  }

  body.mobile-shell-active .mobile-image-reset-button{
    position:fixed;
    z-index:calc(var(--mobile-sheet-z) - 12);
    top:calc(var(--safe-area-top) + var(--header-height,44px) + 8px);
    right:max(10px,var(--safe-area-right));
    width:38px;
    min-width:38px;
    height:30px;
    min-height:30px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--panel-solid,var(--panel));
    color:var(--text);
    box-shadow:0 4px 14px rgba(0,0,0,.12);
    font-size:10px;
    font-weight:800;
  }

  body.mobile-shell-active .mobile-image-reset-button[hidden]{
    display:none !important;
  }

  /* The Calculation overlay must not block selecting a Reference on the image. */
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-overlay{
    position:fixed !important;
    inset:0 !important;
    padding:0 !important;
    background:transparent !important;
    pointer-events:none !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-panel,
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-status{
    position:fixed !important;
    z-index:calc(var(--mobile-sheet-z) - 6) !important;
    left:0 !important;
    right:0 !important;
    bottom:var(--mobile-action-bar-height) !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    max-height:min(52vh,390px) !important;
    margin:0 !important;
    padding:10px max(10px,var(--safe-area-right)) calc(10px + var(--safe-area-bottom)) max(10px,var(--safe-area-left)) !important;
    border:0 !important;
    border-top:1px solid var(--border) !important;
    border-radius:0 !important;
    background:var(--panel-solid,var(--panel)) !important;
    box-shadow:0 -12px 34px rgba(0,0,0,.16) !important;
    box-sizing:border-box !important;
    overflow:auto !important;
    pointer-events:auto !important;
    opacity:1 !important;
    transform:translate3d(0,0,0) !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-panel.is-mobile-shell-collapsed,
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-status.is-mobile-shell-collapsed{
    transform:translate3d(0,calc(100% + 16px),0) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-heading,
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-status-heading{
    display:none !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .floating-calculation-button,
  body.mobile-shell-active.mobile-calculation-shell-v2 .floating-calculation-button.is-visible,
  body.mobile-shell-active.mobile-calculation-shell-v2 .floating-calculation-button.has-saved-calculation{
    position:fixed !important;
    z-index:calc(var(--mobile-sheet-z) - 2) !important;
    left:max(10px,var(--safe-area-left)) !important;
    right:auto !important;
    bottom:calc(var(--mobile-action-bar-height) + 8px) !important;
    width:auto !important;
    min-width:0 !important;
    max-width:min(58vw,230px) !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 12px !important;
    border:0 !important;
    border-radius:999px !important;
    background:var(--green) !important;
    color:#fff !important;
    box-shadow:0 7px 20px rgba(0,0,0,.16) !important;
    transform:none !important;
    transition:bottom 280ms cubic-bezier(.22,.82,.2,1), transform 160ms ease, opacity 160ms ease !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:9px !important;
    letter-spacing:.035em !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2.mobile-calculation-shell-expanded .floating-calculation-button{
    bottom:calc(var(--mobile-action-bar-height) + var(--mobile-calculation-panel-height,150px) + 8px) !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .mobile-calculation-close-host{
    position:fixed;
    z-index:calc(var(--mobile-sheet-z) - 1);
    right:max(10px,var(--safe-area-right));
    bottom:calc(var(--mobile-action-bar-height) + var(--mobile-calculation-panel-height,150px) + 8px);
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:bottom 280ms cubic-bezier(.22,.82,.2,1), opacity 180ms ease, transform 180ms ease;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .mobile-calculation-close-host[hidden]{
    display:none !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .mobile-calculation-close-host :is(.calculation-exit-button,.calculation-setup-secondary-button){
    position:relative !important;
    inset:auto !important;
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    color:#ff453a !important;
    box-shadow:none !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-mobile-close-symbol{
    display:block !important;
    font-size:0 !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-panel{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-selection{
    padding:0 !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-selection > div{
    padding:7px 10px !important;
    border-radius:10px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-primary-button{
    height:40px !important;
    min-height:40px !important;
    padding:0 12px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-status{
    display:block !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculated-exposure-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
    padding:0 !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-mobile-primary-row{
    display:grid !important;
    grid-template-columns:minmax(116px,154px) minmax(126px,1fr) !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    width:100% !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-mode{
    width:146px !important;
    min-width:116px !important;
    max-width:100% !important;
    min-height:32px !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:16px 64px 16px !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    border-radius:9px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-track{
    width:64px !important;
    min-width:64px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-mode.is-aperture .calculation-control-thumb{
    transform:translateX(44px) !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-label{
    width:16px !important;
    min-width:16px !important;
    text-align:center !important;
    font-size:10px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-save-actual-button{
    justify-self:stretch !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:34px !important;
    min-height:34px !important;
    margin:0 !important;
    padding:0 9px !important;
    border-radius:9px !important;
    font-size:8.5px !important;
    white-space:nowrap !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-confirm-label{
    display:inline !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-confirm-symbol{
    display:none !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculated-exposure-fields{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculated-exposure-field{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 7px !important;
    border-radius:10px !important;
    font-size:9px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-range-warning{
    margin:0 !important;
  }
}

@media (max-width:390px){
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-mobile-primary-row{
    grid-template-columns:minmax(108px,138px) minmax(116px,1fr) !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-mode{
    width:132px !important;
    min-width:108px !important;
    grid-template-columns:15px 54px 15px !important;
    gap:5px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-track{
    width:54px !important;
    min-width:54px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-mode.is-aperture .calculation-control-thumb{
    transform:translateX(34px) !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-save-actual-button{
    font-size:8px !important;
    padding-inline:7px !important;
  }
}

@media (max-width:900px) and (max-height:520px){
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-panel,
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-status{
    max-height:48vh !important;
    padding-top:7px !important;
    padding-bottom:calc(7px + var(--safe-area-bottom)) !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculated-exposure-field{
    height:36px !important;
    min-height:36px !important;
  }
}

@media (max-width:900px){
  body.mobile-shell-active.mobile-calculation-shell-v2.calculation-setup-active .floating-calculation-button,
  body.mobile-shell-active.mobile-calculation-shell-v2.calculation-active .floating-calculation-button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* ==========================================================
   RESPONSIVE DEVELOPMENT PACKAGE 12
   Final Mobile Polish and Baseline Candidate
   ========================================================== */

@media (max-width:900px){
  /* Hidden workflow surfaces must remain hidden despite later component
     display overrides. */
  body.mobile-shell-active .calculation-status[hidden],
  body.mobile-shell-active .calculation-setup-overlay[hidden],
  body.mobile-shell-active .floating-calculation-button[hidden]{
    display:none !important;
  }

  /* A lower, calmer single-row header. The identifier keeps a computed 16px
     input font to prevent iOS focus zoom, then scales visually with its box. */
  body.mobile-shell-active #appHeader{
    min-height:38px !important;
    margin-left:calc(var(--safe-area-left) + 13px) !important;
    margin-right:calc(var(--safe-area-right) + 13px) !important;
    margin-top:calc(var(--safe-area-top) + 5px) !important;
    margin-bottom:5px !important;
    padding:4px 7px !important;
    column-gap:8px !important;
    grid-template-columns:24px minmax(70px,1fr) auto auto !important;
  }

  body.mobile-shell-active .header-logo{
    min-width:24px !important;
  }

  body.mobile-shell-active .header-logo .logo-dot{
    width:22px !important;
    height:22px !important;
  }

  body.mobile-shell-active .image-identifier-wrap{
    height:27px;
    overflow:hidden;
  }

  body.mobile-shell-active #imageIdentifier{
    width:114.286% !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 8px !important;
    font-size:16px !important;
    line-height:30px !important;
    border-radius:9px !important;
    transform:scale(.875);
    transform-origin:left center;
  }

  body.mobile-shell-active #initialMeteringDisplay,
  body.mobile-shell-active #drBtn{
    min-height:27px !important;
    height:27px !important;
    font-size:9px !important;
  }

  body.mobile-shell-active #initialMeteringDisplay{
    max-width:116px !important;
    padding-inline:6px !important;
  }

  body.mobile-shell-active #drBtn{
    min-width:36px !important;
  }

  /* The keyboard overlays the application workspace. Only each open editor's
     own scroll area compensates for the visual viewport. */
  html[data-keyboard="visible"] body.mobile-shell-active{
    position:fixed;
    inset:0;
    width:100%;
    height:var(--app-viewport-height);
    overflow:hidden;
  }

  html[data-keyboard="visible"] body.mobile-shell-active main,
  html[data-keyboard="visible"] body.mobile-shell-active #stage{
    height:var(--app-viewport-height) !important;
    max-height:var(--app-viewport-height) !important;
    transform:none !important;
  }

  html[data-keyboard="visible"] body.mobile-shell-active #mobileSurfacePortal > .project-info-menu,
  html[data-keyboard="visible"] body.mobile-shell-active #mobileSurfacePortal > .location-panel,
  html[data-keyboard="visible"] body.mobile-shell-active .project-manager{
    height:var(--app-viewport-height) !important;
    max-height:var(--app-viewport-height) !important;
    padding-bottom:calc(var(--app-keyboard-inset) + var(--safe-area-bottom) + 18px) !important;
    scroll-padding-top:58px;
    scroll-padding-bottom:calc(var(--app-keyboard-inset) + 76px);
    overscroll-behavior:contain;
  }

  /* A little more separation between the Add title and project context. */
  body.mobile-shell-active .mobile-add-project-context{
    margin-top:13px !important;
  }

  /* Theme icon follows the current state and never becomes a blue selected
     action. */
  body.mobile-shell-active #mobileThemeAction,
  body.mobile-shell-active #mobileThemeAction:hover,
  body.mobile-shell-active #mobileThemeAction:focus,
  body.mobile-shell-active #mobileThemeAction:focus-visible,
  body.mobile-shell-active #mobileThemeAction.is-dark-active{
    background:transparent !important;
    color:var(--muted) !important;
  }

  body.mobile-shell-active #mobileThemeAction .mobile-theme-moon{
    display:block;
    fill:currentColor !important;
    stroke:none !important;
  }

  body.mobile-shell-active #mobileThemeAction .mobile-theme-sun{
    display:none;
    fill:none !important;
    stroke:currentColor !important;
  }

  body.mobile-shell-active #mobileThemeAction.is-dark-active .mobile-theme-moon{
    display:none !important;
  }

  body.mobile-shell-active #mobileThemeAction.is-dark-active .mobile-theme-sun{
    display:block !important;
  }

  /* Compact, centered notifications immediately below the measured header. */
  body.mobile-shell-active .app-notification-stack{
    top:calc(var(--safe-area-top) + 50px) !important;
    left:50% !important;
    right:auto !important;
    width:min(82vw,310px) !important;
    max-width:calc(100vw - var(--safe-area-left) - var(--safe-area-right) - 24px) !important;
    transform:translateX(-50%) !important;
    align-items:stretch !important;
  }

  body.mobile-shell-active .app-notification{
    width:100% !important;
    max-width:none !important;
    padding:7px 8px !important;
    grid-template-columns:22px minmax(0,1fr) 22px !important;
    gap:6px !important;
    border-radius:11px !important;
  }

  body.mobile-shell-active .app-notification-icon{
    width:22px !important;
    height:22px !important;
  }

  body.mobile-shell-active .app-notification-title{
    font-size:10px !important;
  }

  body.mobile-shell-active .app-notification-message{
    font-size:9px !important;
    line-height:1.28 !important;
  }

  /* Primary mobile export is the JPEG Save/share action. PNG remains a quiet
     optional middle action. */
  body.mobile-shell-active .export-workspace-footer{
    grid-template-columns:auto minmax(92px,.8fr) minmax(112px,1fr) !important;
    align-items:center !important;
    gap:8px !important;
  }

  body.mobile-shell-active .export-workspace-footer-button{
    min-height:40px !important;
    border-radius:11px !important;
  }

  body.mobile-shell-active .export-workspace-export-button{
    order:2;
    color:var(--muted) !important;
    background:rgba(120,120,128,.07) !important;
    border:1px solid var(--border) !important;
    box-shadow:none !important;
  }

  body.mobile-shell-active .export-workspace-jpeg-button{
    order:3;
    display:inline-flex !important;
    justify-content:center;
    color:#fff !important;
    background:var(--accent) !important;
    border:1px solid var(--accent) !important;
    font-weight:760 !important;
  }

  body.mobile-shell-active #exportWorkspaceCancelBtn{
    order:1;
  }

  /* Mobile Spot Reading menus are compact sheets rather than nearly
     full-width panels. */
  body.mobile-shell-active #picker.picker-mobile-marker-menu{
    left:50% !important;
    right:auto !important;
    width:min(85vw,320px) !important;
    max-width:calc(100vw - var(--safe-area-left) - var(--safe-area-right) - 24px) !important;
    transform:translateX(-50%) !important;
  }

  /* Move guidance is attached to the selected bubble and follows every drag
     render. The old central move cursor is not duplicated on touch. */
  body.mobile-shell-active.touch-marker-move-active #moveCursor,
  body.mobile-shell-active.touch-marker-dragging #moveCursor{
    display:none !important;
  }

  body.mobile-shell-active .bubble-touch-move-target{
    overflow:visible !important;
    z-index:5;
  }

  body.mobile-shell-active .bubble-move-instruction{
    position:absolute;
    left:50%;
    bottom:calc(100% + 7px);
    transform:translateX(-50%);
    min-width:max-content;
    padding:4px 7px;
    border:1px solid rgba(10,132,255,.18);
    border-radius:999px;
    background:rgba(250,250,251,.96);
    color:var(--accent);
    box-shadow:0 5px 14px rgba(0,0,0,.13);
    font-size:8px;
    font-weight:800;
    letter-spacing:.06em;
    line-height:1;
    text-transform:uppercase;
    pointer-events:none;
  }

  body.dark.mobile-shell-active .bubble-move-instruction{
    background:rgba(31,31,35,.97);
    border-color:rgba(92,190,255,.23);
  }

  /* Calculation Setup is a non-collapsible, stable vertical layout. */
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-panel{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:10px !important;
    min-height:0 !important;
    overflow-y:auto !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-selection{
    position:static !important;
    inset:auto !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    flex:0 0 auto !important;
    gap:8px !important;
    margin:0 !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-selection > div{
    position:static !important;
    min-width:0 !important;
    width:auto !important;
    height:auto !important;
    min-height:42px !important;
    box-sizing:border-box !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-actions{
    position:static !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-primary-button{
    position:static !important;
    inset:auto !important;
    display:flex !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  body.mobile-shell-active.calculation-setup-active .floating-calculation-button{
    cursor:default !important;
  }

  /* Shorter desktop-proportioned S/A switch with a vertically centered thumb. */
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-mobile-primary-row{
    grid-template-columns:112px minmax(126px,1fr) !important;
    gap:9px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-mode{
    width:108px !important;
    min-width:108px !important;
    max-width:108px !important;
    height:32px !important;
    padding:0 7px !important;
    grid-template-columns:15px 48px 15px !important;
    gap:5px !important;
    border-radius:999px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-track{
    width:48px !important;
    min-width:48px !important;
    height:18px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-thumb{
    top:50% !important;
    left:3px !important;
    width:14px !important;
    height:14px !important;
    transform:translateY(-50%) !important;
    transition:left 230ms cubic-bezier(.2,.8,.2,1), background 180ms ease, box-shadow 180ms ease !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-mode.is-aperture .calculation-control-thumb{
    left:calc(100% - 17px) !important;
    transform:translateY(-50%) !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-panel,
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-status{
    will-change:transform,opacity;
    transition:transform 280ms cubic-bezier(.22,.82,.2,1), opacity 180ms ease !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .floating-calculation-button,
  body.mobile-shell-active.mobile-calculation-shell-v2 .mobile-calculation-close-host{
    will-change:bottom,opacity,transform;
  }
}

@media (max-width:390px){
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-mobile-primary-row{
    grid-template-columns:104px minmax(118px,1fr) !important;
    gap:7px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-mode{
    width:100px !important;
    min-width:100px !important;
    max-width:100px !important;
    grid-template-columns:14px 44px 14px !important;
    gap:4px !important;
  }

  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-track{
    width:44px !important;
    min-width:44px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-control-thumb,
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-panel,
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-status,
  body.mobile-shell-active.mobile-calculation-shell-v2 .floating-calculation-button,
  body.mobile-shell-active.mobile-calculation-shell-v2 .mobile-calculation-close-host{
    transition:none !important;
  }
}


/* ==========================================================
   v1.3 Fine Adjustment Baseline
   Responsive component corrections
   ========================================================== */

@media (max-width:900px){
  /* Solid, unified mobile header with unclipped identifier geometry. */
  body.mobile-shell-active #appHeader{
    background:#fff !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  body.dark.mobile-shell-active #appHeader{background:#1c1c1e !important}
  body.mobile-shell-active .image-identifier-wrap{
    overflow:visible !important;
    height:27px !important;
  }
  body.mobile-shell-active #imageIdentifier{
    transform-origin:left top !important;
    box-sizing:border-box !important;
  }
  body.mobile-shell-active #imageIdentifier:not(:focus):not(:placeholder-shown){
    color:var(--muted) !important;
  }
  body.mobile-shell-active #initialMeteringDisplay{
    max-width:none !important;
    overflow:visible !important;
    padding-inline:4px !important;
  }
  body.mobile-shell-active #initialMeteringDisplay .initial-metering-value{
    overflow:visible !important;
    text-overflow:clip !important;
  }

  /* Setup and Mode retain a small permanent instruction after the timed guide. */
  body.mobile-shell-active .calculation-mobile-inline-hint{
    display:block;
    margin:0;
    color:var(--muted);
    font-size:8px;
    font-weight:500;
    line-height:1.35;
    text-align:center;
  }
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-actions{
    display:flex !important;
    justify-content:center !important;
  }
  body.mobile-shell-active.mobile-calculation-shell-v2 .calculation-setup-primary-button{
    width:auto !important;
    min-width:138px !important;
    max-width:max-content !important;
    padding-inline:17px !important;
    justify-content:center !important;
    text-align:center !important;
  }

  /* Equal mobile export actions with centered labels. */
  body.mobile-shell-active .export-workspace-footer{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body.mobile-shell-active .export-workspace-footer-button{
    width:100% !important;
    min-width:0 !important;
    padding-inline:7px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  /* Calculated Exposure and Actual Zones are important mobile export context. */
  body.mobile-shell-active #actualExposureComparison,
  body.mobile-shell-active #actualZonePreview{
    display:block;
  }
  body.mobile-shell-active #actualExposureComparison[hidden],
  body.mobile-shell-active #actualZonePreview[hidden]{display:none !important}
  body.mobile-shell-active .actual-zone-table-header,
  body.mobile-shell-active .actual-zone-table-row{
    grid-template-columns:40px 52px minmax(68px,1fr) minmax(68px,1fr);
    gap:5px;
    padding-inline:7px;
  }

  /* Centered notification constrained to the real viewport width. */
  body.mobile-shell-active .app-notification-stack{
    position:fixed !important;
    left:50vw !important;
    right:auto !important;
    width:min(78vw,286px) !important;
    max-width:calc(100vw - 28px - var(--safe-area-left) - var(--safe-area-right)) !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    transform:translateX(-50%) !important;
  }
  body.mobile-shell-active .app-notification{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* Fixed separation between Location fields and geolocation action. */
  body.mobile-shell-active .location-current-button{margin-top:12px !important}

  /* Guide Hold pauses both the timer and progress presentation. */
  .calculation-guide-button-group{
    display:flex;
    align-items:center;
    gap:7px;
  }
  .calculation-guide-hold-button{
    width:auto;
    min-width:66px;
    height:40px;
    padding:0 12px;
    color:var(--text);
    background:rgba(120,120,128,.08);
    border:1px solid var(--border);
    font-size:10px;
    font-weight:720;
  }
  .calculation-guide-hold-button[aria-pressed="true"]{
    color:var(--accent);
    border-color:rgba(10,132,255,.28);
    background:rgba(10,132,255,.09);
  }
  .calculation-guide-progress span{
    animation:none !important;
    transform:scaleX(1);
    transition:transform 100ms linear;
  }
  .calculation-guide-message p:nth-child(2){
    color:var(--muted);
    font-weight:400;
  }
}

@media (prefers-reduced-motion:reduce){
  .calculation-status:not([hidden]),
  .calculation-setup-panel{animation:none !important}
}

/*
==========================================================
SPOT SKETCH v1.4 — EV MEASUREMENT MODE / MOBILE
==========================================================
*/

@media (max-width:900px){
  body.mobile-shell-active .metering-mode-selector{
    width:150px;
    margin-top:8px;
  }

  body.mobile-shell-active .metering-mode-option,
  body.dark.mobile-shell-active .metering-mode-option{
    width:100%;
    min-width:0;
    height:26px;
    min-height:26px;
    font-size:9px;
  }

  body.mobile-shell-active .metering-setup-controls.is-ev-mode{
    width:min(72vw,270px) !important;
    grid-template-columns:minmax(0,1fr) !important;
    justify-self:center !important;
    margin-inline:auto !important;
  }

  /* The mode replaces the old generic "IN" abbreviation. */
  body.mobile-shell-active .initial-metering-label{
    width:auto !important;
    overflow:visible !important;
    font-size:8px !important;
  }

  body.mobile-shell-active .initial-metering-label::after{
    content:none !important;
  }

  body.mobile-shell-active #initialMeteringDisplay[data-measurement-mode="ev"]{
    max-width:104px !important;
  }

  body.mobile-shell-active #initialMeteringDisplay[data-measurement-mode="f-stop"]{
    max-width:150px !important;
  }

  /*
    Bottom-left counterpart to Tone Guide. These are deliberately plain text
    actions on the same baseline, never capsule buttons.
  */
  body.mobile-shell-active .site-backlink{
    position:fixed;
    z-index:calc(var(--layer-header) - 1);
    left:max(12px,var(--safe-area-left));
    bottom:calc(var(--safe-area-bottom) + 58px);
    display:inline-block;
    height:auto;
    min-height:0;
    padding:5px 7px;
    border:0;
    border-radius:0;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    font-size:8px;
    line-height:normal;
    opacity:.72;
  }

  body.dark.mobile-shell-active .site-backlink{
    background:transparent !important;
  }

  body.mobile-shell-active.metering-setup-active .site-backlink,
  body.mobile-shell-active.calculation-setup-active .site-backlink,
  body.mobile-shell-active.calculation-active .site-backlink,
  body.mobile-shell-active.project-info-open .site-backlink{
    opacity:.28;
    pointer-events:none;
  }
}