/* ============================================================================
   SKIN: EDITORIAL  (Weeks / academic "course operating system")
   html[data-skin="editorial"]   —   inspired by Felipe's GitHub course dashboard
   ----------------------------------------------------------------------------
   THE LOOK (GH-DASHBOARD-INSPO-2026-05-31.md + MACRO-THEME-SKINS-2026-05-31.md):
   a FLAT, border-defined editorial surface, NOT a shadow-heavy SaaS dashboard.
     • shadows REPLACED by 1px #e6ebf1 cool-gray borders (--card-shadow:none)
     • small consistent radii: cards 8 / rows-buttons 6 / pills 3
     • uppercase letter-spaced 13px/#888 micro-labels on every section head + eyebrow
     • the type-tint PILL system (pale bg + saturated fg, 11px/700/3px): Reading/
       Session=blue, Assignment/Due=red, Quiz/Peer=violet, Video=teal, info=gray —
       color carries MEANING, the ONE place this skin uses hues beyond the accent
     • the Modules ladder reads like a WEEKS ACCORDION: clean week headers (number
       badge + week title + hairline), numbered session rows beneath, past/complete
       rows dim to opacity .55
     • the platform CORAL stays the primary action accent (buttons, current state)
     • a crisp editorial heading face (--font-display); flat hairline sidebar + topbar
   Engine DEFAULTS (theme.js SKINS, filled into UNtouched knobs): tone=Default(light),
   style=Default. Dark tone = dark slate surfaces + hairline #2a3344 borders, the
   tint-pills shifted to pale-fg-on-deep-tint, coral kept. AA throughout (text ≥4.5:1,
   UI ≥3:1). Every rule scoped under html[data-skin="editorial"]; no emoji, no em dash.
   ============================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   1. TOKENS — re-declared on html[data-skin="editorial"] so they cascade to the
   whole /app (the shell chrome in app.html + dashboard.css + the menus all read
   these var names). LIGHT tone. The signature is the cool-gray editorial line
   #e6ebf1 + flat (no shadow) + small radii. The coral accent family is left to
   theme.js (inline) so the platform coral stays the one action hue.
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] {
  /* surfaces — white cards on a cool off-white page, the GH ramp */
  --bg: #ffffff;            --w-card: #ffffff;
  --bg-2: #f8f9fb;          --w-page: #f8f9fb;
  --bg-3: #f0f2f6;          --w-locked: #f0f2f6;
  --card-2: #fbfcfe;        --w-card-2: #fbfcfe;
  --border: #e6ebf1;        --w-line: #e6ebf1;          /* the signature 1px cool-gray line */
  --border-strong: #dde3ea; --w-line-2: #dde3ea;
  --w-lock-border: #dde3ea;
  --cover-1: #2f3850; --cover-2: #232a3a; --cover-3: #1a2030;

  /* ink — a clean editorial near-black + a darkened GH gray ramp tuned for AA.
     The secondary/tertiary/meta inks are the chrome-text colors (nav labels, the
     dv/iax tabs, .ov-cont-sub subtext, the mono micro-labels). They are darkened
     from the original GH ramp so EVERY one clears AA on the white card AND the
     off-white page: ink-3 #5f6470 = 5.93:1 / 5.63:1; the mono ink-4 #666b76 =
     5.34:1 / 5.07:1 (text floor 4.5:1, UI floor 3:1). */
  --ink: #1a1d24;           --w-ink: #1a1d24;
  --ink-2: #4d525c;         --w-ink-2: #4d525c;   /* 7.6:1 on white — secondary text */
  --ink-3: #5f6470;         --w-ink-3: #5f6470;   /* 5.93:1 on white / 5.63:1 on page — tertiary/tab/subtext */
  --ink-4: #666b76;
  --w-ink-4: #666b76;       /* 5.34:1 on white / 5.07:1 on page — mono micro-labels (AA, not thin) */

  /* shape — small editorial radii (cards 8 / rows-buttons 6 / pills 3 / tiny 5) */
  --radius-xs: 5px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --border-weight: 1px;
  /* density — the GH dashboard is generous-but-dense (card padding ~20px) */
  --pad-card: 20px;
  --pad-card-sm: 16px;
  --pad-card-lg: 22px;
  --gap-card: 14px;

  /* ELEVATION — FLAT. The skin hook: kill the base card shadow (the border defines
     elevation). The style-axis --shadow-* ramp is also flattened so the few rules
     that read it directly (rows, pickers) stay border-defined, not floating. */
  --card-shadow: none;
  --w-shadow: none;
  --w-shadow-lift: none;
  --shadow-1: none;
  --shadow-2: 0 1px 0 rgba(26,29,36,.04);   /* a hairline lift on hover, not a float */
  --shadow-3: 0 8px 28px rgba(26,29,36,.12);/* real depth only for popovers/modals */
  --shadow-coral: none;                     /* the coral button is flat in editorial */

  /* TYPE — a crisp editorial heading face. Keep it a clean grotesk so it stays
     AA + legible; body keeps --font (the data-font picker). */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* the page background layer (the skin hook) — the flat cool off-white. */
  --page-bg: #f8f9fb;

  /* ── the type-tint PILL palette (semantic status hues — pale bg + saturated fg).
     These are LOCAL skin vars consumed by the pill rules below; they are the one
     place this skin steps past the single accent, and only to carry MEANING. ── */
  --et-blue-bg:   #eff4ff; --et-blue-fg:   #2563eb;   /* Reading / Session  */
  --et-red-bg:    #fef2f2; --et-red-fg:    #dc2626;   /* Assignment / Due   */
  --et-violet-bg: #f5f3ff; --et-violet-fg: #7c3aed;   /* Quiz / Peer        */
  --et-teal-bg:   #effaf7; --et-teal-fg:   #0d9488;   /* Video              */
  --et-amber-bg:  #fef6e7; --et-amber-fg:  #92500e;   /* Reminder           */
  --et-gray-bg:   #f0f2f6; --et-gray-fg:   #555b66;   /* info / neutral     */
  --et-green-bg:  #ecfdf3; --et-green-fg:  #15803d;   /* done / complete    */
}

/* ──────────────────────────────────────────────────────────────────────────
   1b. DARK / MIDNIGHT tone — NEUTRAL grayscale surfaces (Felipe: "black, NEVER
   navy"). Every surface/cover/border below is true grayscale (R=G=B, zero blue
   cast): page #121212, cards #1c1c1c, recessed #161616, alt-card #181818,
   borders #2c2c2c, covers neutral dark grey. The editorial identity stays — flat
   hairline + tint-pills + small radii — it is just NEUTRAL instead of navy. The
   ink ramp is neutral gray too, all AA on the neutral surfaces (text 4.5:1 /
   UI 3:1). The semantic tint-pills keep their MEANING hue (blue/red/violet/teal/
   amber/green) but their neutral "info/gray" pill is de-navied to true grey.
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"][data-theme="dark"],
html[data-skin="editorial"][data-theme="midnight"] {
  --bg: #1c1c1c;            --w-card: #1c1c1c;          /* card surface — neutral charcoal */
  --bg-2: #121212;          --w-page: #121212;          /* page ground — near-black, no blue */
  --bg-3: #161616;          --w-locked: #161616;        /* recessed fill: tabs/pills/locked */
  --card-2: #181818;        --w-card-2: #181818;        /* faint alt card */
  --border: #2c2c2c;        --w-line: #2c2c2c;          /* the dark NEUTRAL hairline */
  --border-strong: #3a3a3a; --w-line-2: #3a3a3a;
  --w-lock-border: #3a3a3a;
  --cover-1: #3a3a3a; --cover-2: #303030; --cover-3: #2a2a2a;  /* neutral dark-grey cover tiles */
  /* ink — neutral gray ramp; all AA on the neutral surfaces */
  --ink: #ededed;           --w-ink: #ededed;           /* 14.6:1 on card — primary */
  --ink-2: #c9c9c9;         --w-ink-2: #c9c9c9;         /* 10.3:1 — secondary */
  --ink-3: #a6a6a6;         --w-ink-3: #a6a6a6;         /* 7.0:1 — tertiary/tab/subtext */
  --ink-4: #929292;
  --w-ink-4: #9a9a9a;       /* 6.1:1 on card / 6.7:1 on page — mono micro-labels */
  --page-bg: #121212;
  --card-shadow: none;  --w-shadow: none;  --w-shadow-lift: none;
  --shadow-1: none;  --shadow-2: 0 1px 0 rgba(0,0,0,.30);  --shadow-3: 0 10px 30px rgba(0,0,0,.5);
  --shadow-coral: none;
  /* dark-readable type-tints: a deep bed + a bright pale-saturated fg (AA ≥7:1 each).
     The hue beds are kept (color = meaning); the NEUTRAL "info/gray" bed is true grey. */
  --et-blue-bg:   #1b2740; --et-blue-fg:   #93b4ff;
  --et-red-bg:    #3a1f23; --et-red-fg:    #f6a6a6;
  --et-violet-bg: #2a2342; --et-violet-fg: #c4b1ff;
  --et-teal-bg:   #15302d; --et-teal-fg:   #6fdccb;
  --et-amber-bg:  #34290f; --et-amber-fg:  #f0c879;
  --et-gray-bg:   #262626; --et-gray-fg:   #bdbdbd;   /* NEUTRAL info pill — true grey, no navy */
  --et-green-bg:  #16301f; --et-green-fg:  #74d39a;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. SHELL + NAV — flat, hairline divider, uppercase nav labels. A calm
   "course operating system" rail, not a SaaS sidebar.
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .app-shell,
html[data-skin="editorial"] body { background: var(--page-bg); }
html[data-skin="editorial"] .app-sidebar {
  background: var(--w-card); border-right: 1px solid var(--w-line); box-shadow: none;
}
/* uppercase, letter-spaced nav labels — the editorial signature on the rail. */
html[data-skin="editorial"] .side-link {
  border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--w-ink-3); padding: 10px 12px;
}
html[data-skin="editorial"] .side-link:hover { background: var(--w-page); color: var(--w-ink); }
html[data-skin="editorial"] .side-link.current {
  background: var(--c-tint); color: var(--c-text); font-weight: 700;
}
html[data-skin="editorial"] .side-exit {
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 11.5px;
}
/* topbar — flat hairline, no float */
html[data-skin="editorial"] .app-topbar { box-shadow: none; }

/* ──────────────────────────────────────────────────────────────────────────
   3. CARDS — flat, 1px #e6ebf1 border, small 8px radius, no shadow.
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .card,
html[data-skin="editorial"] .sec-card,
html[data-skin="editorial"] .iax-card,
html[data-skin="editorial"] .ix-empty {
  border: 1px solid var(--w-line); border-radius: 8px; box-shadow: none;
}
/* hover lift becomes a border darken + the faintest hairline, never a float. */
html[data-skin="editorial"] .sec-card:hover,
html[data-skin="editorial"] a.iax-card:hover,
html[data-skin="editorial"] .iax-card[role="button"]:hover {
  border-color: var(--w-line-2); box-shadow: var(--shadow-2); transform: none;
}

/* SECTION MICRO-LABELS — the editorial signature: uppercase, letter-spaced,
   ~13px, quiet gray. Applied to every eyebrow + the dashboard-view section heads.
   These are QUIET LABELS, not big headings. */
html[data-skin="editorial"] .dash-eyebrow,
html[data-skin="editorial"] .card-eyebrow,
html[data-skin="editorial"] .hero-eyebrow,
html[data-skin="editorial"] .ov-sub,
html[data-skin="editorial"] .mom-l,
html[data-skin="editorial"] .ag-count-l,
html[data-skin="editorial"] .xv-pick-head,
html[data-skin="editorial"] .dv-pick-head {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--w-ink-4);
}
/* the dash page title + the dv section heads stay crisp display, just tighter. */
html[data-skin="editorial"] .dash-head h1 { font-family: var(--font-display); letter-spacing: -0.02em; }
html[data-skin="editorial"] .dv-sec-h,
html[data-skin="editorial"] .ag-h,
html[data-skin="editorial"] .vpl-h,
html[data-skin="editorial"] .ps-journey { font-family: var(--font-display); letter-spacing: -0.015em; }

/* ──────────────────────────────────────────────────────────────────────────
   4. BUTTONS — the platform coral stays the primary action. Editorial = flat
   (no coral glow), crisp 6px radius.
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .btn-coral {
  border-radius: 6px; box-shadow: none; letter-spacing: 0;
}
html[data-skin="editorial"] .btn-coral:hover { box-shadow: none; }
html[data-skin="editorial"] .btn-ghost-coral {
  border-radius: 6px; box-shadow: none; border-color: var(--w-line-2);
}
html[data-skin="editorial"] .btn-ghost-coral:hover { border-color: var(--c-line); }

/* ──────────────────────────────────────────────────────────────────────────
   5. THE CONTINUE HERO — a coral 2px left rail marks "do this now" (the GH
   this-week card). Flat, hairline, small radius.
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .hero-card {
  border: 1px solid var(--c-line); border-radius: 8px; box-shadow: none;
}
html[data-skin="editorial"] .hero-card::before { width: 3px; background: var(--c-deep); }
html[data-skin="editorial"] .hero-title { font-family: var(--font-display); }

/* ──────────────────────────────────────────────────────────────────────────
   6. THE MODULES LADDER = a WEEKS ACCORDION.
   .journey-sep becomes a clean WEEK header: a small number badge + the week/
   group title (a clear header here, not a tiny micro-label) + a hairline rule +
   the collapse chevron. Numbered session rows sit beneath. Completed rows dim.
   ────────────────────────────────────────────────────────────────────────── */
/* drop the coral connector spine — an accordion reads by its hairlines, not a vine. */
html[data-skin="editorial"] .journey::before { display: none; }
html[data-skin="editorial"] .journey { gap: 7px; }

/* the WEEK header row */
html[data-skin="editorial"] .journey-sep {
  margin: 18px 0 8px; gap: 11px; padding-bottom: 9px;
  border-bottom: 1px solid var(--w-line);
}
html[data-skin="editorial"] .journey-sep:first-child { margin-top: 4px; }
/* the number badge — a quiet square "week" marker (flat, small radius, not a coral block). */
html[data-skin="editorial"] .jsep-num {
  background: var(--w-locked); color: var(--w-ink-2); box-shadow: none;
  border: 1px solid var(--w-line); border-radius: 5px;
  width: 26px; height: 26px; font-size: 11px; font-weight: 700;
}
/* the week/group TITLE — a clear, readable header (the GH "W1" + name), not a faint micro-label. */
html[data-skin="editorial"] .jsep-label {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.005em; text-transform: none; color: var(--w-ink);
}
/* the rule fills the rest of the header line as a hairline; the chevron stays the toggle. */
html[data-skin="editorial"] .jsep-rule { display: none; }
html[data-skin="editorial"] .journey-sep { display: flex; align-items: center; }
html[data-skin="editorial"] .jsep-label { flex: 1; }
html[data-skin="editorial"] .jsep-chev { color: var(--w-ink-3); margin-left: 0; }
/* collapsible week header: a quiet hover bed, the hairline stays. */
html[data-skin="editorial"] .journey-sep.is-collapsible {
  border-radius: 6px; padding: 6px 8px 9px; margin-left: -8px; margin-right: -8px;
}
html[data-skin="editorial"] .journey-sep.is-collapsible:hover { background: var(--w-page); }

/* the journey-divider (the per-group "N / M complete" head on a course path) */
html[data-skin="editorial"] .journey-divider { border-bottom: 1px solid var(--w-line); }
html[data-skin="editorial"] .jd-name { font-family: var(--font-display); }
html[data-skin="editorial"] .jd-count { color: var(--w-ink-4); }

/* the SESSION rows — flat, hairline, small radius; a numbered tile on the left. */
html[data-skin="editorial"] .jrow {
  border: 1px solid var(--w-line); border-radius: 8px; box-shadow: none;
}
html[data-skin="editorial"] a.jrow:hover {
  transform: none; box-shadow: var(--shadow-2); border-color: var(--w-line-2);
}
/* THE NUMBER TILE — the single biggest "this is its own world" move. Where Default
   fills the cover with a soft coral/peach block, Editorial renders the GH academic
   "session-number badge": a FLAT NEUTRAL square with a 1px hairline + a small radius
   + a DARK/LIGHT ink number (not white-on-coral). Coral is reserved as a thin accent
   RAIL on the current row only ("do this now"), never a filled coral tile. This is
   what separates Editorial from "Default with tweaks". */
html[data-skin="editorial"] .jcover {
  width: 44px; border-radius: 6px; border: 1px solid var(--w-line);
  background: var(--w-locked);
}
html[data-skin="editorial"] .jcover .jnum { color: var(--w-ink-2); }   /* ink number, not white */
html[data-skin="editorial"] .jcover svg { color: var(--w-ink-3); }
/* available / completed = quiet neutral squares (the academic badge). */
html[data-skin="editorial"] .jrow.is-available .jcover { background: var(--w-locked); }
html[data-skin="editorial"] .jrow.is-completed .jcover {
  background: var(--et-green-bg); border-color: transparent;
}
html[data-skin="editorial"] .jrow.is-completed .jcover .jnum,
html[data-skin="editorial"] .jrow.is-completed .jcover svg { color: var(--et-green-fg); }
/* CURRENT = the only coral. A flat coral-tint square + a 2px coral rail on the edge —
   the GH "this week" marker, not a saturated coral block. */
html[data-skin="editorial"] .jrow.is-current .jcover {
  background: var(--c-tint); border-color: var(--c-line);
}
html[data-skin="editorial"] .jrow.is-current .jcover .jnum,
html[data-skin="editorial"] .jrow.is-current .jcover svg { color: var(--c-text); }
html[data-skin="editorial"] .jrow.is-current .jcover::after { width: 2px; background: var(--c-deep); }
html[data-skin="editorial"] .jtitle { font-weight: 650; }

/* PAST / COMPLETE rows DIM to opacity .55 (the GH "past week" treatment); hover lifts it. */
html[data-skin="editorial"] .jrow.is-completed { opacity: 0.55; transition: opacity 150ms var(--ease-out); }
html[data-skin="editorial"] a.jrow.is-completed:hover { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  html[data-skin="editorial"] .jrow.is-completed { transition: none; }
}

/* the below-row session/element rows (the typed work under a module) — flat hairline. */
html[data-skin="editorial"] .jelr { border-radius: 6px; }

/* ──────────────────────────────────────────────────────────────────────────
   7. THE TYPE-TINT PILL SYSTEM (the most borrowable GH idea).
   Pale bg + saturated fg, 11px/700/3px-radius. Color carries MEANING. The GH
   set is keyed by CLASS where the platform exposes one (assignment-status,
   order-status, the active/coming state). The element-type pills (.jel / .iax-el)
   are rendered without a per-type class hook, so they take the editorial SESSION
   tint (blue — the GH reading/session hue), with the in-dev "coming" state going
   to the neutral info gray. The icon inside each pill still differentiates type.
   ────────────────────────────────────────────────────────────────────────── */
/* base pill shape — flat, tiny radius, bold, tight; the SESSION blue tint. */
html[data-skin="editorial"] .jel {
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em; border-radius: 3px;
  padding: 2px 7px; border: 0;
  background: var(--et-blue-bg); color: var(--et-blue-fg);
}
html[data-skin="editorial"] .jel svg { width: 11px; height: 11px; }
/* a "coming soon" / in-dev type greys out to the neutral info tint. */
html[data-skin="editorial"] .jel.coming {
  background: var(--et-gray-bg); color: var(--et-gray-fg);
}
/* the explore-card element pills (.iax-el) — same flat tint; .soon → info gray. */
html[data-skin="editorial"] .iax-el {
  border-radius: 3px; border: 0; font-weight: 700;
  background: var(--et-blue-bg); color: var(--et-blue-fg);
}
html[data-skin="editorial"] .iax-el.soon { opacity: 1; background: var(--et-gray-bg); color: var(--et-gray-fg); }

/* ASSIGNMENT-STATUS chips — semantic: due/todo=red, done=green, soon=amber, locked=gray.
   The platform classes (.is-done/.is-todo/.is-soon/.is-locked) map to the GH hues. */
html[data-skin="editorial"] .ag-status { font-weight: 700; }
html[data-skin="editorial"] .ag-status.is-done  { color: var(--et-green-fg); }
html[data-skin="editorial"] .ag-status.is-todo  { color: var(--et-red-fg); }
html[data-skin="editorial"] .ag-status.is-soon  { color: var(--et-amber-fg); }
html[data-skin="editorial"] .ag-status.is-locked { color: var(--w-ink-4); }

/* the purchases order-status chip → the semantic pill (paid=green, pending=amber). */
html[data-skin="editorial"] .ord-status { border-radius: 3px; font-weight: 700; letter-spacing: 0.03em; }
html[data-skin="editorial"] .ord-status.paid { background: var(--et-green-bg); color: var(--et-green-fg); }
html[data-skin="editorial"] .ord-status.pending { background: var(--et-amber-bg); color: var(--et-amber-fg); }
html[data-skin="editorial"] .ord-status.refunded,
html[data-skin="editorial"] .ord-status.failed,
html[data-skin="editorial"] .ord-status.canceled { background: var(--et-gray-bg); color: var(--et-gray-fg); }

/* the role chip in the topbar identity — a quiet neutral editorial pill. */
html[data-skin="editorial"] .id-role { border-radius: 3px; letter-spacing: 0.06em; }

/* ──────────────────────────────────────────────────────────────────────────
   8. THE DASHBOARD-VIEW TABS + FILTER PILLS — flat, the active one carries the
   coral tint (an action state). Filter chips read as quiet labels.
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .dv-tab {
  border-radius: 6px; font-weight: 600; letter-spacing: 0.01em;
}
html[data-skin="editorial"] .dv-tab.is-on {
  background: var(--c-tint); color: var(--c-text); border-color: var(--c-line);
}
html[data-skin="editorial"] .dv-pick-trigger,
html[data-skin="editorial"] .xv-pick-trigger {
  border-radius: 6px; box-shadow: none; border-color: var(--w-line-2);
}
html[data-skin="editorial"] .dv-pick-trigger:hover,
html[data-skin="editorial"] .xv-pick-trigger:hover { box-shadow: none; border-color: var(--c-line); }
/* the popover menus keep a real shadow (they FLOAT over content — depth is correct here). */
html[data-skin="editorial"] .dv-pick-menu,
html[data-skin="editorial"] .xv-pick-menu { border-radius: 8px; box-shadow: var(--shadow-3); }
html[data-skin="editorial"] .dv-pick-row,
html[data-skin="editorial"] .xv-pick-row { border-radius: 6px; }
/* the sub-nav rail (left-rail view) — flat hairline panel. */
html[data-skin="editorial"] .dash-views[data-view="subnav"] .dv-subnav {
  border: 1px solid var(--w-line); border-radius: 8px; box-shadow: none;
}
html[data-skin="editorial"] .dv-sub { border-radius: 6px; }

/* ──────────────────────────────────────────────────────────────────────────
   9. EXPLORE — the catalog grid. Flat hairline cards, editorial tabs, the
   semantic element pills (above). Tabs become an underline rail, GH-style.
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .iax-bookrow {
  border-radius: 8px; box-shadow: none; border: 1px solid var(--w-line);
}
html[data-skin="editorial"] .iax-bookrow:hover { box-shadow: var(--shadow-2); }
html[data-skin="editorial"] .iax-bookrow-ic { border-radius: 6px; }
html[data-skin="editorial"] .iax-tab { font-weight: 600; }
html[data-skin="editorial"] .iax-tab.on { color: var(--c-text); border-bottom-color: var(--c-deep); }
html[data-skin="editorial"] .iax-chip { border-radius: 6px; font-weight: 600; }
html[data-skin="editorial"] .iax-chip.on { background: var(--c-tint); color: var(--c-text); border-color: var(--c-line); }
html[data-skin="editorial"] .iax-search { border-radius: 6px; }
/* THE EXPLORE COVER — academic, not the soft coral card. The cover sits flush
   (radius 0) in the flat hairline card, separated from the body by a hairline
   rule (the GH "header band + line" look). The default coral-filled "t-coral"
   cover is TAMED to a flat coral-TINT band with the editorial accent ink, so a
   glance reads "course catalog", never "Default's peach card". Neutral t-ink /
   t-slate covers stay quiet grey. The uppercase mono cover-number is the
   editorial micro-label. */
html[data-skin="editorial"] .iax-cover {
  border-radius: 0; border-bottom: 1px solid var(--w-line);
}
html[data-skin="editorial"] .iax-cover.t-coral {
  background: var(--c-tint); color: var(--c-text); border-bottom-color: var(--c-line);
}
html[data-skin="editorial"] .iax-cover.t-coral .iax-cover-ico svg,
html[data-skin="editorial"] .iax-cover.t-coral .iax-lock svg,
html[data-skin="editorial"] .iax-cover.t-coral .iax-vid-play { color: var(--c-text); }
html[data-skin="editorial"] .iax-cover.t-soft { border-bottom-color: var(--c-line); }
html[data-skin="editorial"] .iax-cover-num { letter-spacing: 0.1em; text-transform: uppercase; }
/* the module detail modal — a real floating panel keeps its depth. */
html[data-skin="editorial"] .iax-modal { border-radius: 10px; box-shadow: var(--shadow-3); }

/* ──────────────────────────────────────────────────────────────────────────
   10. ACCOUNT PILL — re-skin via the --acct-* tokens to the editorial line/ink.
   (account-menu.js reads these; keep AA in both tones.)
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] {
  --acct-surface: #ffffff;
  --acct-ink: #1a1d24;
  --acct-ink-2: #51565f;
  --acct-ink-3: #767c87;
  --acct-border: #e6ebf1;
  --acct-tint: var(--coral-tint, #fcefe9);
}
html[data-skin="editorial"][data-theme="dark"],
html[data-skin="editorial"][data-theme="midnight"] {
  --acct-surface: #1c1c1c;     /* neutral charcoal — matches the dark card */
  --acct-ink: #ededed;
  --acct-ink-2: #c9c9c9;
  --acct-ink-3: #a6a6a6;
  --acct-border: #2c2c2c;
  --acct-tint: var(--coral-tint, #2e2620);
}
/* the account pill itself reads --acct-* but is shaped here for the editorial radius. */
html[data-skin="editorial"] .cc-acct { border-radius: 6px; }

/* ──────────────────────────────────────────────────────────────────────────
   11. SETTINGS → APPEARANCE — the picker tiles + the skin tabs flatten to the
   editorial line/radius so the Settings surface matches the skin it configures.
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .ap-tile,
html[data-skin="editorial"] .ap-style,
html[data-skin="editorial"] .ap-font,
html[data-skin="editorial"] .sk-tab {
  border-radius: 8px; box-shadow: none; border-color: var(--w-line-2);
}
html[data-skin="editorial"] .ap-tile:hover,
html[data-skin="editorial"] .ap-style:hover,
html[data-skin="editorial"] .ap-font:hover,
html[data-skin="editorial"] .sk-tab:hover { border-color: var(--c-line); }
html[data-skin="editorial"] .ap-preview { border-radius: 8px; box-shadow: none; }
html[data-skin="editorial"] .ap-sw,
html[data-skin="editorial"] .sk-mini { border-radius: 6px; }
html[data-skin="editorial"] .set-section-head h2 { font-family: var(--font-display); }
/* the settings sub-nav link → uppercase editorial label, matching the main rail. */
html[data-skin="editorial"] .set-navlink {
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 12.5px; border-radius: 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
   12. SHARED FLAT PRIMITIVES — instructor cards, banners, the progress summary,
   the video playlist: all the remaining surfaces flatten to the editorial line.
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"] .banner-ok,
html[data-skin="editorial"] .banner-note { border-radius: 8px; }
html[data-skin="editorial"] .banner-ok { background: var(--c-tint); border-color: var(--c-line); }
html[data-skin="editorial"] .vpl-row,
html[data-skin="editorial"] .sec-card { box-shadow: none; }
html[data-skin="editorial"] a.vpl-row:hover { transform: none; box-shadow: var(--shadow-2); border-color: var(--w-line-2); }
html[data-skin="editorial"] .vpl-ic { border-radius: 6px; }
html[data-skin="editorial"] .join-code-box,
html[data-skin="editorial"] .cc-cov { border-radius: 6px; }
/* the instructor empty-state + workspace tabs read editorial too. */
html[data-skin="editorial"] .ws-tab.on { border-bottom-color: var(--c-coral); }
html[data-skin="editorial"] .ws-head h1 { font-family: var(--font-display); }

/* ──────────────────────────────────────────────────────────────────────────
   13. PER-SKIN ACCENT PALETTE - html[data-skin="editorial"][data-accent="<id>"]
   --------------------------------------------------------------------------
   Felipe 2026-05-31: accent options are THEME-DEPENDENT. Editorial's picker
   (theme.js SKINS.editorial.options.accents) offers ACADEMIC tints:
     coral  -> Coral          (the default; platform coral, kept)
     indigo -> Academic Blue  (#2563eb, the GH reading/session blue)
     plum   -> Violet         (#7c3aed, the peer/quiz violet)
     teal   -> Teal           (#0d9488, the GH video teal)
     forest -> Ivy            (#15803d)
   Editorial's chrome reads the --c-* aliases (current state, active tab/chip,
   the hero rail, the session "current" cover, the active nav). The engine sets
   data-accent=<id>; these blocks re-point --c-coral/-deep/-text/-tint/-tint2/-line
   so the editorial action accent recolors to the academic hue (overriding the
   inline-derived default so the editorial-specific hue, not the global accent,
   is used). The type-tint PILL system (blue/red/violet/teal status hues) is
   SEMANTIC and stays fixed - it is meaning, not the action accent. AA: each
   --c-text clears 4.5:1 on the white card; --c-deep is AA behind a white label.
   ────────────────────────────────────────────────────────────────────────── */
html[data-skin="editorial"][data-accent="coral"] {
  --c-coral: #DA7756; --c-deep: #B8553A; --c-text: #a8472a;
  --c-tint: #fcefe9; --c-tint2: #f8e2d8; --c-line: rgba(218,119,86,0.26);
}
html[data-skin="editorial"][data-accent="indigo"] {
  --c-coral: #2563eb; --c-deep: #1d4ed8; --c-text: #1d4ed8;
  --c-tint: #eff4ff; --c-tint2: #dbe7ff; --c-line: rgba(37,99,235,0.26);
}
html[data-skin="editorial"][data-accent="plum"] {
  --c-coral: #7c3aed; --c-deep: #6d28d9; --c-text: #6d28d9;
  --c-tint: #f5f3ff; --c-tint2: #ece6fd; --c-line: rgba(124,58,237,0.26);
}
html[data-skin="editorial"][data-accent="teal"] {
  --c-coral: #0d9488; --c-deep: #0f766e; --c-text: #0e6f67;
  --c-tint: #effaf7; --c-tint2: #d6f1ec; --c-line: rgba(13,148,136,0.26);
}
html[data-skin="editorial"][data-accent="forest"] {
  --c-coral: #16a34a; --c-deep: #15803d; --c-text: #15722f;   /* Ivy text lifted: 4.76 -> 5.73 on the off-white page (audit fix 2026-06-01) */
  --c-tint: #ecfdf3; --c-tint2: #d6f7e1; --c-line: rgba(21,128,61,0.26);
}

/* DARK-tone variants (AA on the dark slate card; brighter fg + deep tint bed). */
html[data-skin="editorial"][data-theme="dark"][data-accent="coral"],
html[data-skin="editorial"][data-theme="midnight"][data-accent="coral"] {
  --c-coral: #e98a67; --c-deep: #b85a3c; --c-text: #f0a079;
  --c-tint: #2e2620; --c-tint2: #3a2c23; --c-line: rgba(233,138,103,0.34);
}
html[data-skin="editorial"][data-theme="dark"][data-accent="indigo"],
html[data-skin="editorial"][data-theme="midnight"][data-accent="indigo"] {
  --c-coral: #6ea0ff; --c-deep: #3b6fe0; --c-text: #93b4ff;
  --c-tint: #18233f; --c-tint2: #20305a; --c-line: rgba(110,160,255,0.34);
}
html[data-skin="editorial"][data-theme="dark"][data-accent="plum"],
html[data-skin="editorial"][data-theme="midnight"][data-accent="plum"] {
  --c-coral: #a78bfa; --c-deep: #7c3aed; --c-text: #c4b1ff;
  --c-tint: #2a2342; --c-tint2: #352b54; --c-line: rgba(167,139,250,0.34);
}
html[data-skin="editorial"][data-theme="dark"][data-accent="teal"],
html[data-skin="editorial"][data-theme="midnight"][data-accent="teal"] {
  --c-coral: #2dd4bf; --c-deep: #0f766e; --c-text: #6fdccb;
  --c-tint: #15302d; --c-tint2: #1c3f3a; --c-line: rgba(45,212,191,0.34);
}
html[data-skin="editorial"][data-theme="dark"][data-accent="forest"],
html[data-skin="editorial"][data-theme="midnight"][data-accent="forest"] {
  --c-coral: #4ade80; --c-deep: #15803d; --c-text: #74d39a;
  --c-tint: #16301f; --c-tint2: #1d3f29; --c-line: rgba(74,222,128,0.34);
}