/* The session editor's page frame - /editor (EditorShell.vue).
 *
 * This is a STAFF page, and it is a full page of its own rather than a screen
 * inside /admin (owner decision F4, 2026-09-06). It therefore does NOT render
 * inside .admin-layout, and two consequences follow that are easy to get wrong:
 *
 *   1. The `--adm-*` design tokens are declared ON `.admin-layout`, not on
 *      `:root`, so none of them reach this page. The block below re-declares
 *      the ones this page uses, on `.edt-shell`. They are COPIES of the Glass
 *      Campus values in public/css/admin.css and are meant to stay copies -
 *      if that palette moves, move these with it. Do not "fix" this by lifting
 *      the admin block to `:root`: those tokens are scoped on purpose, and
 *      every public marketing page shares that root.
 *
 *   2. `direction: rtl` is GLOBAL on this site (public/css/global.css) and the
 *      admin shell re-establishes LTR on `.admin-main`. Nothing does that here,
 *      so `.edt-shell` establishes the LTR island itself - the same mechanism,
 *      one level up. The page is English throughout (F10).
 *
 * The filename prefix is load-bearing. scripts/bundle-css.mjs sorts the public
 * bundle from the admin bundle on `href.startsWith('/css/admin')` and nothing
 * else, so a rename to `editor.css` would ship this file to every marketing
 * visitor and break F4's "must not affect the public site's bundle size" with a
 * completely green build. Every stylesheet this page ever gains must be named
 * `admin-editor*.css`.
 *
 * Breakpoints are the repo's two: 1024px (tablet) and 767px (phone).
 */

/* ── The page root ──────────────────────────────────────────────────────── */

.edt-shell {
  /* Copies of the Glass Campus tokens - see the header above. */
  --edt-ink: #191a23;
  --edt-ink-2: #5a5b6a;
  --edt-ink-3: #6e7180;
  --edt-line: rgba(25, 26, 35, 0.08);
  --edt-accent: #0071e3;
  --edt-accent-ink: #0b5cc4;
  --edt-glass: rgba(255, 255, 255, 0.72);
  --edt-glass-strong: rgba(255, 255, 255, 0.85);
  --edt-glass-blur: blur(18px) saturate(1.5);
  --edt-glass-shadow: 0 8px 32px rgba(0, 60, 130, 0.08);
  /* Near-opaque stand-in for glass on phone/tablet chrome, for the reason
     admin.css gives for --adm-surface-solid: a blur composited over a
     scrolling layer is the classic WebKit repaint flicker. */
  --edt-surface-solid: rgba(255, 255, 255, 0.97);
  --edt-shell-header-h: 60px;

  direction: ltr;
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  color: var(--edt-ink);
  font-family: var(--font-body);
  /* Same reason as .admin-layout: a thumb-scroll reaching the end of the body
     pane must stop here rather than chaining into the document, whose scroll
     collapses the browser chrome and relayouts this dvh-sized shell. */
  overscroll-behavior-y: contain;
  background:
    radial-gradient(ellipse at 85% 8%, rgba(8, 148, 255, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 12% 60%, rgba(105, 98, 234, 0.06) 0%, transparent 60%),
    #f5f9ff;
}

/* global.css floors #app at 100vh for the public pages, and inside a dvh-sized
   shell that floor is the one thing left making the DOCUMENT scrollable - the
   exact mechanism admin.css documents for #app:has(.admin-layout). Same fix,
   scoped the same way, so no public page is touched. */
#app:has(.edt-shell) {
  min-height: auto;
}

/* ── The page's type scale ──────────────────────────────────────────────── */

/* THE ROOT, NOT `.edt-shell`. 277 of this page's 295 font-sizes are `rem`, and
   `rem` resolves against `html` - a `font-size` on the shell would move the 15
   `em` values and nothing else. So the re-base happens here, scoped to the page
   exactly as `#app:has(.edt-shell)` above is, and for the same reason: no
   public page and no /admin screen carries `.edt-shell`, so none is touched.

   A PERCENTAGE RATHER THAN `18px`. 112.5% of the 16px default is 18px, and a
   reader who has set their own browser font size larger keeps that setting
   multiplied rather than overwritten - which is why 277 of these declarations
   are rem in the first place.

   NO TEARDOWN EXISTS OR IS NEEDED, which is the whole reason this is a selector
   and not a class toggled from EditorShell.vue. The "Admin panel" link in the
   header is an in-app navigation: App.vue swaps its editor branch out,
   `.edt-shell` leaves the DOM, and this rule stops matching in the same frame.
   A JS class on `html` would have to be removed there by hand, and one missed
   removal leaks 18px into /admin.

   THE SLIDE IS IMMUNE, and that is load-bearing rather than lucky.
   `.edt-canvas__inner` is 1920x1080 px and every rule in the template
   vocabulary sizes in `cqw`, `em` or `px` against it, so neither the canvas,
   the overflow probe's 1920px frame nor the phone preview's 15px body moves.
   `zoom` on the shell would have moved all three, and `overflowProbe.ts`
   refuses any stage more than 1px off 1920 - it would have turned every fit
   reading in the deck into a refusal. */
html:has(.edt-shell) {
  font-size: 112.5%;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.edt-shell-header {
  flex-shrink: 0;
  min-height: var(--edt-shell-header-h);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1.5rem;
  background: var(--edt-glass);
  -webkit-backdrop-filter: var(--edt-glass-blur);
  backdrop-filter: var(--edt-glass-blur);
  box-shadow: var(--edt-glass-shadow);
  /* The brand gradient, as a HAIRLINE and nothing else - the one shape the ramp
     is allowed on. A border-image keeps it a true 2px rule rather than a fill
     on a block, which is what the rule forbids. */
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #0894ff 0%, #bd32d6 40%, #6462ea 70%, #ffa304 100%) 1;
}

.edt-brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

/* The bare "10x" mark. Weight 200 matches .brand-link in admin.css, and a light
   weight is also what the brand rule requires of any gradient-adjacent
   letterform - though this one is a solid ink colour, not a gradient. */
.edt-brand__mark {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 200;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--edt-ink);
}

.edt-brand__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--edt-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* ── The page's own nav: Sessions | Templates ───────────────────────────── */

.edt-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: 0.5rem;
}

.edt-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--edt-ink-2);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.edt-nav__link:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--edt-ink);
}

.edt-nav__link.is-active {
  background: var(--edt-glass-strong);
  color: var(--edt-accent-ink);
  box-shadow: inset 0 0 0 1px var(--edt-line);
}

.edt-nav__link i {
  font-size: 0.85em;
}

/* Pushes everything after it to the far end of the header. */
.edt-shell-header__spacer {
  flex: 1 1 auto;
}

.edt-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--edt-ink-3);
  text-decoration: none;
  white-space: nowrap;
}

.edt-back:hover {
  color: var(--edt-accent-ink);
}

/* ── Body: the page's scroll container ──────────────────────────────────── */

/* The document never scrolls (see .edt-shell above); this pane does. Views under
   /editor therefore lay themselves out inside a scroller that is already
   height-constrained, and must not add a second one at their own root. */
.edt-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem;
}

.edt-page-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--edt-ink);
  margin: 0 0 1rem;
}

.edt-stub {
  color: var(--edt-ink-2);
  font-size: 0.95rem;
  max-width: 60ch;
}

/* ── The phone notice (F9) ──────────────────────────────────────────────── */

/* F9: desktop first, usable on a tablet, and on a PHONE the page shows the
   session list plus a line telling the reader to open it on a computer. The
   shell decides which of those two it is (see EditorShell.vue): on the session
   list this renders as a banner ABOVE the list, everywhere else it renders
   INSTEAD of the body, because a deck workspace on a 390px screen is not a
   degraded experience, it is a misleading one. */
.edt-phone-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 12px;
  background: var(--edt-surface-solid);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  color: var(--edt-ink-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.edt-phone-notice i {
  color: var(--edt-accent);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.edt-phone-notice__title {
  display: block;
  font-weight: 600;
  color: var(--edt-ink);
  margin-bottom: 0.15rem;
}

/* The blocked-body variant: same card, given room to breathe because it is the
   only thing on the screen. */
.edt-phone-notice--blocking {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
  margin: 2rem auto 0;
  max-width: 34rem;
}

.edt-phone-notice--blocking i {
  font-size: 1.6rem;
  margin: 0 0 0.35rem;
}

.edt-phone-notice__back {
  margin-top: 0.75rem;
  color: var(--edt-accent-ink);
  font-size: 0.9rem;
  text-decoration: none;
}

.edt-phone-notice__back:hover {
  text-decoration: underline;
}

/* ── Tablet: 768-1024px ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .edt-shell-header {
    gap: 0.75rem;
    padding: 0 1rem;
    /* Blur on a sticky surface over a scrolling pane is the WebKit repaint
       flicker admin.css documents; drop it and keep the fill. */
    background: var(--edt-surface-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* The mono kicker beside the mark is the first thing to go: it is a label for
     a page whose identity is already in the nav below it. */
  .edt-brand__label {
    display: none;
  }

  .edt-body {
    padding: 1rem;
  }
}

/* ── Phone: 767px and below ─────────────────────────────────────────────── */

@media (max-width: 767px) {
  .edt-shell-header {
    /* Two rows: the mark and the back link on top, the nav underneath. A single
       row at this width either scrolls sideways or truncates the nav labels to
       glyphs, and a two-item nav has no reason to become unreadable. */
    flex-wrap: wrap;
    min-height: 0;
    padding: 0.6rem 0.9rem;
    row-gap: 0.5rem;
  }

  .edt-nav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
  }

  .edt-nav__link {
    flex: 1 1 0;
    justify-content: center;
  }

  .edt-shell-header__spacer {
    order: 2;
  }

  .edt-brand__mark {
    font-size: 1.3rem;
  }

  .edt-body {
    padding: 0.9rem;
  }
}