/* ==========================================================================
   IVY-F DUO LAYOUT — THE ONLY DUO GEOMETRY FILE

   HUMAN EDITING GUIDE
   -------------------
   1. Change the variables immediately below for the main layout.
   2. Search this file only for detailed Duo positioning.
   3. duo-aesthetics-off.css controls colours/performance only.
   4. duo-responsive.css is legacy and is no longer loaded.
   5. Search CANVAS DOCK or PASSPORT DOCK below for carousel placement.
      duo-canvas-dock.css styles BOTH layouts; one shared JS engine follows them.

   UNIQUE BILLIE HOOKS
   #ivy-duo-billie-panel    outer position and size
   #ivy-duo-billie-surface  visible panel surface
   #ivy-duo-billie-messages conversation area
   #ivy-duo-billie-composer input/composer area
   ========================================================================== */

:root {
  --ivy-duo-gap: 34px;
  --ivy-duo-safe-inline: clamp(24px, 4vw, 72px);
  --ivy-duo-safe-block: clamp(20px, 3vh, 48px);
  --ivy-duo-surface-radius: clamp(28px, 3vw, 46px);
  --ivy-duo-motion-distance: 18px;
}

html.ivy-duo-mode {
  /* ===== MAIN DUO DIMENSIONS ===== */
  --ivy-duo-hardware-rail: 0px;
  --ivy-duo-home-edge: clamp(14px, 3vw, 24px);
  --ivy-duo-home-header-height: 76px;
  --ivy-duo-home-dock-width: 68px;

  --duo-billie-radius: 26px;

  --ivy-vw: 1vw;
  --ivy-vh: 1vh;
  background: #101116;
}

html.ivy-duo-mode body {
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: #101116;
}

/* ==========================================================================
   MAIN WORKSPACE — matches the Billie panel exactly

   The glass panel is the permanent workspace. Billie and every future feature
   panel occupy this same footprint; the system rail is positioned separately.
   ========================================================================== */
html.ivy-duo-mode .glass-panel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 81dvw !important;
  height: var(--ivy-duo-viewport-height,100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  border-radius: 0 8px 8px 0 !important;
  overflow: visible !important;
  contain: none;
}

html.ivy-duo-mode .day-cycle-arc {
  contain: paint;
}

/* ==========================================================================
   BILLIE PANEL — EDIT THIS BLOCK

   This is the ONLY Duo rule that positions or sizes .ai-panel.
   Use these five familiar properties freely. There is no later Duo selector
   overriding them and no inset shorthand controlling the outer panel.
   ========================================================================== */
html.ivy-duo-mode .ai-panel {
  position: absolute !important;
  top: 0px !important;
  left: 0px !important;

  width: 81dvw !important;
  border-radius: 0 8px 8px 0 !important;
  height: var(--ivy-duo-viewport-height,100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  contain: layout paint;
  overflow: clip !important;
}

html.ivy-duo-mode .ai-panel__surface {
  /* The wrapper is invisible; inherit its radius so the visible Billie
     surfaces respond to the simple border-radius values in the block above. */
  border-radius: inherit !important;
}

html.ivy-duo-mode .glass-panel,
html.ivy-duo-mode .glass-panel > *,
html.ivy-duo-mode .ai-panel__surface,
html.ivy-duo-mode .icon-bar__icon {
  transition-duration: var(--ivy-duration-base, 320ms);
}

/* --------------------------------------------------------------------------
   Passport / outer display
   -------------------------------------------------------------------------- */

html.ivy-duo-mode.ivy-duo-layout--passport {
  /* The right-side camera and information controls permanently occupy roughly
     106pt on the 466pt outer display. The clamp keeps the same relationship
     when Device Hub previews the pose at another scale. */
  --ivy-duo-hardware-rail: clamp(88px, 22.75vw, 108px);
  --ivy-duo-home-dock-width: clamp(54px, 14vw, 66px);
  --ivy-duo-thumb-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

/* The home glass is the display canvas, rather than a centered phone card.
   Artwork can flow below the system rail; interactive descendants reserve it. */
html.ivy-duo-mode.ivy-duo-layout--passport .glass-panel {
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   DAY CYCLE CLOCK IN THE DUO SYSTEM RAIL

   Apple draws its clock above the app. Ivy's larger coloured time occupies
   the same spot underneath it, leaving a phase-coloured aura around Apple's
   white numerals. The phase name follows the shared clockwise pill track.
   -------------------------------------------------------------------------- */
html.ivy-duo-mode.ivy-duo-layout--passport .day-cycle-arc__phase-clock.is-visible {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--ivy-duo-viewport-height,100dvh) !important;
  max-width: none !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 8 !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport .day-cycle-arc__phase-clock-phase {
  display: none !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport .day-cycle-arc__phase-clock-separator {
  display: none !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport .day-cycle-arc__phase-clock-time {
  position: fixed !important;
  top: 84px !important;
  right: 4px !important;
  width: 88px !important;
  display: block !important;
  text-align: center !important;
  font-size: 15.5px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;
  opacity: 0.78 !important;
  background: none !important;
  color: var(--ambient-text-primary, #d7dbe4) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow:
    0 0 4px currentColor,
    0 0 9px currentColor !important;
}

/* ===== UTILITY BUTTON POSITIONS — EDIT HERE ONLY =====
   Canvas = open/book. Passport = closed.
   All four edges are explicit so shared mobile/desktop rules cannot leave
   an unwanted left or bottom anchor behind. JS still handles button actions.
   These scoped rules deliberately outrank the shared rules in index.html. */
html.ivy-duo-mode.ivy-duo-layout--canvas .ivy-logs-btn {
  position: fixed !important;
  top: 14.5svh !important;
  right: 3svw !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 12000 !important;
}
html.ivy-duo-mode.ivy-duo-layout--canvas .day-cycle-arc__settings-gear {
  position: fixed !important;
  top: 19svh !important;
  right: var(--duo-utility-right) !important;
  width: var(--duo-gear-size) !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 12000 !important;
}
html.ivy-duo-mode.ivy-duo-layout--canvas .day-cycle-arc__phase-clock-time {
  position: absolute !important;
  top: 2.6svh !important;
  right: -44.5svw !important;
  transform: none !important;
  z-index: 12000 !important;
  display: block !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;
  opacity: 0.78 !important;
  background: linear-gradient(
    135deg,
    var(--phase-clock-color-start),
    var(--phase-clock-color-end)
  ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 0 4px var(--phase-clock-glow-color),
    0 0 9px var(--phase-clock-glow-color) !important;
}
/* DYNAMIC TEXT — clockwise around the status pill.
   Move top/right to position the whole track. Its SVG path sets the bend.
   Fixed font size and starting point: longer names travel farther down. */
.ivy-duo-phase-curve { display: none; }
html.ivy-duo-mode.ivy-duo-layout--canvas .day-cycle-arc__phase-clock-phase {
  display: none !important;
}
html.ivy-duo-mode.ivy-duo-layout--canvas .ivy-duo-phase-curve {
  position: absolute !important;
  top: -1.4svh !important;
  right: calc(-46.4svw - 12px) !important;
}
/* Passport: the same track and type, anchored around the outer camera pill.
   Only these top/right values differ; no second SVG or text-fitting loop. */
html.ivy-duo-mode.ivy-duo-layout--passport .ivy-duo-phase-curve {
  position: fixed !important;
  top: 10px !important;
  right: -6px !important;
}
html.ivy-duo-mode:is(.ivy-duo-layout--canvas, .ivy-duo-layout--passport) .ivy-duo-phase-curve {
  width: 90px;
  height: 210px;
  display: block;
  overflow: visible;
  pointer-events: none;
  font-size: 8.5px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  fill: var(--ambient-text-secondary, #d7dbe4);
}
html.ivy-duo-mode:is(.ivy-duo-layout--canvas, .ivy-duo-layout--passport) .ivy-duo-phase-curve text,
html.ivy-duo-mode:is(.ivy-duo-layout--canvas, .ivy-duo-layout--passport) .ivy-duo-phase-curve textPath {
  /* Keep ordinary, unskewed letters; the path supplies rotation only. */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal !important;
  font-synthesis: none;
  font-stretch: normal;
  letter-spacing: inherit;
}
html.ivy-duo-mode.ivy-duo-layout--passport .day-cycle-arc__settings-gear {
  position: fixed !important;
  top: max(185px, env(safe-area-inset-top, 0px)) !important;
  right: calc(var(--ivy-duo-hardware-rail) + -76px) !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport .ivy-logs-btn,
html.ivy-duo-mode.ivy-duo-layout--passport .ivy-logs-btn.ivy-logs-btn--mobile {
  position: fixed !important;
  top: max(152px, env(safe-area-inset-top, 0px)) !important;
  left: 402px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport .ai-panel__surface {
  inset: 0 !important;
}

/* Canvas: the visible Billie surface fills its wrapper, not an inset card. */
html.ivy-duo-mode.ivy-duo-layout--canvas .ai-panel__surface {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport .ai-panel__messages {
  inset: 78px 18px 126px !important;
  padding-right: 5px !important;
}

/* Put Billie's collapse control inside the right-thumb arc. */
html.ivy-duo-mode.ivy-duo-layout--passport .ai-panel .ai-panel__toggle,
html.ivy-duo-mode.ivy-duo-layout--passport .ai-panel.is-open .ai-panel__toggle {
  top: auto !important;
  right: 14px !important;
  bottom: 122px !important;
  left: auto !important;
  transform: none !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport body:not(.ivy-guardian-mode) .ai-panel__input {
  right: 8px !important;
  bottom: 9px !important;
  left: 8px !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
}

/* The system rail is mostly empty below its permanent controls. Reuse that
   vertical space as a right-thumb dock instead of clipping a wide bottom row. */
html.ivy-duo-mode.ivy-duo-layout--passport .icon-bar {
  position: fixed !important;
  top: clamp(214px, 33dvh, 246px) !important;
  right: max(12.5px, env(safe-area-inset-right, 0px)) !important;
  bottom: var(--ivy-duo-thumb-bottom) !important;
  left: auto !important;
  width: var(--ivy-duo-home-dock-width) !important;
  height: auto !important;
  max-height: none !important;
  padding: 8px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  transform: none !important;
  overscroll-behavior: contain;
  scrollbar-width: none !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport .icon-bar::-webkit-scrollbar {
  display: none !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport .icon-bar__category {
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport .icon-bar__category--in-app {
  top: auto !important;
  left: auto !important;
  margin-top: 5px !important;
  padding-top: 9px !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport .icon-bar__category-label {
  margin: 0 0 1px !important;
  font-size: 0.39rem !important;
  letter-spacing: 0.11em !important;
}

html.ivy-duo-mode.ivy-duo-layout--passport .icon-bar__icon {
  width: 43px !important;
  height: 43px !important;
  min-width: 43px !important;
  min-height: 43px !important;
  border-width: 1px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}

html.ivy-duo-mode.ivy-duo-layout--passport .icon-bar__svg {
  width: 20px !important;
  height: 20px !important;
}

/* Keep profile-edit affordances out of the hardware rail until their own Duo
   interaction is designed; normal phone and desktop behavior is untouched. */
html.ivy-duo-mode.ivy-duo-layout--passport .icon-bar > .panel-edit-container {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Canvas / inner display foundation
   -------------------------------------------------------------------------- */

html.ivy-duo-mode.ivy-duo-layout--canvas {
  /* CANVAS WORKSPACE — one size and corner definition for every panel. */
  --duo-workspace-width: calc(100dvw - 108px);
  --duo-workspace-height: calc(var(--ivy-duo-viewport-height,100dvh) - 108px);
  --duo-workspace-corners: 60px 8px 8px 0;
  --ivy-duo-hardware-rail: max(0px, env(safe-area-inset-right, 0px));
  /* Gear and vertical carousel share this centre line. */
  --duo-utility-right: 3svw;
  --duo-gear-size: clamp(2.2rem, 2vw + 1.2rem, 3.2rem);
}

html.ivy-duo-mode.ivy-duo-layout--canvas .glass-panel {
  box-sizing: border-box !important;
  width: var(--duo-workspace-width) !important;
  height: var(--duo-workspace-height) !important;
  /* Top-left follows the inner display bezel; other corners stay unchanged.
     Visual estimate from the simulator screenshot, adjustable here. */
  border-radius: var(--duo-workspace-corners) !important;
  overflow: hidden !important;
  /* Also clips fixed-position descendants, unlike overflow alone. */
  clip-path: inset(0 round var(--duo-workspace-corners));
}

html.ivy-duo-mode.ivy-duo-layout--canvas .glass-panel > :is(
  .ai-panel, .timing__panel, .trading__sim-panel,
  .life-panel, .achievement-panel, .color_engine-panel, .comment-panel,
  .video-editor-panel
) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  border-radius: var(--duo-workspace-corners) !important;
}

/* ROUTINE FINANCE — independent body-level panel. Edit geometry here.
   Canvas uses the workspace dimensions by default; Passport uses 81dvw.
   This panel is not constrained or clipped by Billie's workspace. */
html.ivy-duo-mode :is(.routine-finance-panel, .timing__panel) {
  position: fixed !important;
  z-index: 12001 !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--duo-workspace-width, 81dvw) !important;
  height: var(--duo-workspace-height, 100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  border-radius: var(--duo-workspace-corners, 0 8px 8px 0) !important;
}

/* Body-level overlays cannot inherit clipping from the glass panel, so they
   use the very same workspace values and clip their own contents. */
html.ivy-duo-mode.ivy-duo-layout--canvas :is(.day-cycle-settings-panel, .ivy-logs-panel) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--duo-workspace-width) !important;
  max-width: var(--duo-workspace-width) !important;
  max-height: var(--duo-workspace-height) !important;
  box-sizing: border-box !important;
  transform: none;
  border-radius: var(--duo-workspace-corners) !important;
  overflow: hidden !important;
}
html.ivy-duo-mode.ivy-duo-layout--canvas .day-cycle-settings-panel {
  height: var(--duo-workspace-height) !important;
}

/* CANVAS DOCK — HUMAN EDITING CONTROLS
   right/bottom place the entire L. width/height set each arm's reach.
   --duo-dock-bend is the radius of the path, not the individual buttons.
   The JS reads these dimensions, so no matching JS edits are needed. */
html.ivy-duo-mode.ivy-duo-layout--canvas #ivy-duo-canvas-dock {
  position: fixed;
  /* Icons sit track-width/2 + 4px inside the dock (see measure() in JS).
     Subtract that inset to align icon centres with the gear's centre. */
  right: calc(var(--duo-utility-right) + var(--duo-gear-size) / 2 - var(--duo-dock-track-width) / 2 - 4px);
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: clamp(300px, 46vw, 540px);
  height: clamp(300px, 52dvh, 470px);
  --duo-dock-button-size: 54px;
  /* Same 44px face and 20px glyph as the closed rail; 54px tap target. */
  --duo-dock-visual-scale: 0.8148148148;
  --duo-dock-glyph-size: 20px;
  --duo-dock-label-size: 8px;
  --duo-dock-track-width: 74px;
  --duo-dock-bend: 70px;
  --duo-dock-spacing: 76px;
  /* Bottom-row heading centre: this far above the button's top edge. */
  --duo-dock-label-gap: 10px;
  /* Endpoint effect: distance from the open end where blur begins.
     Everything outside this zone stays completely sharp. */
  --duo-dock-blur-zone: 64px;
  --duo-dock-blur-max: 8px;
}

/* PASSPORT DOCK — straight carousel below the camera/clock/settings area.
   Edit top/right/bottom/width here; no separate JS positions to update. */
html.ivy-duo-mode.ivy-duo-layout--passport #ivy-duo-canvas-dock {
  position: fixed;
  top: max(217px, calc(env(safe-area-inset-top, 0px) + 32px));
  right: max(12.5px, env(safe-area-inset-right, 0px));
  bottom: var(--ivy-duo-thumb-bottom);
  width: var(--ivy-duo-home-dock-width);
  height: auto;
  --duo-dock-button-size: 44px;
  --duo-dock-visual-scale: 1;
  --duo-dock-glyph-size: 20px;
  --duo-dock-label-size: 8px;
  --duo-dock-track-width: 54px;
  --duo-dock-spacing: 60px;
  --duo-dock-label-gap: 10px;
  --duo-dock-blur-zone: 52px;
  --duo-dock-blur-max: 8px;
}

/* Both Duo poses use the optimized carousel inside the original navigation
   node. Ordinary phones/desktops keep their existing navigation unchanged. */
html.ivy-duo-mode .icon-bar.duo-canvas-dock-ready {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 12010 !important;
}

html.ivy-duo-mode .icon-bar.duo-canvas-dock-ready > :not(#ivy-duo-canvas-dock) {
  display: none !important;
}

html.ivy-duo-mode .duo-enter-motion {
  animation: ivy-duo-enter 420ms cubic-bezier(.18, 1.25, .32, 1) both;
}

@keyframes ivy-duo-enter {
  from {
    opacity: 0;
    transform: translate3d(0, var(--ivy-duo-motion-distance), 0) scale(.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ivy-duo-mode *,
  html.ivy-duo-mode *::before,
  html.ivy-duo-mode *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}
html.ivy-duo-mode .day-cycle-settings-panel {
  position: absolute;
  top: 1.5svh !important;
  left: 2.5dvw !important;
  width: 74dvw !important;
  height: 97dvh !important;
  max-width: none !important;
  max-height: none !important;
  transform: none;
  /* Duo panel edge: square against the left hardware edge, gently rounded
     where the workspace meets the right-side system rail. */
  border-radius: 30px 30px 30px 30px !important;
  overflow: hidden !important;
}
html.ivy-duo-mode .ivy-logs-panel {
  position: absolute;
  top: 0 !important;
  left: 40.1dvw !important;
  width: 82dvw !important;
  max-height: var(--ivy-duo-viewport-height,100dvh) !important;
  border-radius: 0 8px 0 0 !important;
  overflow: hidden !important;
}
/* The bottom-right corner only rounds when the panel physically reaches the
   display's bottom edge. duo-touch.js maintains this class as logs grow. */
html.ivy-duo-mode :is(
  .day-cycle-settings-panel,
  .ivy-logs-panel
).ivy-duo-panel-at-bottom {
  border-bottom-right-radius: 8px !important;
}
/* Settings draws two decorative glass layers over the real panel. They used
   to keep their own rounded corners, making edits to the panel look broken. */
html.ivy-duo-mode .day-cycle-settings-panel::before,
html.ivy-duo-mode .day-cycle-settings-panel::after {
  border-radius: inherit !important;
}

/* Temporary ordinary-phone preview: contain wide legacy off-screen panels. */
html.ivy-duo-mode.ivy-duo-mobile-preview {
  width: 100%; overflow: hidden !important;
}
html.ivy-duo-mode.ivy-duo-mobile-preview body {
  width: 100%; max-width: 100%; overflow: hidden !important;
}
html.ivy-duo-mode.ivy-duo-mobile-preview .day-cycle-arc {
  width: 100dvw; height: var(--ivy-duo-viewport-height,100dvh);
}
html.ivy-duo-mode.ivy-duo-mobile-preview.ivy-duo-layout--passport .day-cycle-arc__settings-gear {
  left: 85dvw !important; right: auto !important;
}
html.ivy-duo-mode.ivy-duo-mobile-preview.ivy-duo-layout--passport .day-cycle-arc__phase-clock-time {
  left: 81dvw !important; right: auto !important; width: 19dvw !important;
}

/* Move the home surface as one layer, including Billie; no chart/layout reflow. */
html.ivy-duo-mode.ivy-duo-layout--canvas .glass-panel {translate:0 var(--duo-hinge-lift,0px);}
@media(prefers-reduced-motion:reduce){html.ivy-duo-mode.ivy-duo-layout--canvas .glass-panel {translate:none;}}

/* The cover display starts the same hinge motion before the inner scene appears. */
html.ivy-duo-mode.ivy-duo-layout--passport #ivy-duo-canvas-dock {
 width:calc(var(--ivy-duo-home-dock-width) + var(--duo-hinge-outer,0) * 110px);
}
html.ivy-duo-mode.ivy-duo-layout--passport .glass-panel {
 translate:0 var(--duo-hinge-outer-lift,0px);
}
html.ivy-duo-mode.ivy-duo-layout--passport[data-duo-cover-folding] .glass-panel {
 clip-path:inset(0 0 var(--duo-hinge-outer-room,0px) 0 round 0 8px 8px 0);
}

/* Closing returns the INNER track to the cover rail's top, not its own top. */
html.ivy-duo-mode.ivy-duo-layout--canvas #ivy-duo-canvas-dock {
 top:calc(217px * (1 - var(--duo-hinge-progress,1)) + (var(--ivy-duo-viewport-height,100dvh) - max(16px, env(safe-area-inset-bottom,0px)) - clamp(300px,52dvh,470px)) * var(--duo-hinge-progress,1));
 height:auto;
}

html.ivy-duo-mode.ivy-duo-layout--passport #ivy-duo-canvas-dock {translate:0 calc(28px * var(--duo-hinge-outer,0));}