/* The session editor's HOME - the planner list at /editor (EditorHome.vue) -
 * plus the identity header of a session's workspace and the publish dialog both
 * screens share.
 *
 * Owned by the planner-home work (run 1, track 3): every session grouped by
 * course, in `order`, each row carrying its academic-hour total against the
 * four-hour budget, its slide count, its publish state and when it was last
 * published, and which dated meetings teach it.
 *
 * WHY THE WORKSPACE HEADER AND THE PUBLISH DIALOG ARE IN A FILE CALLED "home".
 * A new stylesheet needs a `<link>` in index.html, and index.html belongs to
 * another track. Both surfaces are this track's, both are English-LTR, and both
 * use the `.edt-sess__*` vocabulary the list already declares, so they live here
 * rather than in a file nothing loads. The workspace's own frame - `.edt-workspace`,
 * `.edt-tabs`, `.edt-tab` - is in public/css/admin-editor-content.css and stays
 * there. If this file is ever split, add the link in the same commit.
 *
 * Read public/css/admin-editor.css first - it declares the `--edt-*` tokens
 * this file uses, establishes the LTR island and owns the scroll container
 * (`.edt-body`). A view here must NOT introduce a second scroller at its root.
 *
 * The `admin-editor` filename prefix is load-bearing: scripts/bundle-css.mjs
 * partitions the public and admin CSS bundles on `/css/admin` and nothing else,
 * so any other name ships this file to every marketing visitor.
 *
 * THE PAGE IS ENGLISH AND LTR (F10). `direction: rtl` is global on this site and
 * `.edt-shell` re-establishes LTR for the whole editor, so a list indent here is
 * `padding-left` - never the `padding-right` a Hebrew sheet would use.
 *
 * Breakpoints are the repo's two: 1024px (tablet) and 767px (phone).
 */

/* ── Tone tokens ────────────────────────────────────────────────────────────
 *
 * The values are the admin panel's own status palette (public/css/admin.css:
 * `.badge-published`, `.badge-draft`, the toast colours), copied for the same
 * reason `.edt-shell` copies the Glass Campus tokens - the `--adm-*` block is
 * scoped to `.admin-layout` and does not reach this page.
 *
 * Declared HERE rather than added to the `--edt-*` block, which lives in
 * another track's file (public/css/admin-editor.css); if the two files are ever
 * merged, these belong in that block. They hang off `.edt-shell` - the whole
 * editor - and not off `.edt-home`, so that a surface which moves out of the
 * list's subtree does not silently lose its colours and render as a plain white
 * card with no error.
 */
.edt-shell {
  --edt-ok-ink: #2e7d32;
  --edt-ok-bg: #e8f5e9;
  --edt-pending-ink: #e65100;
  --edt-pending-bg: #fff3e0;
  --edt-warn-ink: #b26a00;
  --edt-warn-bg: #fff8e6;
  --edt-danger-ink: #b3261e;
  --edt-danger-bg: #fdecea;
}

/* 2200px, centred, matching the workspace this page opens into. It was 1200,
   which on a MacBook Pro 16" left a third of the window empty and on a 27" left
   more than half. The list itself does not stretch to fill it - see
   `.edt-sessions`, which goes multi-column instead. */
.edt-home {
  max-width: 2200px;
  margin-inline: auto;
}

.edt-home__lede {
  margin: -0.4rem 0 1.25rem;
  max-width: 70ch;
  color: var(--edt-ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}

.edt-home__note,
.edt-home__error,
.edt-home__loading {
  margin: 0 0 1.25rem;
  padding: 0.8rem 1rem;
  max-width: 80ch;
  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.88rem;
  line-height: 1.55;
}

.edt-home__error {
  background: var(--edt-danger-bg);
  color: var(--edt-danger-ink);
  box-shadow: none;
}

/* ── A course block ─────────────────────────────────────────────────────── */

.edt-course {
  margin-bottom: 2.25rem;
}

.edt-course__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  /* The brand ramp, drawn as a HAIRLINE and nothing else - the one shape it is
     allowed on. A border-image keeps it a true 2px rule rather than a fill. */
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #0894ff 0%, #bd32d6 40%, #6462ea 70%, #ffa304 100%) 1;
}

.edt-course__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--edt-ink);
}

.edt-course__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--edt-ink-3);
}

.edt-course__empty {
  margin: 0;
  color: var(--edt-ink-3);
  font-size: 0.88rem;
}

/* ── One lecture ────────────────────────────────────────────────────────── */

/* COLUMNS RATHER THAN ONE VERY WIDE ROW. Each lecture row is a two-column grid
   whose Open button carries `max-content` on the right, so a row stretched to
   2200px puts the button two thousand pixels from the title it opens - and 24
   of them stacked is a scroll nobody needs when the screen could show them
   side by side.

   `auto-fit`, NOT `auto-fill`: `auto-fill` would reserve a second empty track
   and hold a lone lecture at half width. 560px is the width below which a row's
   own two columns start fighting; at a MacBook Pro 16" that is two across, and
   at a 27" three. */
.edt-sessions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
  gap: 0.6rem;
}

/* Two columns: everything the row says on the left, the action beside the title
   on the right. The action is placed EXPLICITLY into row 1 so the number of
   paragraphs above the meetings line - which varies with the publish state - can
   never move it. */
.edt-sess {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 1rem;
  row-gap: 0.35rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: var(--edt-glass);
  -webkit-backdrop-filter: var(--edt-glass-blur);
  backdrop-filter: var(--edt-glass-blur);
  box-shadow: var(--edt-glass-shadow), inset 0 0 0 1px var(--edt-line);
}

.edt-sess > :not(.edt-sess__actions) {
  grid-column: 1;
  min-width: 0;
}

.edt-sess__actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.edt-sess__open {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}

.edt-sess__open:hover .edt-sess__title {
  color: var(--edt-accent-ink);
  text-decoration: underline;
}

.edt-sess__order {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--edt-ink-3);
}

.edt-sess__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--edt-ink);
  overflow-wrap: anywhere;
}

/* An unnamed lecture is the NORMAL state - a session is born by dropping
   content into it and named later, if at all - so this reads as absence, never
   as a warning. */
.edt-sess__title--untitled,
.edt-ws-head__name.is-untitled {
  font-weight: 400;
  font-style: italic;
  color: var(--edt-ink-3);
}

/* ── The facts strip ────────────────────────────────────────────────────── */

.edt-sess__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.edt-sess__fact,
.edt-sess__state {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  color: var(--edt-ink-2);
}

.edt-sess__fact.is-over {
  background: var(--edt-danger-bg);
  color: var(--edt-danger-ink);
  box-shadow: none;
}

.edt-sess__fact.is-warn {
  background: var(--edt-warn-bg);
  color: var(--edt-warn-ink);
  box-shadow: none;
}

.edt-sess__state--ok {
  background: var(--edt-ok-bg);
  color: var(--edt-ok-ink);
  box-shadow: none;
}

.edt-sess__state--pending {
  background: var(--edt-pending-bg);
  color: var(--edt-pending-ink);
  box-shadow: none;
}

.edt-sess__state--warn {
  background: var(--edt-warn-bg);
  color: var(--edt-warn-ink);
  box-shadow: none;
}

.edt-sess__state--neutral {
  color: var(--edt-ink-3);
}

.edt-sess__detail {
  margin: 0;
  max-width: 80ch;
  color: var(--edt-ink-2);
  font-size: 0.83rem;
  line-height: 1.5;
}

.edt-sess__stamp {
  margin: 0;
  color: var(--edt-ink-3);
  font-size: 0.78rem;
}

/* ── Which dated meetings teach this lecture ────────────────────────────── */

.edt-sess__meetings {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.7rem;
  font-size: 0.78rem;
  color: var(--edt-ink-2);
}

.edt-sess__meetings-label,
.edt-sess__meetings-empty {
  color: var(--edt-ink-3);
}

.edt-sess__meeting {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  white-space: nowrap;
}

/* A meeting already taught. Marked, not dimmed away: it is the case where an
   answered question is about to be destroyed by an edit. */
.edt-sess__meeting.is-past .edt-sess__meeting-cohort {
  color: var(--edt-ink-3);
}

.edt-sess__meeting-cohort {
  font-weight: 500;
}

.edt-sess__meeting-answers {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--edt-warn-ink);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.edt-btn {
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 0.42rem 0.95rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  color: var(--edt-ink-2);
  transition: background 0.15s, color 0.15s;
}

.edt-btn:hover:not(:disabled) {
  color: var(--edt-ink);
}

/* A solid accent, never the brand ramp: the ramp belongs on thin lines and
   stops reading as the brand the moment it fills a shape this size. */
.edt-btn--primary {
  background: var(--edt-accent);
  color: #fff;
  box-shadow: none;
}

.edt-btn--primary:hover:not(:disabled) {
  background: var(--edt-accent-ink);
  color: #fff;
}

.edt-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── The workspace's identity header ────────────────────────────────────── */

/* THE HEADER IS CAPPED WHERE THE TABS BELOW IT ARE NOT, which looks like an
   inconsistency and is not. This is a two-column grid holding the lecture's
   identity on the left and Publish on the right; let it run to the workspace's
   full 2200px and those two sit about 2000px apart, which reads as two
   unrelated controls rather than one header. The tab strip and the deck panes
   below genuinely use every pixel, so they keep them. */
.edt-ws-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  max-width: 1400px;
  column-gap: 1rem;
  row-gap: 0.4rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--edt-line);
}

.edt-ws-head > :not(.edt-sess__actions) {
  grid-column: 1;
  min-width: 0;
}

.edt-ws-head .edt-sess__actions {
  grid-column: 2;
  grid-row: 2;
  align-items: flex-start;
}

/* Just the way back. The course and the meeting number moved INTO the `h1`
   below, because they are the page's identity and the heading is where a
   screen reader looks for it - see EditorSessionWorkspace.vue's `heading`. */
.edt-ws-head__id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--edt-ink-3);
}

.edt-ws-head__back {
  color: var(--edt-accent-ink);
  text-decoration: none;
}

.edt-ws-head__back:hover {
  text-decoration: underline;
}

/* The page's one `h1`, in two parts: a small kicker naming the course and the
   meeting, and the lecture's own name under it. Both inside the heading, so the
   identity a screen reader reads out is the whole of it. */
.edt-ws-head__title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--edt-ink);
  overflow-wrap: anywhere;
}

.edt-ws-head__kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--edt-ink-3);
}

/* The two facts this screen alone can see, and both are said plainly rather
   than hidden: a deck written outside the editor, and a room running now. */
.edt-ws-head__alert {
  margin: 0.3rem 0 0;
  padding: 0.7rem 0.9rem;
  max-width: 90ch;
  border-radius: 10px;
  background: var(--edt-warn-bg);
  color: var(--edt-warn-ink);
  font-size: 0.83rem;
  line-height: 1.55;
}

.edt-ws-head__alert--live {
  background: var(--edt-danger-bg);
  color: var(--edt-danger-ink);
}

.edt-ws-head__live-room {
  display: block;
  font-weight: 500;
}

.edt-sess__blocked {
  margin-inline-start: 0.6rem;
  max-width: 42ch;
  color: var(--edt-ink-3);
  font-size: 0.76rem;
  line-height: 1.45;
}

/* ── The publish dialog ─────────────────────────────────────────────────── */

/* 1018 is the panel's `.modal-overlay` rung (public/css/admin.css) and this is
   the same kind of surface. Nothing else on /editor stacks, so the ladder here
   is one rung deep - grep the NUMBER, not this file, before adding a second. */
.edt-pub {
  position: fixed;
  inset: 0;
  z-index: 1018;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.edt-pub__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 35, 0.42);
}

.edt-pub__panel {
  position: relative;
  width: min(40rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.4rem 1.5rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 40, 90, 0.28);
  color: var(--edt-ink);
}

.edt-pub__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.edt-pub__subject {
  margin: 0.15rem 0 0.9rem;
  color: var(--edt-ink-3);
  font-size: 0.85rem;
}

.edt-pub__line {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--edt-ink-2);
}

.edt-pub__line--refused {
  color: var(--edt-danger-ink);
  font-weight: 500;
}

.edt-pub__line--done {
  color: var(--edt-ok-ink);
  font-weight: 500;
}

/* The server's own propagation sentence (`propagation.note`), rendered verbatim.
   It is the one line that stops "I pressed Publish and nothing happened", so it
   is never smaller than the body copy around it. */
.edt-pub__note {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--edt-pending-bg);
  color: var(--edt-pending-ink);
  font-size: 0.83rem;
  line-height: 1.55;
}


.edt-pub__refusals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.edt-pub__refusal {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--edt-danger-bg);
}


.edt-pub__refusal-message {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--edt-ink);
  line-height: 1.5;
}

.edt-pub__refusal-remedy {
  font-size: 0.82rem;
  color: var(--edt-ink-2);
  line-height: 1.5;
}

.edt-pub__refusal-ids {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--edt-ink-3);
  overflow-wrap: anywhere;
}

.edt-pub__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

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

@media (max-width: 1024px) {
  .edt-sess {
    /* Blur on a card inside 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;
  }
}

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

/* F9: the session LIST is the one editor surface that works on a phone, and the
   shell puts a notice above it. One column, and the action moves under the row
   it belongs to rather than squeezing the title. */
@media (max-width: 767px) {
  .edt-sess,
  .edt-ws-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .edt-sess__actions,
  .edt-ws-head .edt-sess__actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .edt-sess__blocked {
    margin-inline-start: 0;
    max-width: none;
  }

  .edt-sess__meeting {
    white-space: normal;
  }

  .edt-pub {
    padding: 0.75rem;
    align-items: flex-end;
  }

  .edt-pub__panel {
    padding: 1.1rem;
  }
}