/* The COURSE workspace at /editor/course/:course - EditorCourseWorkspace.vue -
 * and its Overview tab, EditorCourseOverviewTab.vue.
 *
 * Read public/css/admin-editor.css first: it declares the `--edt-*` tokens this
 * file uses, establishes the LTR island and owns the page's one scroll container
 * (`.edt-body`). A view here must NOT introduce a second scroller at its root.
 *
 * The tone tokens - `--edt-ok-ink`, `--edt-warn-ink`, `--edt-pending-ink`,
 * `--edt-danger-*` - are declared on `.edt-shell` in
 * public/css/admin-editor-home.css, so this sheet must be linked AFTER that one.
 *
 * THE TAB STRIP IS NOT REDECLARED HERE. `.edt-tabs` and `.edt-tab` live in
 * public/css/admin-editor-content.css and are the session workspace's strip;
 * this page uses those exact classes so the two levels of the hierarchy cannot
 * drift into two different-looking tab bars. If that strip ever moves, it moves
 * for both screens at once, which is the point.
 *
 * 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 any indent here is
 * `padding-left` - never the `padding-right` a Hebrew sheet would use. Hebrew
 * reaches this page only as DATA, and only ever through a `dir` attribute on the
 * element that holds it.
 *
 * THE BRAND RAMP APPEARS EXACTLY ONCE, as the page header's 2px bottom rule. It
 * is a HAIRLINE and nothing else: a `border-image` keeps it a true rule rather
 * than a fill on a block, which is what the brand rule forbids. Nothing else on
 * this page may carry it - a stat tile, a card face and a button face all get a
 * solid colour instead.
 *
 * 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.
 *
 * Breakpoints are the repo's two: 1024px (tablet) and 767px (phone).
 */

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

/* 2200px, centred, matching `.edt-workspace` and `.edt-home` so the three levels
   of the hierarchy share one measure and nothing shifts sideways as a reader
   walks down into a meeting. */
.edtc-page {
  max-width: 2200px;
  margin-inline: auto;
}

/* ── The header ─────────────────────────────────────────────────────────── */

/* Capped narrower than the page, for the reason `.edt-ws-head` is: the title and
   its facts are one group, and letting them run to 2200px on a 27" spreads four
   short numbers across two feet of glass. The tab strip below genuinely uses
   every pixel and keeps them. */
.edtc-head {
  max-width: 1400px;
  margin-bottom: 1.25rem;
  padding-bottom: 0.9rem;
  /* The brand ramp, drawn as a HAIRLINE and nothing else - the one shape it is
     allowed on, and the one place on this page it appears. */
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #0894ff 0%, #bd32d6 40%, #6462ea 70%, #ffa304 100%) 1;
}

.edtc-head__kicker {
  margin: 0 0 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--edt-ink-3);
}

.edtc-head__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--edt-ink);
}

.edtc-head__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 0.85rem;
}

.edtc-head__fact {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

/* Mono, because these are figures a reader compares down a column, and weight
   400 - light enough that the number reads as data rather than as a headline. */
.edtc-head__value {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--edt-ink);
  white-space: nowrap;
}

.edtc-head__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--edt-ink-3);
}

/* Solid tone colours, never the ramp. */
.edtc-head__fact.is-over .edtc-head__value {
  color: var(--edt-pending-ink);
}

.edtc-head__fact.is-warn .edtc-head__value {
  color: var(--edt-warn-ink);
}

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

/* ── The Overview tab ───────────────────────────────────────────────────── */

.edtc-error,
.edtc-loading {
  margin: 0 0 1rem;
  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;
}

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

.edtc-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1400px;
}

/* A calm glass card. The inset hairline does the edge, so no border and no
   shadow darker than the cool-blue family the page is built on. */
.edtc-block {
  padding: 1.15rem 1.35rem 1.35rem;
  border-radius: 14px;
  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);
}

.edtc-block__title {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--edt-ink);
}

.edtc-block__lede {
  margin: 0 0 1.1rem;
  max-width: 80ch;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--edt-ink-2);
}

/* One clear number per fact, and the grid decides how many fit rather than a
   fixed column count - a block holds anything from four tiles to eight,
   depending on which honest-but-conditional ones apply. */
.edtc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem 1.5rem;
}

.edtc-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.edtc-stat__value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--edt-ink);
}

.edtc-stat__label {
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--edt-ink);
}

.edtc-stat__note {
  max-width: 42ch;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--edt-ink-3);
}

/* Solid tone colours on the FIGURE only. The ramp is not an option here: these
   are 24px numerals, which is exactly the shape the brand rule forbids it on. */
.edtc-stat.is-over .edtc-stat__value {
  color: var(--edt-pending-ink);
}

.edtc-stat.is-warn .edtc-stat__value {
  color: var(--edt-warn-ink);
}

.edtc-stat.is-ok .edtc-stat__value {
  color: var(--edt-ok-ink);
}

/* ── The one editable setting ───────────────────────────────────────────── */

.edtc-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.edtc-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.edtc-field__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--edt-ink-2);
}

.edtc-input {
  width: 7rem;
  padding: 0.42rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: var(--edt-surface-solid);
  box-shadow: inset 0 0 0 1px var(--edt-line);
  font: inherit;
  font-size: 0.9rem;
  color: var(--edt-ink);
}

.edtc-input:focus-visible {
  outline: 2px solid var(--edt-accent);
  outline-offset: 1px;
}

.edtc-msg {
  margin: 0.7rem 0 0;
  max-width: 80ch;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--edt-ok-ink);
}

.edtc-msg.is-error {
  color: var(--edt-danger-ink);
}

.edtc-outlink {
  margin: 1.1rem 0 0;
  max-width: 80ch;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--edt-ink-2);
}

.edtc-outlink__link {
  color: var(--edt-accent-ink);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 currentcolor;
}

.edtc-outlink__link:hover {
  color: var(--edt-accent);
}

/* ── Tablet: 1024px and below ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .edtc-stats {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem 1.1rem;
  }

  .edtc-head__facts {
    gap: 0.5rem 1.35rem;
  }
}

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

/* The shell replaces this page with "open this on a computer" at phone width
   (EditorShell.vue, decision F9), so these rules are the floor rather than the
   design: they exist so nothing here can overflow the viewport if that notice
   ever stops covering this route. Everything stacks to one column. */
@media (max-width: 767px) {
  .edtc-head__facts {
    flex-direction: column;
    gap: 0.7rem;
  }

  .edtc-block {
    padding: 1rem 1rem 1.1rem;
  }

  .edtc-stats {
    grid-template-columns: 1fr;
  }

  .edtc-stat__note {
    max-width: none;
  }

  .edtc-settings {
    flex-direction: column;
    align-items: stretch;
  }

  .edtc-input {
    width: 100%;
  }
}