/* ============================================================
   chrometyp.css — CHROME.TYP toy app (FOUNDATION STUB)
   Owned by the `chrome-typ` agent — expand freely below.
   Foundation provides: desk glyph, springboard tile, body sizing.
   ============================================================ */

/* desk icon glyph — a chrome "T" (the product, before you open it) */
.desk-icon .glyph.ct-glyph {
  font-family: var(--display);
  font-weight: 700;
  background: var(--chrome-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 5px rgba(140, 170, 255, 0.4));
}

/* springboard tile — moulded chrome slab, dark navy letter */
.sb-icon .tile-ct {
  background: linear-gradient(180deg, #eef3fb 0%, #c2d0e2 34%, #7b8ea9 51%, #b3c4d9 64%, #eef3fb 100%);
  color: #26314c;
  font-family: var(--display);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* window/app body — big canvas workspace (glitchpic-body pattern) */
.ct-body {
  padding: 0;
  border-top: none;
  height: 600px;
  min-height: 470px;
  max-height: calc(100dvh - 130px);
  overflow: hidden;
  background: #0b0b10;
}
.ct-app-body {
  padding: 0;
  overflow: hidden;
  background: #0b0b10;
}

/* ============================================================
   CHROME.TYP interior — controls bar + letterboxed canvas stage.
   One layout serves both shells (window .ct-body / iOS .ct-app-body).
   ============================================================ */
.ct-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #0b0b10;
}

/* retro-terminal control strip */
.ct-controls {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  background: linear-gradient(180deg, #14141c 0%, #0d0d13 100%);
  border-bottom: 1px solid #2a2a3a;
}

.ct-input,
.ct-select,
.ct-export {
  font-family: var(--mono);
  font-size: 12px;
  color: #cfe0f2;
  background: #05060a;
  border: 1px solid #33415e;
  border-radius: 2px;
  padding: 5px 7px;
  height: 28px;
  outline: none;
}

.ct-input {
  flex: 1 1 140px;
  min-width: 90px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ct-input::placeholder { color: #3a4a66; }
.ct-input:focus,
.ct-select:focus { border-color: var(--cyan); }

.ct-select {
  flex: 0 1 auto;
  cursor: pointer;
}

.ct-export {
  flex: 0 0 auto;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #04020e;
  border-color: #7fb0d8;
  /* moulded chrome slab — a control that is itself the product */
  background: linear-gradient(180deg, #eef3fb 0%, #c2d0e2 46%, #7b8ea9 51%, #b3c4d9 60%, #eef3fb 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: filter 0.12s ease;
}
.ct-export:hover { filter: brightness(1.08); }
.ct-export:active { filter: brightness(0.92); }
.ct-export[disabled] { cursor: default; filter: none; opacity: 0.85; }

/* stage — centers the fixed-aspect canvas, letterboxing on either axis */
.ct-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
  /* faint sunset wash behind the letterbox so gaps read as "the render" */
  background:
    radial-gradient(120% 60% at 50% 57%, rgba(255, 47, 160, 0.10), transparent 62%),
    #07060f;
}

.ct-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  /* aspect-ratio is set inline per preset by JS; these caps letterbox it */
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(140, 170, 255, 0.14);
  /* checkerboard shows through only in Transparent mode (alpha=0 canvas) */
  background-image:
    linear-gradient(45deg, #16161f 25%, transparent 25%),
    linear-gradient(-45deg, #16161f 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #16161f 75%),
    linear-gradient(-45deg, transparent 75%, #16161f 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  background-color: #0e0e15;
}

/* iOS mount — narrow shell: give the input its own row so the two
   selects + EXPORT don't get squeezed below the tap-target size. */
#app-chrometyp .ct-input { flex: 1 1 100%; }
#app-chrometyp .ct-select { flex: 1 1 auto; min-width: 0; }
#app-chrometyp .ct-stage { padding: 8px; }