/* The shared root gutter keeps the planning shell aligned with content pages. */
.page-viewport { display:contents; }
.detail-topline-track,.hero-art-track {display:contents}
.mobile-product-view,.mobile-catalog-view { display:none; }
.filter-sentinel { display:none; }
#startupLoader.is-leaving { display:grid; position:fixed; inset:0; z-index:1000; place-content:center; justify-items:center; gap:22px; background:var(--loader-bg); color:var(--loader-ink); font-size:var(--font-body); pointer-events:none; animation:loader-out 420ms ease-in-out both; }
@media(max-width:720px) {
  .contents-list { flex-direction:column; align-items:flex-start; }
  .content-chip { font-size:var(--font-body); }

  /* Larger but consistent reading sizes in the phone Details screen. Scope
     these to the moved product panel; desktop and other Composer surfaces
     retain their compact metadata hierarchy. */
  .mobile-product-body .effect-card {
    grid-template-columns:40px minmax(0,1fr);
    gap:12px;
    padding:12px;
  }
  .mobile-product-body .effect-icon {
    width:40px;
    height:40px;
    border-radius:11px;
  }
  .mobile-product-body .effect-icon svg.icon {
    width:22px;
    height:22px;
  }
  .mobile-product-body .effect-mode {
    font-size:var(--font-compact);
    line-height:1.35;
  }
  .mobile-product-body .effect-name {
    font-size:var(--font-body);
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .mobile-product-body .button.purpose-toggle {
    font-size:var(--font-button);
  }

  /* Notes and Contents are peer subpanels; use the same heading scale. */
  .mobile-product-body :is(.contents-heading,.detail-notes) .subpanel-title {
    font-size:var(--font-body);
    line-height:1.3;
    gap:9px;
  }
  .mobile-product-body .contents-heading .contents-count {
    min-width:25px;
    height:25px;
    padding:0 7px;
    font-size:var(--font-control);
  }
  .mobile-product-body .research-manifest > summary {
    font-size:var(--font-body);
  }
  .mobile-product-body .research-manifest > summary .disclosure-chevron {
    width:20px;
    height:20px;
    stroke-width:2.3;
  }

  /* Match the hero eyebrow to the increased caption scale, with breathing
     room before the product name. */
  .mobile-product-body .crumb {
    font-size:var(--font-compact);
  }
  .mobile-product-body .hero-copy > .eyebrow {
    font-size:var(--font-compact);
    margin-top:16px;
  }
  .mobile-product-body .hero h1 {
    margin-top:16px;
  }
  :root { --sheet-peek:50px; --mobile-gap:7px; --mobile-nav-h:var(--header-h); --hero-range:150px; --mobile-view-bottom:calc(var(--sheet-peek) + env(safe-area-inset-bottom) + var(--mobile-gap)); }
  html,html[data-page] body { height:100%; min-height:0; overflow:hidden; }
  html[data-page] .app-shell { display:block; height:100dvh; min-height:0; overflow:hidden; }
  .page-viewport { display:block; height:calc(100dvh - var(--mobile-view-bottom)); overflow:auto; overscroll-behavior-y:contain; scrollbar-gutter:stable; }
  .system-sheet-open .page-viewport { overflow:hidden; }
  html[data-page="composer"] .topbar { position:relative; top:auto; min-height:calc(var(--header-h) + env(safe-area-inset-top)); height:calc(var(--header-h) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); width:100%; }
  .workspace { height:auto; min-height:0; gap:var(--mobile-gap); padding:var(--mobile-gap); padding-bottom:0; }
  .catalog-panel { display:flex; flex-direction:column; height:auto; min-height:calc(100dvh - var(--header-h) - var(--sheet-peek) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2 * var(--mobile-gap)); max-height:none; overflow:visible; backdrop-filter:none; }
  .catalog-controls { display:grid; gap:0; padding:0; top:calc(0px - var(--catalog-search-space,46px)); margin-inline:0; transition:margin 180ms ease,background-color 200ms ease,box-shadow 200ms ease,backdrop-filter 200ms ease,-webkit-backdrop-filter 200ms ease; }
  .catalog-controls .search-wrap { margin:0 12px 8px; }
  .filter-sentinel { display:block; flex:none; height:0; }
  .catalog-filters { flex:none; padding:8px 12px 11px; background:transparent; border-bottom:1px solid var(--line); transition:padding 180ms ease; }
  .catalog-controls.is-stuck { margin-inline:calc(-1 * (var(--mobile-gap) + 1px)); }
  .catalog-filters.is-stuck { padding-inline:calc(12px + var(--mobile-gap) + 1px); }
  .catalog-list { flex:1; height:auto; overflow:visible; scroll-behavior:auto; }
  .catalog-list [data-product] { scroll-margin-block:96px 12px; }
  /* Keep mobile product actions and the Need action consistently touch-sized. */
  .product-card { grid-template-columns:60px minmax(0,1fr) 36px; column-gap:clamp(13px,4vw,20px); }
  .product-card .card-action { position:relative; width:36px; height:36px; min-width:36px; min-height:36px; border-radius:10px; }
  .product-card .card-action .icon { width:19px; height:19px; }
  .cap-row .need-action { position:relative; width:36px; height:36px; min-width:36px; min-height:36px; border-radius:10px; }
  .cap-row .need-action .icon { width:19px; height:19px; }
  /* Slightly enlarge the effective hit region without enlarging the visible buttons. */
  .product-card .card-action::after,.cap-row .need-action::after { content:""; position:absolute; inset:-4px; }
  .catalog-panel .card-name { font-size:var(--font-body); }
  .catalog-panel .panel-title { font-size:var(--font-title-large); }
  .segment { font-size:var(--font-compact); }
  .domain-filters { gap:2px; justify-content:flex-start; }
  .domain-chip { flex:1; justify-content:center; font-size:var(--font-eyebrow); padding-inline:8px; gap:4px; }
  .domain-filters.is-compact .domain-chip { font-size:var(--font-label); }
  /* Make the mobile plan tray, individual removal and clear controls readable
     without changing the desktop layout. Preserve room for corner badges. */
  .capability-panel .selection-tray { padding-inline:12px; }
  .capability-panel .tray-scroll { gap:12px; min-height:77px; padding:11px 10px 9px 9px; }
  .capability-panel .tray-item { flex:0 0 56px; width:56px; height:56px; }
  .capability-panel .tray-thumb { width:56px; height:56px; border-radius:13px; }
  .capability-panel .tray-thumb > .product-iso { width:63px; height:57px; }
  .capability-panel .tray-quantity { width:24px; height:24px; left:-6px; top:-7px; font-size:var(--font-eyebrow); }
  .capability-panel .tray-remove { width:24px; height:24px; right:-2px; top:-7px; }
  .capability-panel .tray-remove .icon { width:14px; height:14px; }
  .capability-panel .tray-remove::after { content:""; position:absolute; inset:-10px; }
  .capability-panel .tray-clear { flex:0 0 56px; width:56px; height:56px; border-radius:13px; }
  .capability-panel .tray-clear .icon { width:22px; height:22px; }
  /* The capability list stays native-scrollable, but top pulls are consumed
     by Recommended instead of showing iOS rubber-band overscroll. */
  #capabilityList { overscroll-behavior-y:none; }
  .capability-panel .scenario-panel { padding-inline:12px; }
  .capability-panel .scenario-top { padding:8px 10px 4px; }
  #systemToggle { position:relative; width:38px; height:38px; min-width:38px; min-height:38px; margin-left:0; }
  #systemToggle .icon { width:20px; height:20px; }
  #systemToggle::after { content:""; position:absolute; inset:-3px; }
  /* The compact summary button stays visually short with a 44px touch area. */
  .detail-summary-actions>.button::after { content:""; position:absolute; inset:-5px 0; }
  /* Leave breathing room below the chevron, only in the expanded phone sheet. */
  .capability-panel:is(.sheet-open,.sheet-transiting) .scenario-top {
    height:calc(var(--sheet-peek) + 8px);
    min-height:calc(var(--sheet-peek) + 8px);
    padding-bottom:8px;
  }
  .scenario-actions .button.small { font-size:var(--font-control); padding-inline:7px; }
  .scenario-title { font-size:var(--font-heading); }
  .summary-panel { padding-bottom:6px; }
  .capability-panel .summary-label { font-size:12px; line-height:1.4; letter-spacing:.045em; }
  .capability-panel .summary-value { font-size:clamp(16px,4.8vw,19px); line-height:1.35; margin-top:5px; font-variant-numeric:tabular-nums; }
  .capability-panel .summary-cell { padding:10px 8px; }
  /* Details and Catalog slide behind the persistent foundation tab. */
  .mobile-product-view,.mobile-catalog-view { position:fixed; z-index:50; inset:0 0 var(--mobile-view-bottom); display:grid; grid-template-rows:calc(var(--mobile-nav-h) + env(safe-area-inset-top)) minmax(0,1fr); width:100%; height:auto; background:var(--bg); box-shadow:12px 0 32px rgba(0,0,0,.12); }
  /* Vertical scrolling and pinch zoom remain native; only right-edge starts
     participate in horizontal dismissal. No hit layer covers content/controls. */
  .mobile-product-view,.mobile-catalog-view,#detailScroll,#supplierContent {touch-action:pan-y pinch-zoom}
  .screen-dragging {user-select:none;cursor:grabbing;will-change:transform}
  /* Header identity is mirrored outside the sliding surface during dismissal. */
  .mobile-detail-nav .screen-header-mirrored{visibility:hidden}
  .mobile-detail-nav.screen-header-mirror{position:fixed;z-index:60;pointer-events:none;background:transparent;border:0;box-shadow:none}
  .screen-dragging :is(#detailScroll,#supplierContent) {overflow:hidden;overscroll-behavior:none}
  /* Match the regular Composer header's 66px content row, safe-area padding
     and insets so switching between screens never shifts the identity. */
  .mobile-detail-nav { display:flex; align-items:center; justify-content:flex-end; gap:8px; width:100%; margin:0; padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left)); background:var(--bg); border-bottom:1px solid var(--line); overflow:hidden; scrollbar-gutter:stable; }
  html[data-page="composer"] .topbar {padding-left:max(16px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));}
  .mobile-detail-nav .button {flex:none; width:44px; height:44px; min-height:44px; padding:0; gap:0; }
  .mobile-detail-nav>.brand {gap:11px;}
  .mobile-detail-nav .brand-name {font-size:calc(var(--font-body) + 2px);font-weight:760;letter-spacing:-.045em;}
  .mobile-product-body,.mobile-catalog-body { min-height:0; padding:var(--mobile-gap); padding-bottom:0; }
  .mobile-product-body .detail-panel { display:block; height:100%; min-height:0; max-height:none; }
  .mobile-product-view {container-type:inline-size}
  .mobile-product-view>.detail-summary {background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;transition:var(--summary-reveal),background-color 200ms ease,box-shadow 200ms ease,backdrop-filter 200ms ease,-webkit-backdrop-filter 200ms ease;top:calc(var(--mobile-nav-h) + env(safe-area-inset-top));padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .mobile-detail-nav>.brand {margin-right:auto}
  .detail-scroll { height:100%; min-height:0; overflow:auto; overscroll-behavior:contain; }
  /* Native sticky positioning holds the compact layout box for the shrink range.
     No scroll-counteracting translation competes with asynchronous scrolling. */
  .detail-flow {padding-bottom:14px}
  .detail-topline,.iso-stage,.iso-stage::before,.iso-stage::after,.iso-stage>svg,.iso-stage :is(.iso-topline,.occupancy-label) {transition-property:none}
  .detail-scroll {padding-bottom:0;overflow-anchor:none;scroll-timeline:--detail-hero block}
  .detail-topline-track {display:block;height:calc(22px + var(--hero-range));margin-bottom:calc(-1 * var(--hero-range))}
  .detail-topline {position:sticky;top:0;z-index:1}
  .hero-art-track {display:block;order:1;height:246px;min-width:0}
  .iso-stage {position:sticky;top:var(--hero-pin-top)}
  .iso-stage {min-height:0;height:96px;padding:0;border:0;background:none;overflow:visible;pointer-events:none}
  .iso-stage::after {content:"";position:absolute;inset:0 0 auto;height:246px;border:1px solid var(--line);border-radius:inherit;background:linear-gradient(145deg,var(--graph-shine),var(--graph-low));pointer-events:none;z-index:-1}
  .iso-stage::before,.iso-stage::after {transform-origin:50% 0;transform:scaleY(calc(1 - 150 / 246 * var(--hero-progress,0)))}
  .iso-stage::before {bottom:auto;height:246px;border-radius:inherit}
  .iso-stage > svg {position:absolute;top:33px;height:180px;max-height:none;margin:0;transform:translateY(calc(-75px * var(--hero-progress,0))) scale(calc(1 - .6 * var(--hero-progress,0)))}
  .iso-stage :is(.iso-topline,.occupancy-label) {opacity:calc(1 - var(--hero-progress,0))}
  .iso-stage .occupancy-label {bottom:auto;top:207px;transform:translateY(calc(-150px * var(--hero-progress,0)))}
  .native-hero-scroll .iso-stage::before,.native-hero-scroll .iso-stage::after {animation-name:detail-hero-surface}
  .native-hero-scroll .iso-stage>svg {animation-name:detail-hero-image}
  .native-hero-scroll .iso-stage .iso-topline {animation-name:detail-hero-label}
  .native-hero-scroll .iso-stage .occupancy-label {animation-name:detail-hero-occupancy}
  .native-hero-scroll :is(.iso-stage>svg,.iso-topline,.occupancy-label),.native-hero-scroll .iso-stage::before,.native-hero-scroll .iso-stage::after {animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--detail-hero;animation-range:0px var(--hero-range)}
  /* Only the hero's add/in-plan action receives the larger phone tap target. */
  .mobile-product-body .hero-actions>.button[data-toggle-product] {min-height:52px;font-size:var(--font-lead)}
  .mobile-product-body .hero-actions>.quantity-control {width:100%;height:44px}
  .mobile-product-body .hero-actions .qty-button {width:44px;flex:0 0 44px}
  .mobile-product-body .hero-actions .qty-value {flex:1}
  .hero h1 { font-size:var(--font-display); }
  .skeleton .sk-hero { height:200px; }
  .brand-app { display:none !important; }
  .top-actions { gap:3px; }
}
@keyframes detail-hero-surface {from{transform:scaleY(1)}to{transform:scaleY(calc(96 / 246))}}
@keyframes detail-hero-image {from{transform:translateY(0) scale(1)}to{transform:translateY(-75px) scale(.4)}}
@keyframes detail-hero-label {from{opacity:1}to{opacity:0}}
@keyframes detail-hero-occupancy {from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-150px)}}
@media(prefers-reduced-motion:reduce) { .catalog-filters { transition:none; } #startupLoader.is-leaving { display:none; } }