/* WINDOW MODEL V2 — canonical state shell.
   One source of truth for ICON / BAR / HALF / INSIDE / SCREEN geometry and visibility.
   Pictogram face material lives in icon-button.css.
   Typography values live in style.css and are supplied through CSS variables. */
/* Nested content remains scrollable by gesture; in-window scroll hints are intentionally absent. */

#phone{
  --lab-bar-height:80px;
  --lab-primary-pictogram-size:68px;
  --lab-primary-pictogram-radius:34px;
  --lab-primary-leading-width:80px;
  --lab-primary-glyph-diameter:34px;
}

/* Shared window mechanics. Geometry (left/top/width/height/radius) is written by app.js. */
.demo-window{
  position:absolute;
  overflow:visible;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:pan-y;
  color:#173250;
  outline:none;
  transition:none; /* animation is owned exclusively by app.js draw() */
}
.demo-window *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.demo-window input,
.demo-window textarea,
.demo-window [contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
.demo-window:focus-visible{
  outline:3px solid #1764bc;
  outline-offset:3px;
}
.demo-window button:disabled{opacity:.3;cursor:default}
.phone:has(.demo-window.dragging){cursor:grabbing}

/* The logical window never paints the glass itself. One dedicated surface morphs
   between square ICON, BAR and HALF while the pictogram remains an independent layer. */
.demo-window{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.window-surface{
  position:absolute;
  inset:0;
  display:none;
  border-radius:inherit;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.demo-window.is-icon>.window-surface,
.demo-window.is-bar:not(.is-inside)>.window-surface,
.demo-window.is-root-level.is-half>.window-surface{
  display:block;
  background:var(--lab-surface,rgba(202,220,230,.35));
  border-style:solid;
  border-width:var(--lab-border-width,0px);
  border-color:var(--lab-border-color,rgba(255,255,255,0));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.60),0 10px 24px #16395426;
  backdrop-filter:blur(var(--lab-window-blur,12px)) saturate(1.12);
  -webkit-backdrop-filter:blur(var(--lab-window-blur,12px)) saturate(1.12);
}

/* Shared shell elements. */
.window-screen,
.window-out{
  position:absolute;
  width:44px;
  height:44px;
  border:0!important;
  border-radius:50%!important;
  cursor:pointer;
  touch-action:manipulation;
  z-index:5;
}
.window-screen{
  right:10px;
  top:10px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.32)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  color:rgba(0,0,0,.62)!important;
  font-size:21px;
}
.window-out{
  right:8px;
  top:78px;
  background:rgba(255,255,255,.26)!important;
  color:rgba(0,0,0,.55)!important;
  font-size:22px;
}
.window-name,
.window-detail,
.window-parent,
.window-size{position:absolute}
.window-name{white-space:nowrap}
.window-detail{
  display:none;
  color:rgba(23,50,80,.68);
  pointer-events:none;
}
.window-size{font-size:11px;opacity:.58}

/* Pictogram host: geometry only. The visible face is in icon-button.css. */
.demo-window>.window-number{
  position:absolute!important;
  display:grid!important;
  place-items:center!important;
  appearance:none;
  -webkit-appearance:none;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#173250;
  cursor:pointer;
  z-index:4;
  touch-action:none;
  overflow:visible!important;
}
.demo-window.is-icon>.window-number,
.demo-window.is-bar:not(.is-inside)>.window-number,
.demo-window.is-root-level.is-half>.window-number{
  width:var(--lab-primary-pictogram-size)!important;
  height:var(--lab-primary-pictogram-size)!important;
  border-radius:var(--lab-primary-pictogram-radius)!important;
}
.demo-window.is-icon>.window-number>.window-glyph,
.demo-window.is-bar:not(.is-inside)>.window-number>.window-glyph,
.demo-window.is-root-level.is-half>.window-number>.window-glyph{
  width:var(--lab-primary-glyph-diameter)!important;
  height:var(--lab-primary-glyph-diameter)!important;
}

/* ICON — outer circle only. */
.demo-window.is-icon>.window-number{
  left:calc(var(--lab-bar-height) / 2)!important;
  top:calc(var(--lab-bar-height) / 2)!important;
  transform:translate(-50%,-50%)!important;
}
.demo-window.is-icon>.window-name,
.demo-window.is-icon>.window-detail,
.demo-window.is-icon>.window-parent,
.demo-window.is-icon>.window-size,
.demo-window.is-icon>.window-screen,
.demo-window.is-icon>.window-out{display:none!important}

/* BAR — same pictogram diameter and left/top/bottom gap as ICON. */
.demo-window.is-bar:not(.is-inside)>.window-number{
  left:calc(var(--lab-bar-height) / 2)!important;
  top:calc(var(--lab-bar-height) / 2)!important;
  transform:translate(-50%,-50%)!important;
}
.demo-window.is-bar:not(.is-inside)>.window-name{
  display:block!important;
  left:calc(var(--lab-primary-leading-width) + var(--lab-text-gap,10px))!important;
  right:var(--lab-text-right,58px)!important;
  top:var(--lab-title-top,20px)!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.demo-window.is-bar:not(.is-inside)>.window-detail{display:none!important}
.demo-window.is-bar:not(.is-inside)>.window-size{
  display:block!important;
  left:56px!important;
  bottom:13px!important;
}
.demo-window.is-bar:not(.is-inside)>.window-parent{
  display:block;
  left:56px;
  top:auto;
  bottom:8px;
  max-width:calc(100% - 112px);
  color:rgba(23,50,80,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}
.demo-window.is-bar:not(.is-inside)>.window-screen{
  display:grid!important;
  right:8px!important;
  top:calc((var(--lab-bar-height) - 34px) / 2)!important;
  width:34px!important;
  height:34px!important;
}
.demo-window.is-bar:not(.is-inside)>.window-out{display:none!important}

/* HALF-HEADER-LAYER-01 — the HALF header is a slightly denser derived layer.
   It belongs to the window presentation model, not to Laboratory controls. */
.demo-window>.window-surface::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:var(--lab-half-header-height,104px);
  background:linear-gradient(180deg,
    rgba(255,255,255,.15) 0%,
    rgba(255,255,255,.12) 72%,
    rgba(255,255,255,.09) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
  opacity:var(--half-header-opacity,0);
  pointer-events:none;
}

/* HALF — the BAR header stays fixed while the outer window grows downward. */
.demo-window.is-root-level.is-half{
  isolation:auto!important;
  overflow:visible!important;
}
.demo-window.is-root-level.is-half::before,
.demo-window.is-root-level.is-half::after{
  content:none!important;
  display:none!important;
}
.demo-window.is-root-level.is-half>.window-number{
  left:calc(var(--lab-bar-height) / 2)!important;
  top:calc(var(--lab-bar-height) / 2)!important;
  transform:translate(-50%,-50%)!important;
}
.demo-window.is-root-level.is-half>.window-name{
  display:block!important;
  left:calc(var(--lab-primary-leading-width) + var(--lab-text-gap,10px))!important;
  right:var(--lab-text-right,58px)!important;
  top:var(--lab-title-top,20px)!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.demo-window.is-root-level.is-half>.window-name::after{content:none!important;display:none!important}
.demo-window.is-root-level.is-half>.window-detail{
  display:-webkit-box!important;
  left:calc(var(--lab-primary-leading-width) + var(--lab-text-gap,10px))!important;
  right:var(--lab-text-right,58px)!important;
  top:var(--lab-detail-top,40px)!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal!important;
  overflow:hidden;
  opacity:var(--half-content-opacity,1);
  transition:none!important;
}
.demo-window.is-root-level.is-half>.window-parent{display:none!important}
.demo-window.is-root-level.is-half>.window-size{
  display:block!important;
  left:14px!important;
  bottom:9px!important;
}
.demo-window.is-root-level.is-half>.window-screen{
  display:grid!important;
  right:8px!important;
  top:12px!important;
}
.demo-window.is-root-level.is-half>.window-out{
  right:8px!important;
  top:78px!important;
}

/* INSIDE — direct HALF children are compact pictogram tiles, not nested outer windows. */
.demo-window.is-inside{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
  border-radius:0!important;
  color:#173250;
}
.demo-window.is-inside>.window-number{
  width:var(--lab-inside-diameter,52px)!important;
  height:var(--lab-inside-diameter,52px)!important;
  left:50%!important;
  top:2px!important;
  transform:translateX(-50%)!important;
  border-radius:var(--lab-inside-radius,26px)!important;
}
.demo-window.is-inside>.window-number>.window-glyph{
  width:100%!important;
  height:100%!important;
}
.demo-window.is-inside>.window-name{
  display:-webkit-box!important;
  left:2px!important;
  right:2px!important;
  top:calc(var(--lab-inside-diameter,52px) + 8px)!important;
  width:auto!important;
  padding:0!important;
  text-align:center!important;
  white-space:normal!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden!important;
  text-overflow:ellipsis;
  font-size:var(--lab-inside-label-size,10.5px)!important;
  font-weight:500!important;
  line-height:1.08!important;
  letter-spacing:0!important;
}
.demo-window.is-inside>.window-detail,
.demo-window.is-inside>.window-parent,
.demo-window.is-inside>.window-size,
.demo-window.is-inside>.window-screen,
.demo-window.is-inside>.window-out{display:none!important}

/* SCREEN — the window itself becomes the full card page. */
.demo-window.is-screen{
  background:#f2f2f7!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
  border-radius:0!important;
}
.demo-window.is-screen::before,
.demo-window.is-screen::after{content:none!important;display:none!important}
.demo-window.is-screen>.window-number,
.demo-window.is-screen>.window-name,
.demo-window.is-screen>.window-detail,
.demo-window.is-screen>.window-parent,
.demo-window.is-screen>.window-size,
.demo-window.is-screen>.window-out{display:none!important}
.demo-window.is-screen>.window-screen{
  display:grid!important;
  place-items:center;
  left:8px!important;
  right:auto!important;
  top:8px!important;
  width:42px!important;
  height:42px!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.92)!important;
  color:#111!important;
  box-shadow:0 1px 1px rgba(0,0,0,.05)!important;
  opacity:1!important;
  z-index:40!important;
  font-size:28px!important;
}

/* Interaction states. */
.demo-window.nest-target{
  outline:none!important;
  opacity:.52!important;
}
.demo-window.nest-target::after{content:none!important;display:none!important}
.demo-window.dragging{
  z-index:50!important;
  cursor:grabbing;
  touch-action:none;
  opacity:1!important;
}

/* BAR ↔ ICON morph keeps BAR content on the BAR coordinate system until it
   has faded. Target-state classes may change immediately, but content geometry does not. */
.demo-window.is-compact-morph>.window-name{
  display:block!important;
  left:calc(var(--lab-primary-leading-width) + var(--lab-text-gap,10px))!important;
  right:var(--lab-text-right,58px)!important;
  top:var(--lab-title-top,20px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  opacity:var(--bar-content-opacity,1)!important;
  transition:none!important;
  pointer-events:none!important;
}
.demo-window.is-compact-morph>.window-size{
  display:block!important;
  left:56px!important;
  bottom:13px!important;
  opacity:var(--bar-content-opacity,1)!important;
  transition:none!important;
  pointer-events:none!important;
}
.demo-window.is-compact-morph>.window-screen{
  display:grid!important;
  place-items:center!important;
  right:8px!important;
  top:calc((var(--lab-bar-height) - 34px) / 2)!important;
  width:34px!important;
  height:34px!important;
  opacity:var(--bar-content-opacity,1)!important;
  transition:none!important;
  pointer-events:none!important;
}