/* The Ohmix MG answer page, made to read as one professional document (owner
 * directive 2026-10-28, HS PHEV case at ~1900 px):
 *   - one reading column that uses the width: prose held to ~72 rem, tables,
 *     pin/criteria tables and source cards across the full content width, one
 *     left edge for the question, "Question for you", the answer and sources;
 *   - one sans-serif family, one text colour, one muted secondary, the brand
 *     accent only for primary buttons, links and the active item; status
 *     colours (red/amber/green) only on safety and verdict badges;
 *   - labels in sentence case, small, muted — no monospace, no uppercase, no
 *     letter-spacing.
 * Scoped to the MG workspace (.mg-shell, the dealer choice bar); the rest of
 * the app keeps its own look. Tokens on :root, with dark-mode equivalents.
 */
:root{
  --mg-read-max:72rem;            /* prose measure (~1150 px)                 */
  --mg-col-max:100rem;            /* the content column (tables, cards)       */
  --mg-gutter:clamp(1rem,2.6vw,2.25rem);
  --mg-text:var(--ink);
  --mg-muted:var(--ink-dim);
  --mg-faint:var(--ink-faint);
  --mg-accent:var(--accent);
  --mg-border:var(--line);
  --mg-border-strong:var(--line-strong);
  --mg-surface:var(--surface);
  --mg-surface-2:var(--bg-2);
  --mg-label-size:.8rem;
  --mg-headline-size:1.125rem;    /* ~18 px                                    */
  --mg-chip-bg:color-mix(in srgb,var(--accent) 7%,transparent);
  --mg-shadow:0 1px 2px rgba(16,40,55,.06);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --mg-chip-bg:color-mix(in srgb,var(--accent) 12%,transparent);
    --mg-shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --mg-chip-bg:color-mix(in srgb,var(--accent) 12%,transparent);
  --mg-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ---- one family --------------------------------------------------------- */
.mg-shell,.mg-shell *,.mg-shell :is(button,input,select,textarea,.btn,.chip,.mono,code,kbd,.progress,.tg-refs,.mg-rs),
.dealer-ask-choice,.dealer-ask-choice .btn{font-family:var(--font-sans)}
/* Measured values and part numbers keep tabular figures, not a second face. */
.mg-shell :is(.mono,code,.tg-sips,.mr-path-step,.mr-cap-val){font-variant-numeric:tabular-nums}

/* ---- labels: sentence case, small, muted --------------------------------- */
.mg-shell :is(.eyebrow,.k,.mg-side-title,.rsec>h3,.mr-title,.mr-proc-k,.mr-proc-whenk,.mr-scope-k,.mr-routine-k,.mr-k-inline,
  .tg-eyebrow,.tg-verdict-k,.tg-k,.mg-sources .rsec>h3,.chip,.mg-side-state){
  text-transform:none;letter-spacing:0;font-family:var(--font-sans)}
.mg-shell :is(.eyebrow,.k,.mg-side-title,.mr-title,.mr-proc-k,.tg-eyebrow,.tg-k,.mr-proc-whenk,.mr-scope-k,.mr-routine-k,.mr-k-inline){
  font-size:var(--mg-label-size);font-weight:500;color:var(--mg-muted)}
.mg-shell .tg-verdict-k{font-size:var(--mg-label-size);font-weight:500}
/* Brand and filler labels the owner removed: "Ohmix MG", "Verified manual answer". */
.mg-title>.eyebrow,.mg-chat .ask-manual-answer>.eyebrow{display:none}
/* The answer's scope line ("MG HS PHEV · 1 approved manual"): one muted line. */
.mg-chat .ask-manual-answer>.quick:first-of-type .k,.mg-chat .ask-manual-answer .k{color:var(--mg-muted)}
.mg-chat .ask-manual-answer .k svg,.mg-chat .ask-manual-answer .k .ic{display:none}
/* Section headings inside the answer: sentence case, text colour, no accent bar. */
.mg-shell .rsec>h3{font-size:.9rem;font-weight:600;color:var(--mg-text);background:transparent;border-left:0;padding:.55rem 0}
.mg-shell .rsec{border:0;background:transparent}

/* ---- cite chips: links, quiet --------------------------------------------- */
.mg-shell .chip{font-size:.74rem;font-weight:500;padding:.06rem .45rem;border-color:var(--mg-border);color:var(--mg-muted);background:transparent}
.mg-shell .chip.acc{color:var(--mg-accent);background:var(--mg-chip-bg);border-color:transparent}
.mg-shell .chip.acc:hover,.mg-shell .chip.acc:focus-visible{border-color:var(--mg-accent)}

/* ---- the reading column: wide, one left edge ------------------------------ */
.mg-shell{--prose-max:var(--mg-read-max)}
.mg-shell .mg-read{max-width:var(--mg-col-max);padding-inline:var(--mg-gutter)}
@media (min-width:1440px){ .mg-shell .mg-read{max-width:var(--mg-col-max)} }
@media (min-width:1800px){ .mg-shell .mg-read{max-width:var(--mg-col-max)} }
/* The composer's boxes on the answer's left edge: no inner gutter of its own,
   as wide as the column's content (wider or narrower than the column). */
.app:has(.panel.on > #manual-ask-content:not([hidden])) .ask-card.mg-composer{width:min(calc(var(--mg-col-max) - 2 * var(--mg-gutter)),calc(100% - 2 * var(--mg-gutter)));max-width:none;padding-left:0;padding-right:0}
/* A prompt is not a warning: the scope line's "choose the model" in the muted colour. */
.mg-shell #askScope span[style*="--warn"]{color:var(--mg-muted) !important}
/* The question sits on the same left edge as the answer; no avatar indent. */
.mg-shell .mg-msg{gap:0}
.mg-shell .mg-user{align-items:flex-start}
.mg-shell .mg-bubble{max-width:min(100%,var(--mg-read-max));border-radius:12px;background:var(--mg-surface-2)}
.mg-shell .mg-time{margin:0 0 0 .1rem;color:var(--mg-faint)}
.mg-shell .mg-bot .mg-avatar{display:none}
/* Prose holds its measure; tables, the report's tables and cards take the column. */
.mg-shell :is(.mr-headline,.mr-proc-one,.mr p,.mr li,.tg-step-body>p,.mg-ask p,.mg-guidance p){max-width:var(--mg-read-max)}
.mg-shell :is(.tablewrap,.mr-table,.mr-wide,.tg-rdt,.mr-proc,.tg){max-width:none;width:100%}
/* The answer and its sources: one column. Sources follow the answer as cards
   across the full width (was a 250 px rail beside it). */
.mg-shell .mg-answer-grid{display:block}
@container (min-width:760px){ .mg-shell .mg-answer-grid{display:block} }
.mg-shell .mg-sources{position:static;max-height:none;overflow:visible;margin-top:1.4rem}
.mg-shell .mg-sources .rsec>h3{cursor:default}
.mg-shell .mg-sources .rsec>h3 .chev{display:none}
.mg-shell .mg-sources .rsec.closed>.rsec-body,.mg-shell .mg-sources .rsec>.rsec-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.6rem;padding:0}
.mg-shell .mg-sources .rsec-body>div{margin:0 !important;padding:.6rem .7rem !important;border:1px solid var(--mg-border) !important;border-radius:10px !important;background:var(--mg-surface);box-shadow:var(--mg-shadow)}
.mg-shell .mg-sources .rsec-body strong{font-size:.86rem}
.mg-shell .mg-sources .rsec-body .mono{font-size:.8rem !important;color:var(--mg-muted) !important}
.mg-shell .mg-sources [data-askshots]{margin-top:.8rem}

/* ---- the headline: ~18 px, semi-bold, not a wall --------------------------- */
.mg-shell .mr-headline{font-size:var(--mg-headline-size);line-height:1.55;margin:.4rem 0 1rem}
.mg-shell .mr-headline strong{font-weight:600}
.mg-shell .mr-title{margin:.4rem 0 .15rem}

/* Boxed lines inside the answer share the prose measure. */
.mg-shell :is(.mr-subcode,.mr-correction){max-width:var(--mg-read-max)}

/* ---- "Question for you" and other prompts: neutral cards ------------------ */
.mg-shell .mg-ask{background:var(--mg-surface);border:1px solid var(--mg-border);border-left:1px solid var(--mg-border);border-radius:10px;padding:.7rem .9rem;box-shadow:var(--mg-shadow)}
.mg-shell .mg-ask h3{font-size:var(--mg-label-size);font-weight:500;color:var(--mg-muted);text-transform:none;letter-spacing:0;margin:0 0 .25rem}
.mg-shell .mg-ask p{font-weight:500;color:var(--mg-text)}
.mg-shell :is(.mr-subcode,.mr-correction,.mr-authorize,.tg-authorize){border-left-width:1px;border-color:var(--mg-border);background:var(--mg-surface)}
.mg-shell .mr-subcode{border:1px solid var(--mg-border);border-radius:10px}
/* The composer's model prompt (ADR-184) is a question, not a warning. */
.mg-shell :is(#askVehicleNeed,.mg-vneed,.mg-vehicle-need){border-color:var(--mg-border) !important;background:var(--mg-surface) !important}
/* Decision lines: the arrow in the muted colour, the accent stays for links. */
.mg-shell .mr-arrow{color:var(--mg-muted)}

/* ---- the dealer choice bar: inside the page gutter, never at x=0 ------------ */
.app:has(.panel.on > #manual-ask-content:not([hidden])) .dealer-ask-choice:not([hidden]){display:flex;flex:0 0 auto;gap:.4rem;margin:0;padding:.5rem var(--mg-gutter);border-bottom:1px solid var(--mg-border);background:var(--mg-surface);box-sizing:border-box;max-width:100%;overflow-x:auto}
.app:has(.panel.on > #manual-ask-content:not([hidden])) .dealer-ask-choice .btn{min-height:2.25rem;padding:.35rem .85rem;font-size:.84rem;font-weight:500;border-radius:var(--r-pill);background:transparent;color:var(--mg-muted);border-color:var(--mg-border)}
.app:has(.panel.on > #manual-ask-content:not([hidden])) .dealer-ask-choice .btn[aria-pressed=true]{background:var(--mg-accent);color:var(--accent-ink);border-color:var(--mg-accent)}
/* Nothing in the MG workspace starts left of the viewport. */
.mg-shell,.mg-shell .mg-main,.mg-shell .mg-side{min-width:0;max-width:100%;box-sizing:border-box}