/* ══════════════════════════════════════════════════════════════════════
   css/manage-board.css — the MANAGE BOARD, as a component

   "Your website is live" — the board a coach lands on once the thing exists:
   a live banner with Visit and Preview, a row of stat tiles, a grid of
   "Make a change" cards each pointing into the right editor, a thumbnail of
   the real thing, a manage list, and an unpublished-changes bar.

   Alex, 2026-08-02: "there's another page, a third page, that when you go to
   manage your website, we need to also create a page like this to manage your
   course using the exact same UI for them to jump into the different parts of
   their course and edit. Now you shouldn't be rebuilding any of this from
   scratch. You should just be taking the components that were already made and
   just repurposing them for the course."

   Every rule was scoped to `#page-launch-manage`. Same extraction, same risk
   and same proof as review-canvas.css and photo-stage.css: an id selector
   becomes a class one, and tests/browser/manage-board-css.browser.js renders
   the website's own markup before and after. The host must opt in with `mg`.
   ══════════════════════════════════════════════════════════════════════ */

.mg .mg-live { background: linear-gradient(110deg, #10331f 0%, #14532d 60%, #1c6b3a 100%); border-radius: var(--radius-lg); color: #fff; padding: 22px 26px; display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; margin-bottom: 18px; }
.mg .mg-live::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 90% 50%, rgba(93,212,168,0.32), transparent 60%); pointer-events:none; }
.mg .mg-live .lp { width: 12px; height: 12px; border-radius: 50%; background: #6ee7b7; flex-shrink: 0; position: relative; z-index: 1; }
.mg .mg-live .lt { flex: 1; position: relative; z-index: 1; }
.mg .mg-live .lt .tag { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #6ee7b7; }
.mg .mg-live .lt h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 24px; margin: 3px 0 2px; letter-spacing: -0.015em; }
.mg .mg-live .lt .u { font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgba(255,255,255,0.82); }
.mg .mg-live .la { display: flex; gap: 10px; position: relative; z-index: 1; }
.mg .mg-live .la a, .mg .mg-live .la button { border-radius: 11px; padding: 12px 18px; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; border: none; text-decoration: none; }
.mg .mg-live .la .primary { background: #fff; color: #14532d; }
.mg .mg-live .la .ghost { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); color: #fff; }
.mg .mg-live .la svg { width: 14px; height: 14px; }
.mg .mg-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
.mg .mg-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 10px); padding: 16px 18px; }
.mg .mg-stat .k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.mg .mg-stat .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 26px; margin-top: 6px; letter-spacing: -0.01em; }
.mg .mg-stat .d { font-size: 11.5px; color: var(--text-3); margin-top: 2px; display: inline-flex; align-items: center; gap: 5px; }
.mg .mg-stat .d.up { color: var(--good); }
.mg .mg-stat .d svg { width: 12px; height: 12px; }
@media (max-width: 880px) { .mg .mg-stats { grid-template-columns: 1fr 1fr; }
}

/* The board's section heading, in the kit (2026-08-06, funnel Manage board).
   `.sec-h` was scoped to `#page-launch-manage` (website) and `.ccw` (course
   wizard) — a third host had no heading style at all. Values are the
   website's own. Specificity note, checked against app.html load order:
   `#page-launch-manage .sec-h` (1,1,0) still beats this on the website, and
   `.ccw .sec-h` (course-wizard.css, loaded AFTER this file) still wins its
   deliberate smaller size on the course board. */
.mg .sec-h { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin: 0 2px 12px; }
.mg .sec-h .s { font-weight: 400; font-size: 13px; color: var(--text-3); font-family: "Inter", sans-serif; margin-left: 8px; }
.mg .mg-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; }
.mg .mg-edits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mg .mg-edit { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .15s; cursor: pointer; }
.mg .mg-edit:hover { border-color: var(--accent-2, var(--accent)); box-shadow: 0 22px 50px -38px rgba(106,76,241,0.5); transform: translateY(-2px); }
.mg .mg-edit .ei { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.mg .mg-edit .ei svg { width: 20px; height: 20px; }
.mg .mg-edit .en { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.mg .mg-edit .ed { font-size: 13px; color: var(--text-2); margin-top: 4px; line-height: 1.5; flex: 1; }
.mg .mg-edit .eg { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.mg .mg-edit .eg svg { width: 13px; height: 13px; }
/* §MANAGE-RETHINK row 1 — the "Next" strip: the board's opening line, one
   priority per stage. `.warn` is the finish stage (the old .mg-republish
   warning, same slot — U10.1's placement and §PUB-STATE.3's spacing carried
   over); the default dress is the accent, for invite/teach. */
.mg .mg-next { margin-top: 16px; margin-bottom: 18px; background: var(--accent-soft, #efedff); border: 1px solid #ddd9ff; border-radius: var(--radius, 10px); padding: 14px 18px; display: flex; align-items: center; gap: 13px; }
.mg .mg-next.warn { background: var(--warn-soft, #fbf3df); border-color: #ecd6a8; }
.mg .mg-next .ri { width: 32px; height: 32px; border-radius: 8px; background: #fff; border: 1px solid #ddd9ff; color: var(--accent, #6c63ff); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.mg .mg-next.warn .ri { border-color: #ecd6a8; color: var(--warn, #b8860b); }
.mg .mg-next .rt { flex: 1; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.mg .mg-next .rt b { color: var(--text); }
.mg .mg-next .rb { background: var(--accent, #6c63ff); color: #fff; border: none; border-radius: 9px; padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mg .mg-next.warn .rb { background: var(--warn, #b8860b); }

/* The three groups. A shut group is one quiet row; open carries the cards.
   The active group's border says which one the board opened for you. */
.mg .mg-group { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 12px; overflow: hidden; }
.mg .mg-group.open { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 8%, transparent); }
.mg .mg-ghead { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 13px 15px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
.mg .mg-ghead .gi { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft, #efedff); color: var(--accent, #6c63ff); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.mg .mg-ghead .gt { flex: 1; min-width: 0; }
.mg .mg-ghead .gt b { display: block; font-size: 14px; }
.mg .mg-ghead .gt span { display: block; font-size: 11.5px; color: var(--text-3); }
.mg .mg-ghead .gchev { color: var(--text-3); font-size: 14px; }
.mg .mg-group.shut .mg-ghead { opacity: .78; }
.mg .mg-group.shut .mg-gbody { display: none; }
.mg .mg-gbody { padding: 0 14px 14px; }

/* Rail state chips — only where the payload knows the truth. */
.mg .mg-chip { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 2px 8px; margin-left: 7px; vertical-align: 1px; }
.mg .mg-chip.on { background: var(--good-soft, #e7f6ec); color: #137a3c; }
.mg .mg-chip.off { background: var(--warn-soft, #fbf3df); color: #b4551a; }

/* The education strip under the rail — the artefact's approved sentence. */
.mg .mg-allin { margin-top: 14px; font-size: 11.5px; color: var(--text-3); line-height: 1.55; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; }
.mg .mg-rail { display: flex; flex-direction: column; gap: 14px; }
.mg .mg-rc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.mg .mg-rc .rc-h { padding: 14px 18px 10px; }
.mg .mg-rc .rc-h .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.mg .mg-rc .rc-b { padding: 4px 14px 14px; }
.mg .mg-mini { margin: 4px 0 0; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.mg .mg-mini iframe { width: 100%; height: 280px; border: none; display: block; background: #fff; }
.mg .mg-links { display: flex; flex-direction: column; gap: 2px; }
.mg .mg-lnk { display: flex; align-items: center; gap: 11px; padding: 10px 10px; border-radius: 9px; font-size: 13.5px; color: var(--text-2); font-weight: 500; cursor: pointer; }
.mg .mg-lnk:hover { background: var(--surface-2); color: var(--text); }
.mg .mg-lnk .li { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
.mg .mg-lnk .li svg { width: 18px; height: 18px; }
.mg .mg-lnk .ar { margin-left: auto; color: var(--text-4); }
.mg .mg-lnk .ar svg { width: 14px; height: 14px; }
@media (max-width: 1080px) { .mg .mg-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) { .mg .mg-live { flex-direction: column; align-items: flex-start; } .mg .mg-edits { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   MANAGE — the list that replaces the six-tab editor (L21)

   Alex, 2026-08-03, pointing at the WEBSITE's manage screen: "You've got
   Manage and you've got Pages… use the same UI design principles." So this is
   that screen's Manage list — a quiet stack of labelled rows, not another grid
   of cards. The green cards above it are the things the onboarding flow
   covers; this is everything else, and the two must not look like the same
   kind of choice.
   ══════════════════════════════════════════════════════════════════════ */
.mg .mg-manage {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); overflow: hidden;
}

/* §MANAGE-THUMB — the course-page thumbnail box, above the Manage list. Holds
   the still image first, then CourseCoverPreview's crop-mode frame (a
   .ccw-frame-wrap) once the real render lands; both wear the same frame so the
   swap is a change of picture, not of furniture. */
.mg .mg-shot {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); overflow: hidden;
}
.mg .mg-shot .ccw-rail-shot { aspect-ratio: 16/9; overflow: hidden; background: var(--surface-3); }
.mg .mg-shot .ccw-rail-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.mg .mg-shot .ccw-rail-name { padding: 8px 12px; font-size: 11.5px; color: var(--text-3); }
/* The mounted frame brings its own component stylesheet
   (course-preview-frame.css) — the box above is all this screen adds. */
.mg .mg-mrow {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 12px; width: 100%; text-align: left; cursor: pointer; font: inherit;
  padding: 13px 15px; background: none; border: 0; color: inherit;
}
.mg .mg-mrow + .mg-mrow { border-top: 1px solid var(--border-soft); }
.mg .mg-mrow:hover { background: var(--surface-2); }
.mg .mg-mrow .t { font-size: 13.5px; font-weight: 650; }
.mg .mg-mrow .h { grid-column: 1; font-size: 11.5px; color: var(--text-3); }
.mg .mg-mrow .g { grid-column: 2; grid-row: 1 / span 2; color: var(--text-3); font-size: 17px; }

/* The panel a row opens. NOT a modal — that part of the original note was right
   and stands: these components were built for a page-width tab body, and
   squeezing a members table into a dialog is how a reused component starts
   needing its own CSS. Alex pointed at the website's "Manage your domain"
   dialog as the better feel, and it is, for a domain; it is max-width 620px and
   these five are page-width components.

   ⚠️ BUT THE PLACEMENT WAS WRONG, AND THE NOTE DESCRIBED AN INTENTION THE
   MARKUP NEVER DELIVERED. It said "full width under the board". The panel was
   emitted inside _manageListHtml(), which lands in the SECOND column of
   `.mg-grid` — `320px`. So a members table was being squeezed into a sidebar
   rail, underneath everything the coach had not clicked, which is exactly what
   the note was trying to avoid.

   Alex, 2026-08-03: "They open up below and that's really bad UX… They need to
   just open up on their own page." So the panel is now a SIBLING of `.mg-board`
   and the board is hidden while it is open — its own page, full measure. */
.mg .mg-panel {
  padding: 16px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
/* ⚠️ The [hidden] guard, for the FOURTH time in this file — an author `display`
   beats the UA rule, and `.mg-board` is the element whose failure would leave
   the coach staring at a blank screen. */
.mg .mg-board[hidden] { display: none; }
/* ⚠️ The [hidden] guard again — an author `display` beats the UA rule. Three
   places have now been caught by this; here the panel would simply never
   close. */
.mg .mg-panel[hidden] { display: none; }
.mg .mg-panel-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border-soft);
}
.mg .mg-panel-back {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
}
.mg .mg-panel-back:hover { color: var(--accent); }
.mg .mg-panel-title {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   THE PANEL, IN THE WIZARD'S IDIOM — A0d.2 (2026-08-03)

   Alex: "we've designed a really nice UI for each of the steps and I think
   when you even come to manage it, you're using the old UI. Can you just check
   each step when you come to manage it?"

   He is right, and the check found it is NOT a design-system mismatch. Both
   sides sit on the same app-shell token base — course-page.css's own header
   says so, and the counts agree (169 token references against 196). Manage is
   the same colours and the same type in an OLDER LAYOUT IDIOM: the wizard
   gives every step a card with a small bold title inside it, and Manage gives
   flat sections under a 16px display heading on plain background.

   So this is an ADAPTATION, scoped to `.mg-panel`, mapping the handful of
   primitives that carry the difference. Deliberately NOT a rewrite of 252
   occurrences across five working modules, and deliberately scoped so that
   course-page.js — which renders these same five components on its own page —
   is untouched. One word from Alex ("rewrite") and this comes out again.

   WHAT IS NOT TOUCHED, and why: `.cpg-item` rows keep their hairline
   separators. Giving them the wizard's hover-highlight row treatment would put
   a click affordance on rows that are not clickable — most carry their own
   action buttons — and a false affordance is a worse fault than an old one.
   ══════════════════════════════════════════════════════════════════════ */

/* A section becomes a card, exactly as `.ccw-panel` is one. `.mg-panel` is the
   step card; these are the sub-cards inside it — the same nesting the wizard
   uses, not a card inside a card for its own sake. */
.mg .mg-panel .cpg-panel {
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 14px;
}
.mg .mg-panel .cpg-panel:last-child { margin-bottom: 0; }

/* Down from a 16px display heading to the wizard's in-card title. It is inside
   a card now, under `.mg-panel-title`, which is itself 16px Bricolage — two
   display headings stacked is the "wall of text" reading Alex has objected to
   twice, on the plan step and here. */
.mg .mg-panel .cpg-section-title {
  font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0; margin-bottom: 0;
}
.mg .mg-panel .cpg-section-sub { font-size: 12.5px; color: var(--text-3); margin: 5px 0 0; }
.mg .mg-panel .cpg-section-title + .cpg-section-sub { margin-bottom: 10px; }
.mg .mg-panel .cpg-msg { font-size: 12.5px; margin-top: 8px; color: var(--text-3); }

/* §QUICK-LINKS.1 — the grab-and-copy rows above the Analytics title. */
.mg-qlinks .ql-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.mg-qlinks .ql-row:last-child { border-bottom: 0; }
.mg-qlinks .ql-l { flex: none; font-weight: 600; color: var(--text-2); min-width: 92px; }
.mg-qlinks .ql-u { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-family: "JetBrains Mono", monospace; font-size: 11px; }
.mg-qlinks .ql-copy { flex: none; border: 1px solid var(--border); background: transparent; border-radius: 7px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; color: var(--text-2); }
.mg-qlinks .ql-copy:hover { border-color: var(--accent); color: var(--accent); }