/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background: url('ndg-grid-bg.png') center center / cover no-repeat fixed;
  min-height: 100vh;
}

/* ---------- Size knobs ---------- */
:root { --toolbar-w: 70px; }

/* ---------- Stage: aligns icons to the frame on desktop ---------- */
.stage{
  position: relative;
  width: clamp(640px, 68vw, 880px);
  margin: 6vh auto;
}

/* ---------- Desktop icons (OUTSIDE the frame) ---------- */
.desktop-icons{
  position: absolute;
  top: 0; left: 0;
  display: grid;
  gap: 16px;
}
.icon-btn{
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
.icon-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Window (frame) ---------- */
.window{
  position: relative;
  width: 100%;
  margin-left: 0;             /* we’ll offset the whole stack, not the window */
  background: #c0c0c0;
  border: 2px solid #000;
}
.titlebar{
  background:#001f80; color:#fff; font-weight:bold;
  padding:6px 10px;
  display:flex; align-items:center; justify-content:space-between;
}
.close-btn{
  width:22px; height:22px; line-height:20px; text-align:center;
  background:#c0c0c0; border:1px solid #000; color:#000; cursor:default;
}

/* ---------- Frame body (grid: left toolbar + right canvas) ---------- */
.window-body{
  display:grid;
  grid-template-columns: var(--toolbar-w) 1fr;
  align-items: stretch;                 /* toolbar + canvas same height */
  height: clamp(380px, 54vh, 520px);
  gap:0;
}

/* Left vertical toolbar strip */
.toolbar{
  background:#c0c0c0;
  overflow:hidden;
  width: var(--toolbar-w);
}
.toolbar img{
  display:block;
  width:100%;
  height:100%;
  object-fit: contain;
}

/* Right side area that holds the iframe (canvas) and, if used, a palette below */
.canvas-area{
  display: block;                       /* keep simple; palette is outside */
  background: #e9e9e9;
}

/* The content frame (iframe) */
.content-frame{
  display:block;
  width:100%;
  height:100%;                          /* fill available row height */
  border:none;                          /* reset first */
  border: 2px solid #000;               /* use BORDER (not outline) to avoid bleed */
  background:#fff;
}

/* ---------- Pastel gradient palette: Purple → Blue → Turquoise → Green → Orange → Pink → Red ---------- */
.palette-row {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  border-top: 2px solid #000;
  background: #bfbfbf;
}
.swatch {
  height: 40px;
  border: 2px solid #000;
}

/* Pastel gradient swatches */
.pastel1  { background: #d8bfd8; } /* pastel purple */
.pastel2  { background: #c7c8de; }
.pastel3  { background: #b0cfe4; }
.pastel4  { background: #9bd7da; }
.pastel5  { background: #96e1d4; }
.pastel6  { background: #9fe8c2; }
.pastel7  { background: #b8eeb0; } /* pastel green */
.pastel8  { background: #d8efb2; }
.pastel9  { background: #f4e7b6; }
.pastel10 { background: #ffe0bb; } /* pastel orange */
.pastel11 { background: #ffc9c9; }
.pastel12 { background: #ffb5c8; } /* pastel pink */
.pastel13 { background: #ffa8a8; } /* pastel red */

/* ---------- Wrapper so window and palette share the same left offset/width ---------- */
.window-stack{
  width: 100%;
  margin-left: 120px;                   /* aligns with your desktop icons */
}

/* When the palette is outside the window, frame the combined block cleanly */
.palette-row.outside{
  border: 2px solid #000;
  border-top: 0;                        /* no double line between window and palette */
  background: #bfbfbf;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px){
  /* Stage sizing on phones */
  .stage{ width:92vw; margin:16px auto 32px; }

  /* ICONS: move to the TOP (horizontally), centered */
  .desktop-icons{
    position: static;                   /* no absolute positioning */
    margin: 10px auto 8px;              /* space around the row */
    display: grid;
    grid-auto-flow: column;             /* lay out in a row */
    gap: 16px;
    justify-content: center;            /* center the row */
  }
  .icon-btn{ width:70px; height:70px; }

  /* FRAME: no left offset on mobile since icons aren't at the side */
  .window-stack{ margin-left: 0; }
  .window{ margin-left: 0; }

  /* Frame internals */
  .window-body{ height:58vh; grid-template-columns: var(--toolbar-w) 1fr; }
  .swatch{ height:34px; }

  /* Fill the toolbar art without gray bands on iOS */
  .toolbar img{ object-fit: cover; object-position: top left; }

  /* Ensure the iframe actually uses the space on iOS */
  .content-frame{ height:100%; min-height:30vh; }
}

/* ===================================================================== */
/* ============= iOS / Safari HARDENED STACKING ORDER FIXES ============= */
/* ===================================================================== */

/* Baselines so z-index comparisons happen inside the same context */
.window { z-index: 0; }
.window-body { position: relative; z-index: 0; isolation: isolate; }

/* Keep the left vertical toolbar definitively above the iframe */
.toolbar{
  position: relative;
  z-index: 2147483647;                  /* high to beat promoted iframe layers */
  -webkit-transform: translateZ(0);     /* force its own GPU layer on iOS */
          transform: translateZ(0);
}

/* The iframe sits below the toolbar but stays interactive */
.content-frame{
  position: relative;
  z-index: 1;
}

/* Extra WebKit nudge */
@supports (-webkit-touch-callout: none) {
  .toolbar { -webkit-transform: translate3d(0,0,0); }
}

/* color constant you already use for the toolbar chrome */
:root { --toolbar-gray: #bfbfbf; }

/* Make sure the toolbar can position a pseudo-element */
.toolbar { position: relative; }

/* iOS Safari only: 5px divider (3 gray + 2 black) between toolbar and iframe */
.ios-safari .window-body::before{
  content: "";
  position: absolute;
  top: 0;
  left: var(--toolbar-w);
  width: 5px;
  height: 100%;
  background: linear-gradient(
    to right,
    #c0c0c0 3px,  /* first 3px gray */
    #000 3px,     /* switch to black */
    #000 100%     /* last 2px black */
  );
  pointer-events: none;
  z-index: 2;
}