/* ============================================================================
   grader-pane-extension.css — published work. Step 5, pane 7 of 7.
   Tokens only; tools/grader-tokens-only.js guards this file.

   THE SHORT ONE. The design gives it 640px of screen where its siblings get
   800, and says why: "Not padded to match its siblings. Preview is small on
   purpose — the comment panel is the primary space for published work." A
   published site is judged by looking at it in a real browser; what belongs
   here is enough to recognise it, and then the words.

   So the embed is DELIBERATELY capped and centred in the surround rather than
   filling the stage. Making it bigger would be the one change that breaks the
   pane's argument.
   ========================================================================= */

.gr-ext { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; }
.gr-ext-frame {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-7);
  border-radius: var(--r-2xl); background: var(--n-stage); border: 1px solid var(--n-edge);
  padding: var(--sp-10);
}
/* Capped on purpose — see the header. */
.gr-ext-embed {
  width: 100%; max-width: 720px; height: 380px; flex: none;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--n-surround); box-shadow: inset 0 0 0 1px var(--n-edge);
  position: relative;
}
.gr-ext-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* A site that refuses to be framed is not a broken submission — it is a site
   with a normal security header. Say that, and give the way in. */
.gr-ext-refused {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-4); text-align: center; padding: var(--sp-8);
}
.gr-ext-url  { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--n-text); word-break: break-all; }
.gr-ext-note { font-family: var(--f-u); font-size: var(--t-ui-xs); color: var(--n-faint); }
.gr-ext-open {
  padding: var(--sp-4) var(--sp-6); border: 0; border-radius: var(--r-lg);
  background: var(--ctl); box-shadow: var(--ctl-in); color: var(--text3);
  font-family: var(--f-u); font-size: var(--t-ui-xs); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-3); position: relative;
}
.gr-ext-meta { flex: none; padding: var(--sp-5) 0 0; font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--n-faint); }

.gr-ext-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-4); text-align: center;
}
.gr-ext-empty .gr-l { font-family: var(--f-d); font-weight: 600; font-size: var(--t-display-sm); letter-spacing: var(--t-display-sm-ls); color: var(--n-text); }
.gr-ext-empty .gr-d { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--n-faint); }