/* =========================================================================
   Feature Graphic Maker — a full-screen app page in the editor's "Restrained"
   dark system.

   This is the only stylesheet the page loads. It does not sit inside the
   marketing chrome, so the page owns the whole viewport the way
   Mockstack.html does: the document itself never scrolls, and the sidebar is
   the single scrolling region. Token values are copied from mockstack.css on
   purpose — the two tools are meant to be indistinguishable.
   ========================================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: #0A0A0B; color: #FAFAFA;
  font: 13px/1.45 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                 /* the sidebar scrolls, the page does not */
}

/* Same barely-there dot grid as the editor. */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 22px 22px;
}

.fgapp {
  --bg:          #101114;   /* charcoal, Revision 2 */
  --surface-1:   #1E1F24;   /* toolbar and rails */
  --surface-2:   #1B1C21;   /* panels */
  --surface-3:   #26272D;   /* controls */
  --border:      rgba(255,255,255,.09);
  --border-2:    rgba(255,255,255,.16);
  --text:        #FAFAFA;
  --text-2:      #D4D4D8;
  --muted:       #A1A1AA;
  --muted-2:     #71717A;
  --muted-3:     #52525B;
  --accent:      #D4AF37;   /* gold, not indigo */
  --accent-hi:   #E8C766;
  --accent-lo:   #B8912B;
  --accent-soft: rgba(212, 175, 55, 0.12);
  --accent-bord: rgba(212, 175, 55, 0.35);
  --danger:      #EF4444;
  --mono-f:      "JetBrains Mono", ui-monospace, monospace;

  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  position: relative; z-index: 1;
  background: var(--bg);
  color: var(--text);
}

/* ----- appbar ------------------------------------------------------------ */
/* The pages opt into viewport-fit=cover, so the layout runs to the physical
   edges of a notched screen. Each edge is padded by the element that sits
   against it, which is what makes the inset take that element's colour rather
   than the page background showing through as a mismatched strip. */
.fg-bar {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  padding: 0 14px; height: 52px;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: calc(14px + env(safe-area-inset-left, 0px));
  padding-right: calc(14px + env(safe-area-inset-right, 0px));
  height: calc(52px + env(safe-area-inset-top, 0px));
  background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.fg-bar .fg-brand {
  font: 700 16px/1 "Inter", sans-serif; letter-spacing: -0.025em;
  color: var(--text); text-decoration: none;
}
.fg-bar .fg-brand .dot { color: var(--accent-hi); }
.fg-bar h1.fg-name {
  margin: 0; font: 600 13px "Inter", sans-serif; letter-spacing: -0.01em; color: var(--text-2);
}
.fg-bar .fg-name {
  font: 700 13px "Inter", sans-serif; letter-spacing: -0.01em; color: var(--text);
}
.fg-bar .fg-name b { color: var(--accent-hi); font-weight: 700; }
.fg-bar .fg-div { width: 1px; height: 22px; background: var(--border); }
.fg-bar .fg-spacer { flex: 1; }
.fg-bar .fg-dim { font: 500 10px var(--mono-f); color: var(--muted-3); letter-spacing: .1em; }

.fgapp button { font-family: inherit; }
.fg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: 3px;
  background: var(--surface-2); color: var(--text-2);
  font: 500 12px "Inter", sans-serif; white-space: nowrap; text-decoration: none;
}
.fg-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--muted-3); }
.fg-btn .ico { font-size: 13px; line-height: 1; color: var(--muted); }
.fg-btn:hover .ico { color: var(--accent-hi); }
.fg-btn.primary {
  background: var(--accent-lo); border-color: var(--accent); color: #fff;
}
.fg-btn.primary:hover { background: var(--accent); }
.fg-btn.primary .ico { color: rgba(255,255,255,0.85); }
.fg-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ----- body split -------------------------------------------------------- */
.fg-body { display: grid; grid-template-columns: 320px 1fr; flex: 1; min-height: 0; min-width: 0; }

.fg-side {
  background: var(--surface-1); border-right: 1px solid var(--border);
  overflow-y: auto; min-height: 0;
  /* left edge in landscape, and the home indicator strip at the bottom */
  padding-left: env(safe-area-inset-left, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fg-side::-webkit-scrollbar { width: 8px; }
.fg-side::-webkit-scrollbar-track { background: transparent; }
.fg-side::-webkit-scrollbar-thumb { background: var(--border-2); }
.fg-sec { border-bottom: 1px solid var(--border); padding: 13px 14px; }
.fg-sec h3 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 11px;
  font: 600 10px var(--mono-f); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2);
}
.fg-sec h3::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.fg-hint { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted-2); }
.fg-aka { margin: 0 0 10px; font-size: 11.5px; line-height: 1.55; color: var(--muted-2); }
.fg-aka b { color: var(--text-2); font-weight: 600; }
.fg-notes { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 7px; }
.fg-notes li { font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.fg-notes b { color: var(--text-2); }

/* ----- rows and controls ------------------------------------------------- */
.fg-row { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.fg-row:last-child { margin-bottom: 0; }
.fg-row > label.fg-lbl {
  flex: 0 0 62px; font-size: 11px; color: var(--muted);
}
.fg-grow { flex: 1; min-width: 0; }

.fgapp input[type=text],
.fgapp textarea,
.fgapp select {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--border-2); border-radius: 3px;
  background: var(--surface-2); color: var(--text);
  font: 500 12px "Inter", sans-serif;
}
.fgapp textarea { resize: vertical; min-height: 54px; line-height: 1.4; }
.fgapp input[type=text]:focus,
.fgapp textarea:focus,
.fgapp select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fgapp select { cursor: pointer; }
.fgapp select optgroup { background: var(--surface-1); color: var(--muted-2); font-style: normal; }
.fgapp select option { background: var(--surface-2); color: var(--text); }

.fgapp input[type=range] { width: 100%; accent-color: var(--accent); }
.fg-val { flex: 0 0 40px; text-align: right; font: 500 10px var(--mono-f); color: var(--muted-2); }

.fg-color { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.fg-color input[type=color] {
  width: 100%; min-width: 40px; height: 28px; padding: 0; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: 3px; background: var(--surface-2);
}
.fg-color i {
  font: 500 9px var(--mono-f); font-style: normal; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-3);
}
.fg-colors { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* segmented pills */
.fg-seg { display: flex; gap: 4px; flex-wrap: wrap; }
.fg-seg button {
  flex: 1; min-width: 0; padding: 6px 8px; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: 3px;
  background: var(--surface-2); color: var(--muted);
  font: 500 11px "Inter", sans-serif; white-space: nowrap;
}
.fg-seg button:hover { color: var(--text); border-color: var(--muted-3); }
.fg-seg button.on {
  background: var(--accent-soft); border-color: var(--accent-bord); color: var(--accent-hi);
}

/* Output-size switcher. Wraps to as many rows as a tool needs — Steam has
   seven — and shows the pixel dimensions under each name. */
.fg-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.fg-sizes button { flex: none; text-align: left; padding: 7px 9px; line-height: 1.3; }
.fg-sizes button em {
  display: block; font-style: normal; font: 500 9px var(--mono-f);
  color: var(--muted-3); letter-spacing: .05em; margin-top: 2px;
}
.fg-sizes button.on em { color: var(--accent-hi); }
.fg-sizes button.warn { border-color: #B45309; }
.fg-sizes button.warn::after { content: " !"; color: var(--warn, #F59E0B); font-weight: 700; }
.fg-warn { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: #FBBF24; }

/* swatch grids */
.fg-sw-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.fg-sw {
  aspect-ratio: 1; padding: 0; cursor: pointer; border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.10);
}
.fg-sw:hover { border-color: var(--muted); }
.fg-sw.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); }

/* ----- layer list -------------------------------------------------------- */
.fg-layers { display: flex; flex-direction: column; gap: 4px; }
.fg-layer {
  display: flex; align-items: center; gap: 8px; padding: 6px 7px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 3px; background: var(--surface-2);
}
.fg-layer:hover { border-color: var(--border-2); }
.fg-layer.on { border-color: var(--accent-bord); background: var(--accent-soft); }
.fg-layer .fg-lk {
  flex: 0 0 20px; height: 20px; display: grid; place-items: center; border-radius: 2px;
  background: var(--surface-3); font: 600 9px var(--mono-f); color: var(--muted);
}
.fg-layer.on .fg-lk { color: var(--accent-hi); }
.fg-layer .fg-ltitle {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--text-2);
}
.fg-layer.hidden .fg-ltitle { color: var(--muted-3); text-decoration: line-through; }
.fg-layer .fg-lbtn {
  flex: 0 0 auto; padding: 2px 5px; cursor: pointer; border-radius: 2px;
  border: 1px solid transparent; background: none; color: var(--muted-3);
  font: 500 12px var(--mono-f); line-height: 1.2;
}
.fg-layer .fg-lbtn:hover { color: var(--text); background: var(--surface-3); }
.fg-layer .fg-lbtn.del:hover { color: var(--danger); }
.fg-layer .fg-lbtn:disabled { opacity: .25; cursor: default; background: none; color: var(--muted-3); }
.fg-empty {
  padding: 14px 10px; text-align: center; border: 1px dashed var(--border-2);
  border-radius: 3px; color: var(--muted-3); font-size: 11px;
}

/* upload */
.fg-file {
  display: block; padding: 8px; cursor: pointer; text-align: center;
  border: 1px dashed var(--border-2); border-radius: 3px;
  color: var(--muted); font: 500 11px "Inter", sans-serif;
}
.fg-file:hover { border-color: var(--accent-bord); color: var(--accent-hi); }
.fg-file input { display: none; }

/* ----- stage ------------------------------------------------------------- */
.fg-stage {
  position: relative;
  display: grid; place-items: center; padding: 26px 28px;
  padding-right: calc(28px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  min-width: 0; min-height: 0; overflow: auto;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 22px 22px;
  min-width: 0;
}
.fg-canvas-wrap { width: 100%; max-width: 1024px; }
.fg-stage canvas {
  display: block; width: 100%; height: auto; border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.8);
  cursor: grab; touch-action: none;
}
.fg-stage canvas.dragging { cursor: grabbing; }
.fg-stage canvas:focus { outline: none; box-shadow: 0 0 0 2px var(--accent), 0 24px 60px -20px rgba(0,0,0,.8); }
.fg-stage-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; font: 500 10px var(--mono-f); color: var(--muted-3);
  letter-spacing: .07em;
}
.fg-stage-foot .fg-tip { color: var(--muted-2); letter-spacing: 0; font-family: "Inter", sans-serif; font-size: 11px; }
.fg-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted-2); font: 500 11px "Inter", sans-serif; }
.fg-check input { accent-color: var(--accent); }
.fg-note { font-size: 11px; color: var(--accent-hi); margin-top: 8px; min-height: 1em; }

@media (max-width: 900px) {
  /* Canvas pinned on top at whatever height its width implies, controls
     scrolling beneath it. Still one scrolling region, now the sidebar row. */
  .fg-body { display: flex; flex-direction: column; }
  /* Column order puts the stage on top and the sidebar underneath, so the
     bottom inset moves to the sidebar and the stage keeps only the sides. */
  .fg-stage {
    order: 1; flex: 0 0 auto; padding: 12px 12px 6px; overflow: visible;
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
    border-bottom: 1px solid var(--border);
  }
  .fg-side {
    order: 2; flex: 1; border-right: 0; min-height: 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .fg-bar {
    flex-wrap: wrap; height: auto; gap: 6px;
    padding: 8px 10px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-left: calc(10px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
  }
  .fg-bar .fg-div, .fg-bar .fg-dim, .fg-bar .fg-name { display: none; }
  .fg-btn { padding: 8px 10px; font-size: 12px; }
  .fg-stage-foot { margin-top: 9px; }
  .fg-stage-foot .fg-tip { display: none; }
}

/* Touch targets: 11px pills are fine with a mouse and hopeless with a thumb. */
@media (max-width: 600px) {
  .fg-sec { padding: 12px; }
  .fg-seg button { padding: 10px 8px; font-size: 12px; }
  .fg-layer { padding: 9px 8px; }
  .fg-layer .fg-lbtn { padding: 6px 8px; font-size: 14px; }
  .fgapp input[type=range] { height: 26px; }
  .fg-sw-grid { grid-template-columns: repeat(6, 1fr); gap: 7px; }
  .fg-row > label.fg-lbl { flex-basis: 56px; }
}

/* ---- Revision 4 workspace chrome ----------------------------------------
   Shared by every tool on this shell: the spec readout in the toolbar and
   the status bar under the workspace. */
.fg-spec {
  font: 500 10px "JetBrains Mono", monospace;
  color: rgba(255,255,255,.35); letter-spacing: .1em; text-transform: uppercase;
}
.fg-status {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 20px; background: var(--surface-1);
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}
.fg-status .ok { font: 500 9.5px "JetBrains Mono", monospace; color: #4CAF7D; }
.fg-status .meta { font: 500 9.5px "JetBrains Mono", monospace; color: rgba(255,255,255,.35); letter-spacing: .06em; }

/* ---- type scale matched to the references -------------------------------- */
.fg-name { font: 600 13px "Inter", sans-serif; }
.fg-spec { font: 500 10px "JetBrains Mono", monospace; }
.fg-btn { font: 600 11.5px "Inter", sans-serif; }
.fg-sec h3 { font: 600 9.5px var(--mono-f); letter-spacing: .16em; }
.fg-hint { font-size: 11px; line-height: 1.5; }
.fg-row > label.fg-lbl { font-size: 11.5px; }
.fg-status .ok, .fg-status .meta { font: 500 9.5px "JetBrains Mono", monospace; }

/* ---- OG maker: prefill, templates, platform preview ---------------------- */
.og-url {
  flex: 1; min-width: 0; background: #101114; border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; color: var(--text-2);
  font: 500 10.5px var(--mono-f);
}
.og-fetch { border-color: rgba(212,175,55,.5); color: var(--accent); font-weight: 700; }
.og-fetch:hover { border-color: var(--accent); color: var(--accent-hi); }
.og-tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.og-tpls button {
  aspect-ratio: 1.9; border-radius: 5px; border: 2px solid transparent; cursor: pointer; padding: 0;
}
.og-tpls button.on, .og-tpls button:hover { border-color: var(--accent); }

.og-prev { width: min(560px, 94%); margin: 18px auto 0; }
.og-prev-tabs { display: flex; gap: 4px; }
.og-prev-tabs button {
  flex: 1; background: var(--surface-3); color: rgba(255,255,255,.75); border: 0;
  font: 600 10px "Inter", sans-serif; padding: 6px 0; border-radius: 5px; cursor: pointer;
}
.og-prev-tabs button.on { background: var(--accent); color: #17181C; }
.og-card { margin-top: 10px; border-radius: 10px; padding: 10px; }
.og-card-in { border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.15); }
.og-card-in img { display: block; width: 100%; aspect-ratio: 1.91; object-fit: cover; }
.og-card-body { padding: 7px 10px; }
.og-card-body .dom { font: 400 9px var(--mono-f); }
.og-card-body .ttl { font: 600 11px "Inter", sans-serif; margin-top: 2px; }
.og-card-body .dsc { font: 400 9.5px "Inter", sans-serif; margin-top: 2px; }