/* R12 surface foundation: exactly three section surfaces. Everything is in the
 * retained r7-refinement layer. R12-S01 onward are logged in the surface ledger.
 * Real body/main scope replaces route color lists. The genuine #ordrel-r3 branch
 * is needed for retained three-ID preferred-tool rules in r6-workspaces.css.
 */
@layer r7-refinement {
  body.jem33-r12 {
    --r12-canvas:#E7F0FF;
    --r12-light:#F2F7FF;
    --r12-deep:#102338;
    --r12-brand:#1749CC;
    --r12-lift:rgba(255,255,255,.06);
    --r12-lift-border:rgba(255,255,255,.16);
    --r12-action:#FF9C50;
    --r12-action-text:#102338;
    --r12-lime:#C3FF45;
  }
  .r12-surface-light {
    --r12-bg:#F2F7FF; --r12-text:#102338; --r12-muted:#445666;
    --r12-heading:#1749CC; --r12-link:#1749CC; --r12-link-hover:#1749CC;
    --r12-border:#B8C8DC; --r12-focus:#1749CC; --r12-focus-gap:#F2F7FF;
    --r12-icon-bg:#1749CC; --r12-icon-ink:#FFFFFF;
    --r12-tab-active-bg:#1749CC; --r12-tab-active-ink:#FFFFFF;
  }
  .r12-surface-deep {
    --r12-bg:#102338; --r12-text:#FFFFFF; --r12-muted:#CBD5DE;
    --r12-heading:#FFFFFF; --r12-link:#FFFFFF; --r12-link-hover:#FFFFFF;
    --r12-border:rgba(255,255,255,.16); --r12-focus:#FFFFFF; --r12-focus-gap:#102338;
    --r12-icon-bg:rgba(255,255,255,.06); --r12-icon-ink:#FFFFFF;
    --r12-tab-active-bg:#1749CC; --r12-tab-active-ink:#FFFFFF;
  }
  .r12-surface-brand {
    --r12-bg:#1749CC; --r12-text:#FFFFFF; --r12-muted:#DFE9FF;
    --r12-heading:#FFFFFF; --r12-link:#FFFFFF; --r12-link-hover:#FFFFFF;
    --r12-border:rgba(255,255,255,.16); --r12-focus:#FFFFFF; --r12-focus-gap:#1749CC;
    --r12-icon-bg:rgba(255,255,255,.06); --r12-icon-ink:#FFFFFF;
    --r12-tab-active-bg:#102338; --r12-tab-active-ink:#FFFFFF;
  }
  .r12-card-lift { --r12-bg:var(--r12-lift); --r12-border:var(--r12-lift-border); }
  .r12-tool-secondary-tabs { --r12-tab-active-bg:#F2F7FF; --r12-tab-active-ink:#1749CC; }

  /* R12-S01: the existing body and every actual main share the light canvas. */
  body#ordrel-r163.jem33-r4.jem33-r12,
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root.r12-canvas[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) {
    background-color:var(--r12-canvas)!important;
  }
  /* R12-S02: semantic panels replace retained important surface fills/borders.
   * There is deliberately no inherited color reset on an instrument wrapper. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-surface[data-r12-surface],
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-surface[data-r12-surface] {
    background-color:var(--r12-bg)!important;
    border-color:var(--r12-border)!important;
  }
  /* R12-S03: gradient-only decorative fills; url() backgrounds are retained.
   * Normal priority: no non-instrument important gradient predecessor exists. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-clear-gradient[data-r12-surface],
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-clear-gradient[data-r12-surface] {
    background-image:none;
  }
  /* R12-S16: actual layout frames stay transparent; their sibling panels own fill. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-surface-frame[data-r12-surface],
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-surface-frame[data-r12-surface] {
    background:transparent!important;
  }
  /* R12-S04: one translucent inner-card treatment on deep/brand sections. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-card-lift[data-r12-surface],
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-card-lift[data-r12-surface] {
    border:1px solid var(--r12-lift-border)!important;
  }
  /* R12-S05/06/07: actual text-bearing HTML nodes, never a wildcard descendant
   * reset. Native instruments, semantic statuses and held owner tiles are skipped. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-ink[data-r12-tone="text"],
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-ink[data-r12-tone="text"] {
    color:var(--r12-text)!important;
  }
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-ink[data-r12-tone="muted"],
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-ink[data-r12-tone="muted"] {
    color:var(--r12-muted)!important;
  }
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-ink[data-r12-tone="heading"],
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-ink[data-r12-tone="heading"] {
    color:var(--r12-heading)!important;
  }
  /* R12-S08/09: two content-link colors, plus the protected lime Lean links.
   * Link descendants inherit the link ink, including an icon/arrow label. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) a.r12-text-link[href],
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 a.r12-text-link[href],
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .oc-demo .oc-panel a[href] {
    color:var(--r12-navigation-link,var(--r12-link))!important;
    text-decoration-line:underline!important;
    text-underline-offset:.2em!important;
    text-decoration-thickness:1px;
  }
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) a.r12-text-link[href]:is(:hover,:focus-visible) {
    color:var(--r12-link-hover)!important;
  }
  /* The four native example-navigation anchors remain inside the unchanged
   * deep instrument wrapper. Only their link ink is normalized; no classes or
   * attributes are added anywhere in the protected .oc-demo subtree. */
  .jem33-r12 .oc-demo .oc-panel a[href] { --r12-navigation-link:#FFFFFF; }
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) a.r12-text-link[href].r12-lean-link {
    color:var(--r12-lime)!important;
  }
  /* R12-S17: labelled link children cannot keep an obsolete independent ink. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-link-ink,
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-link-ink {
    color:inherit!important;
  }
  /* R12-S10: original primary action colors; the green Safety CTA is not marked. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) a.r12-primary-action:not(:hover,:active,[aria-disabled="true"]) {
    background-color:var(--r12-action)!important;
    color:var(--r12-action-text)!important;
    border-color:var(--r12-action)!important;
  }
  /* R12-S11: outline actions are paired with their actual surrounding surface. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) a.r12-outline-action:not(:hover,:active,[aria-disabled="true"]) {
    background:transparent!important;
    color:var(--r12-link)!important;
    border-color:currentColor!important;
  }
  /* R12-S12: ordinary icon backplates; instrument icons are not marked. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-icon-accent,
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-icon-accent {
    background-color:var(--r12-icon-bg)!important;
    color:var(--r12-icon-ink)!important;
  }
  /* R12-S20: ordinary category symbols; their SVG bytes and geometry stay intact.
   * Retained r8-system.css:15 color and :16 stroke are important predecessors. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-category-symbol > svg {
    color:var(--r12-heading)!important;
    stroke:var(--r12-heading)!important;
  }
  /* R12-S19: ordinary numbered journey markers, not instrument/data colors.
   * Native counter content and circle geometry remain unchanged. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-step-marker::before {
    background-color:var(--r12-tab-active-bg)!important;
    color:var(--r12-tab-active-ink)!important;
  }
  /* R12-S13/14: native state attributes stay the authority for tool tabs.
   * A native list item can own the selected state for its direct tab button. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-tab,
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-tab {
    --r12-tab-number-bg:transparent;
    --r12-tab-number-ink:var(--r12-muted);
    --r12-tab-indicator:transparent;
    background-color:var(--r12-bg)!important;
    color:var(--r12-text)!important;
    border-color:var(--r12-border)!important;
  }
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-tab:is([aria-selected="true"],[aria-current],[aria-pressed="true"],.is-active,.active,.flow-active),
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-tab:is([aria-selected="true"],[aria-current],[aria-pressed="true"],.is-active,.active,.flow-active),
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-tool-tabs .r12-tab-cell:is([aria-current="step"],[aria-selected="true"],[aria-pressed="true"],.is-active,.active,.flow-active) > .r12-tab,
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-tool-tabs .r12-tab-cell:is([aria-current="step"],[aria-selected="true"],[aria-pressed="true"],.is-active,.active,.flow-active) > .r12-tab {
    --r12-tab-number-bg:rgba(255,255,255,.12);
    --r12-tab-number-ink:var(--r12-tab-active-ink);
    --r12-tab-indicator:var(--r12-tab-active-ink);
    background-color:var(--r12-tab-active-bg)!important;
    color:var(--r12-tab-active-ink)!important;
    border-color:var(--r12-tab-active-bg)!important;
    text-decoration-line:underline;
    text-decoration-thickness:3px;
    text-underline-offset:.35em;
  }
  /* R12-S21: this new neutral flex wrapper has no important shadow predecessor.
   * An inset line remains visible through flex children and adds no box size. */
  .jem33-r12 .r12-tool-tabs .r12-tab-content {
    box-shadow:inset 0 -3px 0 var(--r12-tab-indicator,transparent);
  }
  /* R12-S22: the new cue inherits the summary's paired ink, including protected examples. */
  .jem33-r12 .r12-disclosure > summary::after { color:currentColor; }
  /* R12-S23: only new ordinary summary wrappers use the mapped heading pair. */
  .jem33-r12 .r12-disclosure.r12-surface-context > summary { color:var(--r12-heading); }
  /* R12-S18: native numeral chips follow their tab's state and surface pair. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-tab-number,
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-tab-number {
    background-color:var(--r12-tab-number-bg)!important;
    color:var(--r12-tab-number-ink)!important;
  }
  /* R12-S15: paired focus ring, keeping the existing 3px/2px geometry. */
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) .r12-focus-control:focus-visible,
  body#ordrel-r163.jem33-r4.jem33-r12 main.r12-surface-root[data-r12-surface]:is(#main,#r5-workspace,[data-r12-surface]) #ordrel-r3 .r12-focus-control:focus-visible {
    outline:3px solid var(--r12-focus)!important;
    box-shadow:0 0 0 2px var(--r12-focus-gap)!important;
  }
}