/* Image Studio — the pane's own layout only.
   ⛔ EVERY COLOUR IS A TOKEN from os-app.css. A single literal hex is enough to
      break the light theme, which is how the previous panel ended up with one
      white avatar that was the only wrong thing on the page in daylight.
   ⛔ NOTHING HERE STYLES .osApp, .osAppCard, .rhead OR .osAppBody — those are
      the shell's, shared by four apps, and an app that redefines them is how
      two surfaces one click apart stop looking like one product. */

/* ── the two frames, side by side ──────────────────────────────────────────
   ⚡ The pair is the product: the fast frame on the left at ~14 s, the refined
   one appearing beside it at ~45 s. On a phone they stack, and the ORDER is
   the same — the first picture stays first. */
.osApp[data-app="image-studio"] .isPair{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
}
.osApp[data-app="image-studio"] .isFrame{
  border:1px solid var(--line);border-radius:12px;background:var(--surf2);
  padding:12px 13px;display:flex;flex-direction:column;gap:9px;min-width:0;
}
.osApp[data-app="image-studio"] .isFrame h4{
  margin:0;font:500 10px/1 var(--osMono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
/* ⛔ `--fill` IS THE BRAND PURPLE, NOT A PLACEHOLDER SURFACE. It never showed
   while every picture was stretched to 100% width; the canvas contains its
   picture instead, and the slab behind it came out violet. A waiting or
   letterboxed frame gets the ordinary surface. */
.osApp[data-app="image-studio"] .isShot{display:block;border-radius:9px;overflow:hidden;background:var(--surf)}
.osApp[data-app="image-studio"] .isShot img{display:block;width:100%;height:auto}

/* ── the facts under the picture ──────────────────────────────────────────
   ⛔ WHICH LINE PAID IS NOT A FOOTNOTE. Two subscriptions are being spent here
      and the person looking at the picture is the person whose allowance it
      came out of, so it sits with the engine and the elapsed time, not in a
      tooltip. */
.osApp[data-app="image-studio"] .isFacts{
  display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;
  font:400 11.5px/1.5 var(--osMono);
}
.osApp[data-app="image-studio"] .isFacts dt{color:var(--faint)}
.osApp[data-app="image-studio"] .isFacts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}

/* ⛔ `final` AND `may still be replaced` MUST NOT LOOK THE SAME. The whole
      shape of this app is that a picture is replaced in place thirty seconds
      later; a badge that cannot be told apart at a glance makes that read as a
      glitch instead of an upgrade. */
.osApp[data-app="image-studio"] .isState{
  margin:0;font:500 10px/1 var(--osMono);letter-spacing:.1em;text-transform:uppercase;
  align-self:flex-start;padding:4px 9px;border-radius:999px;border:1px solid var(--line2);
}
.osApp[data-app="image-studio"] .isFinal{
  color:var(--mint);border-color:color-mix(in srgb,var(--mint) 45%,transparent);
  background:color-mix(in srgb,var(--mint) 9%,transparent);
}
.osApp[data-app="image-studio"] .isProv{color:var(--muted);border-style:dashed}

/* A frame the person must read a sentence about: references NOT used, or an
   engine that produced nothing. ⚠ Amber, not red — neither is an error. */
.osApp[data-app="image-studio"] .isWarn{
  margin:0;font:400 12px/1.55 var(--osDisp);color:var(--amber);
}
.osApp[data-app="image-studio"] .isNote{
  margin:0;font:400 11px/1.5 var(--osMono);color:var(--faint);
}
.osApp[data-app="image-studio"] .isNote code{font:inherit;color:var(--muted)}
.osApp[data-app="image-studio"] .isBad{border-style:dashed}
.osApp[data-app="image-studio"] .isDrawing{border-style:dashed;opacity:.75}

.osApp[data-app="image-studio"] .isOpen{
  align-self:flex-start;font:500 12px/1 var(--osDisp);color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:2px;
}
.osApp[data-app="image-studio"] .isOpen:hover{color:var(--ink)}

/* ══ THE WIDGET — the same app, inside the conversation ═════════════════════
   ⛔ NOT A SECOND DESIGN LANGUAGE. It reuses this app's own classes (.isShot,
      .isState, .isNote, .isWarn, .isOpen) so the picture a person sees in the
      thread and the picture they see in the pane are visibly one thing. Only
      the LAYOUT differs: the pane is a pair of columns, the widget is one
      picture with its line beside it.
   ⛔ AND IT STAYS SHORT. §6: never more than about six lines of prose tall,
      because the answer around it is the point — hence the capped shot. */
.bcImgWidget{display:block;margin:10px 0}
.bcImgWidget .isWidget{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:12px;
  align-items:start;border:1px solid var(--line);border-radius:12px;
  background:var(--surf2);padding:12px 13px;
}
/* ⛔ the same purple-slab trap as the pane's — see the note above */
.bcImgWidget .isShot{display:block;border-radius:9px;overflow:hidden;background:var(--surf)}
.bcImgWidget .isShot img{display:block;width:100%;height:auto;max-height:150px;object-fit:cover}
.bcImgWidget .isSide{display:flex;flex-direction:column;gap:7px;min-width:0}
.bcImgWidget .isState{
  margin:0;font:500 10px/1.3 var(--osMono);letter-spacing:.1em;text-transform:uppercase;
  align-self:flex-start;padding:4px 9px;border-radius:999px;border:1px solid var(--line2);
}
.bcImgWidget .isFinal{
  color:var(--mint);border-color:color-mix(in srgb,var(--mint) 45%,transparent);
  background:color-mix(in srgb,var(--mint) 9%,transparent);
}
.bcImgWidget .isProv{color:var(--muted);border-style:dashed}
.bcImgWidget .isNote{margin:0;font:400 11px/1.5 var(--osMono);color:var(--faint)}
.bcImgWidget .isNote code{font:inherit;color:var(--muted)}
.bcImgWidget .isWarn{margin:0;font:400 12px/1.5 var(--osDisp);color:var(--amber)}
.bcImgWidget .isOpen{
  align-self:flex-start;font:500 12px/1 var(--osDisp);color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:2px;
}
.bcImgWidget .isBad,.bcImgWidget .isDrawing{
  grid-template-columns:1fr;border-style:dashed;
}
.bcImgWidget .isDrawing{opacity:.75}
/* ⚠ THREE WIDTHS, AND THE NARROW ONE IS THE ONE THAT BREAKS. Below ~420px the
   picture and its line cannot sit side by side without the line truncating,
   and §4 is explicit that the COLUMN COUNT gives way rather than the label. */
@media (max-width:420px){
  .bcImgWidget .isWidget{grid-template-columns:1fr}
  .bcImgWidget .isShot img{max-height:220px}
}

/* ══ THE COMPOSER AND WHAT SURROUNDS IT (owner, 2026-09-02) ═══════════════════
   *"where do I get the images done here? … if we would have here the chat where
   I can write what I want and it would just do it, then yes."* Everything below
   exists so the pane has an answer to that.
   ⛔ TOKENS ONLY. A literal colour here is a screen that looks broken in one of
      the two themes, and nobody notices until a customer does. */

/* the four worked examples a first visit gets instead of a grey sentence */
.osApp[data-app="image-studio"] .isExamples{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin:2px 0 0}
.osApp[data-app="image-studio"] .isExample{
  text-align:left;display:grid;gap:3px;padding:11px 13px;border:1px solid var(--line);
  border-radius:11px;background:var(--surf);cursor:pointer;min-width:0;
  transition:background .15s,border-color .15s}
.osApp[data-app="image-studio"] .isExample:hover{background:var(--surf2);border-color:var(--line2)}
.osApp[data-app="image-studio"] .isExample b{font:600 12.5px/1.4 var(--osDisp,var(--disp));color:var(--ink)}
/* ⚠ Two lines and then an ellipsis: a prompt is long by nature, and the card is
   an invitation to press it, not the place to read the whole sentence. */
.osApp[data-app="image-studio"] .isExample span{
  font:400 11.5px/1.5 var(--body);color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* the box itself — the frame's own bar, never a private one */
.osApp[data-app="image-studio"] .isComposer{margin-top:4px}
.osApp[data-app="image-studio"] .isRefs{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:0 0 12px}
.osApp[data-app="image-studio"] .isRefChip{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;
  padding:3px 6px 3px 10px;font:400 11.5px/1.6 var(--mono);color:var(--muted);background:var(--surf)}
.osApp[data-app="image-studio"] .isRefChip button{
  border:0;background:none;color:var(--faint);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.osApp[data-app="image-studio"] .isRefChip button:hover{color:var(--rose,var(--ink))}

/* what this person has made — a strip that opens into a grid */
.osApp[data-app="image-studio"] .isRecentSec h3 .c{
  margin-left:7px;color:var(--faint);font:400 11px/1 var(--mono)}
.osApp[data-app="image-studio"] .isStrip{
  display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scroll-snap-type:x proximity}
.osApp[data-app="image-studio"] .isGrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;padding:2px 0 6px}
.osApp[data-app="image-studio"] .isThumb{
  position:relative;flex:0 0 92px;aspect-ratio:1;padding:0;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:var(--surf);scroll-snap-align:start}
.osApp[data-app="image-studio"] .isGrid .isThumb{flex:none;width:100%}
.osApp[data-app="image-studio"] .isThumb img{width:100%;height:100%;object-fit:cover;display:block}
/* ⛔ The selected one is marked by its own edge, not by dimming the others: a
   gallery where seven pictures look disabled reads as seven failures. */
.osApp[data-app="image-studio"] .isThumb.on{border-color:var(--ink)}
.osApp[data-app="image-studio"] .isDot{
  position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--faint)}
.osApp[data-app="image-studio"] .isDot.done{background:var(--mint)}
.osApp[data-app="image-studio"] .isDot.running{background:var(--amber)}
.osApp[data-app="image-studio"] .isDot.discarded{background:var(--rose,var(--faint))}
.osApp[data-app="image-studio"] .isMore{
  flex:none;align-self:center;border:0;background:none;cursor:pointer;padding:0 6px;
  color:var(--muted);font:500 12px/1 var(--osDisp,var(--disp))}
.osApp[data-app="image-studio"] .isMore:hover{color:var(--ink)}

/* ⛔ THE PARTNER MUST NOT SIT ON A CONTROL. He floats bottom-left over the page
   at a z-index above the pane's own content, and he landed exactly on "+ photo
   to work from" — a button a person cannot press is worse than one that is not
   there. The pane keeps room for him rather than moving him: he belongs to the
   page, not to this app. */
.osApp[data-app="image-studio"] .isRefs{padding-left:2px;padding-bottom:14px}
body.osAppOpen .osApp[data-app="image-studio"] .isRefs{margin-left:190px}
@media (max-width:900px){ body.osAppOpen .osApp[data-app="image-studio"] .isRefs{margin-left:0} }

/* the lead sentence carries the card on a first visit — it is the only text
   there, so it reads as a sentence, not as a caption */
.osApp[data-app="image-studio"] .osAppEmpty.isLead{
  text-align:left;max-width:62ch;font:400 13.5px/1.65 var(--body);color:var(--muted);padding:2px 0 6px}

/* ══ THE CANVAS (task 022b0bbc) ════════════════════════════════════════════
   The owner's chosen layout: the picture we have RIGHT NOW, large, with the
   four verbs under it and every per-frame fact still on the screen below.
   ⛔ TOKENS ONLY, as everywhere in this file. */
.osApp[data-app="image-studio"] .isCanvas{
  margin:0 0 12px;display:flex;flex-direction:column;gap:9px}
/* ⚠ The height cap is what keeps the verbs above the fold on a laptop. A
   9:16 picture drawn at full width would push `Save` off the screen, and a
   verb a person must scroll to find is a verb they do not know exists. */
/* ⛔ THE BOX HUGS THE PICTURE. A fixed-width frame letterboxes a square
   drawing between two slabs of surface, and the eye reads the slabs as part
   of the picture — which for a 1:1 icon is exactly the wrong impression. */
/* ⛔ THE PICTURE CARRIES ITS OWN FRAME, and the link around it carries none.
   A box sized to the image collapses to nothing before the image loads and
   then jumps; a box with a fixed width letterboxes a square drawing between
   two slabs that read as part of the picture. Neither is survivable, so there
   is no box: the <img> has the border, the radius and the cap, and an unloaded
   picture simply occupies no space. */
.osApp[data-app="image-studio"] .isShot.isBig{
  display:block;text-align:center;background:none;border:0;border-radius:0;overflow:visible}
.osApp[data-app="image-studio"] .isShot.isBig img{
  display:inline-block;width:auto;height:auto;max-width:100%;
  max-height:min(62vh,560px);border-radius:14px;border:1px solid var(--line)}
.osApp[data-app="image-studio"] .isCanvasLine{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.osApp[data-app="image-studio"] .isCanvasLine .isState{margin:0}
/* the acts sit directly under the picture, not above the body */
.osApp[data-app="image-studio"] .isCanvas + .bcVerbs{margin:0 0 4px}
.osApp[data-app="image-studio"] .bcVerb.isPrimary{
  border-color:var(--line2);background:var(--surf2);font-weight:600}
/* ⛔ Save is an <a download>, and an anchor that does not look like the three
   buttons beside it reads as a link out of the app. */
.osApp[data-app="image-studio"] a.bcVerb{text-decoration:none;display:inline-flex;align-items:center}

/* the frames, kept — smaller, because the answer is the picture above */
.osApp[data-app="image-studio"] .isAlso .isPair{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.osApp[data-app="image-studio"] .isFrame.isCompact{padding:10px 11px;gap:7px}
.osApp[data-app="image-studio"] .isFrame.isCompact .isShot img{max-height:130px;object-fit:cover}
.osApp[data-app="image-studio"] .isFrame.isCompact .isOpen{display:none}

/* ══ WHAT TO MAKE — picture today, video said out loud ═════════════════════
   ⛔ The video chip is DISABLED AND VISIBLE. Hiding it would make a studio
      that draws no video look like a studio that never will. */
.osApp[data-app="image-studio"] .isKinds{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.osApp[data-app="image-studio"] .isKind{
  appearance:none;border:1px solid var(--line);background:var(--surf);color:var(--muted);
  border-radius:999px;padding:6px 13px;cursor:pointer;
  font:500 12px/1 var(--osDisp,var(--disp));display:inline-flex;align-items:center;gap:6px}
.osApp[data-app="image-studio"] .isKind.on{
  border-color:var(--line2);background:var(--surf2);color:var(--ink)}
.osApp[data-app="image-studio"] .isKind[disabled]{cursor:default;opacity:.55}
.osApp[data-app="image-studio"] .isKind i{
  font:500 9.5px/1 var(--osMono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-style:normal}
.osApp[data-app="image-studio"] .isSoonNote{margin:0;align-self:center}
@media (max-width:560px){.osApp[data-app="image-studio"] .isSoonNote{display:none}}

/* ══ THE SHAPES — the standard formats, named the way a person names them ══ */
.osApp[data-app="image-studio"] .isShapes{
  display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.osApp[data-app="image-studio"] .isShape{
  appearance:none;border:1px solid var(--line);background:var(--surf);color:var(--muted);
  border-radius:10px;padding:6px 11px;cursor:pointer;display:grid;gap:1px;text-align:left;
  transition:background .15s,border-color .15s,color .15s}
.osApp[data-app="image-studio"] .isShape:hover{background:var(--surf2);border-color:var(--line2)}
/* ⛔ The chosen one is marked by its own edge and ink, never by dimming the
   other six — a row where six shapes look disabled reads as six refusals. */
.osApp[data-app="image-studio"] .isShape.on{
  border-color:var(--ink);background:var(--surf2);color:var(--ink)}
.osApp[data-app="image-studio"] .isShape b{font:600 12px/1.3 var(--osDisp,var(--disp))}
.osApp[data-app="image-studio"] .isShape i{
  font:400 10px/1.2 var(--osMono);font-style:normal;color:var(--faint)}
.osApp[data-app="image-studio"] .isShape.on i{color:var(--muted)}
.osApp[data-app="image-studio"] .isShapeNote{margin:0 0 12px}

/* ══ WHICH PICTURE IS BEING CHANGED ═══════════════════════════════════════ */
.osApp[data-app="image-studio"] .isChanging{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 9px;
  font:400 12px/1.5 var(--body);color:var(--muted);
  border-left:2px solid var(--line2);padding-left:10px}
.osApp[data-app="image-studio"] .isLink{
  border:0;background:none;padding:0;cursor:pointer;color:var(--ink);
  font:500 12px/1.5 var(--osDisp,var(--disp));border-bottom:1px solid var(--line2)}

/* the ask, under a picture read back from the record — it is the one fact a
   person needs to recognise a picture they made weeks ago */
.osApp[data-app="image-studio"] .isAsked{
  margin:2px 0 0;font:400 12.5px/1.6 var(--body);color:var(--muted);max-width:70ch}
.osApp[data-app="image-studio"] .isAsked b{
  font:500 10px/1 var(--osMono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:3px}