/* idetik Faculty Dashboard — Create Decks.

   Chrome around the REAL idetik application, which is served from the app
   repo's own preview build and embedded in an iframe. Nothing here styles the
   application itself — it brings its own stylesheet, its own layout and its own
   theme, and this must not reach inside it.

   The one visual decision: the studio gets the FULL content area, starting at
   the top of it. It is an application, not a panel, and squeezing it into the
   dashboard's padded column would make it read as a widget.

   `.studio-bar` is not the deck screen's chrome — that screen has none. It is
   worn by the two screens that were opened FROM somewhere and owe a way back:
   Browse, and Doubt Mode.
*/

.view.is-studio {
  padding: 0;
  max-width: none;
  display: flex;
  flex-direction: column;

  /* THE ENTRY ANIMATION IS THE REASON THIS OVERFLOWED.
     `.view` carries the dashboard's `fade-up`, which holds the element at
     `translateY(4px)` for the first frames of every mount. A window-height box
     translated 4px down overflows the window by exactly 4px — measured — so
     entering Create Decks flashed a page scrollbar and clipped the bottom of
     the application. Removing the transform is the fix; the height was never
     the bug.

     It is also the right call on its own terms: `fade-up` translates and fades
     whatever it is applied to, and here that is a live iframe running the real
     application — a composited repaint of the whole app on every navigation.
     The dashboard's own pages keep their entry animation; this surface is not
     a page. */
  animation: none;

  /* Window height, deliberately. The obvious alternative — filling the parent
     with `flex: 1` — cannot work here: every view is mounted inside a bare
     `el('div')` the router creates for all screens alike (app.js `render`),
     which is `display: block` with no height, so a flex child of it resolves
     to content height and the application collapses. Sizing against the window
     is correct on desktop, where this element starts at y=0, and the mobile
     rule below subtracts the chrome that layout puts above and beneath it. */
  height: 100dvh;
}

.studio-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.studio-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex: none;
}
.studio-bar .ws-back { margin-bottom: 0; flex: none; }
.studio-id { min-width: 0; flex: 1; }
.studio-pack {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.studio-status {
  display: block;
  font-size: 14px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* THE BARE STUDIO: BROWSE AND STUDY START AT THE APPLICATION.
   No bar at all — the app draws its own way back and the chrome points that
   at the dashboard route. The status line stays in the tree for the screens
   that cannot work and have to say so, taken out of flow so an empty one
   costs no height and a filled one still lands above the application. */
.studio-wrap.is-bare { position: relative; }
.studio-wrap.is-bare > .studio-id {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  pointer-events: none;
}
.studio-wrap.is-bare > .studio-id .studio-status:not(:empty) {
  margin: 0;
  padding: 7px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

/* A STATUS LINE WITH NOTHING TO SAY TAKES NO SPACE.
   Browse and study print here only when something is wrong ("Link a deck
   before browsing its cards"); on a healthy screen the string is empty. A
   block with an empty string still claims a line box, which is the banner the
   bar used to be — this drops the box, and the bar becomes the height of the
   back button it exists for. */
.studio-status:empty { display: none; }

/* THE STUDIO ARRIVES, IT DOES NOT APPEAR.
   The frame is created a moment after the screen and its document takes a few
   hundred milliseconds to paint. Snapping from the page colour to a full
   application in one frame is the hard cut this softens — it fades in once its
   document has loaded, and only then.

   `is-ready` is added by the frame's own load handler in views/create-decks.js,
   with a timer behind it so a load event that never comes cannot leave the
   Studio invisible. Nothing waits on this: the frame is in the DOM, sized and
   loading throughout. */
.studio-frame { transition: opacity 140ms ease; }
.studio-frame.is-loading { opacity: 0; }

/* The application fills everything left. `border: 0` matters: an iframe's
   default border would draw a seam the student app never has. */
.studio-frame {
  flex: 1;
  width: 100%;
  border: 0;
  display: block;
  background: var(--page);
  min-height: 0;
}

.studio-checking {
  display: flex; align-items: center; gap: 11px;
  padding: 40px 24px;
  font-size: 15.5px; color: var(--text-2);
}

.studio-cmd {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px; color: var(--accent);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line-2); border-radius: 8px;
  padding: 10px 12px; margin-top: 12px;
  display: inline-block; text-align: left;
  overflow-wrap: anywhere;
}

/* ══ Mobile ══
   The studio is a desktop-class authoring application. It runs on a phone —
   its own layout is responsive — but the honest thing is to say that heavy
   authoring is easier on a laptop rather than pretend otherwise. */
[data-layout="mobile"] .view.is-studio {
  height: calc(100dvh - var(--topbar) - var(--tabbar) - env(safe-area-inset-bottom));
}
[data-layout="mobile"] .studio-bar { padding: 8px 14px; gap: 10px; }
[data-layout="mobile"] .studio-bar .btn { min-height: 44px; }
[data-layout="mobile"] .studio-bar .ws-back { margin: 0; }

/* ══ STUDY FILTERS TAKES THE WHOLE WINDOW ═══════════════════════════════════
   The app draws Study Filters `position: fixed; inset: 0` — which, inside an
   iframe, means the iframe. The iframe is the content area, so a screen built
   to fill the display arrived one sidebar narrower than the display, and read
   as a pane instead of a page.

   Nothing about the panel changes. The SURFACE it is drawn on is lifted out of
   the shell's grid for as long as it is open, and put back when it closes —
   lib/studio-chrome.js watches for the panel and toggles the class. The rail is
   not hidden, it is simply behind; the panel's own "Back (Esc)" returns to
   Create Decks, and the surface returns with it. */
.view.is-studio.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 40;
  max-width: none;
  height: 100dvh;
  background: var(--page);
}

/* The page beneath must not scroll while a full-window surface is over it. */
body.idetik-studio-fullscreen { overflow: hidden; }

[data-layout="mobile"] .view.is-studio.is-fullscreen { height: 100dvh; }

/* "Add to Publishing" — the only bar this screen ever shows, and only while a
   Subject exists that Publishing has not met yet. Buttons wrap so several
   Subjects stay readable; the strip disappears the moment every Subject is in
   Publishing, so the application returns to the top of the content area. */
.studio-bar.is-subjects { align-items: flex-start; flex-wrap: wrap; }
.studio-bar.is-subjects .studio-status { white-space: normal; }
.studio-subjects { display: flex; flex-wrap: wrap; gap: 8px; flex: none; max-width: 60%; }
[data-layout="mobile"] .studio-subjects { max-width: 100%; }