/* R12 layouts and tool shells. Semantic annotations are applied by R12Layout.
 * Surface colors and active-tab colors belong to R12Surfaces.
 * Important provenance: review/R12-Layout-Important-Ledger.md.
 */
@layer r7-refinement {
  /* L01 — one mobile track; desktop is an enhancement, never a fallback. */
  body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-layout-grid[data-r12-layout] {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-auto-flow: row;
    gap: 24px !important;
    align-items: stretch !important;
    min-width: 0;
    width: 100%;
  }
  body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-layout-grid[data-r12-layout] > .r12-layout-item {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
  }
  body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-layout-grid[data-r12-layout] > :is(.r12-grid-wide,.r12-grid-heading) {
    grid-column: 1 / -1 !important;
  }
  @media (min-width:601px) {
    body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-layout-grid[data-r12-layout] {
      grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
  }
  @media (min-width:1051px) {
    body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-layout-grid[data-r12-layout] {
      grid-template-columns: repeat(var(--r12-desktop-columns,3),minmax(0,1fr)) !important;
    }
  }

  /* L02 — Safety copy and actions are grouped by meaning, never child number. */
  body.jem33-r4.jem33-r12 #main.r12-layout-root .sseo-offer.r12-layout-grid {
    row-gap: 24px !important;
    column-gap: 24px !important;
    padding: 24px !important;
  }
  .r12-layout-root :is(.r12-offer-copy,.r12-offer-actions) {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  .r12-layout-root :is(.r12-offer-copy,.r12-offer-actions) > p {
    margin: 0;
    max-width: 68ch;
  }
  .r12-layout-root .r12-offer-actions .sseo-actions { margin: 0; }
  .r12-layout-root .r12-offer-term { padding: 12px 0; font-weight: 750; }

  /* L03 — Help copy gets its full card width at mobile/tablet sizes. */
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-layout-grid[data-r12-layout="help-topics"] > .hc-topic {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
  }
  .r12-layout-root .r12-layout-grid[data-r12-layout="help-topics"] > .hc-topic > .hc-topic-icon { grid-area: 1 / 1; }
  .r12-layout-root .r12-layout-grid[data-r12-layout="help-topics"] > .hc-topic > .hc-topic-arrow { grid-area: 1 / 2; }
  .r12-layout-root .r12-layout-grid[data-r12-layout="help-topics"] > .hc-topic > div { grid-column: 1 / -1; min-width: 0; }
  @media (min-width:1051px) {
    body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-layout-grid[data-r12-layout="help-topics"] > .hc-topic { grid-template-columns: 44px minmax(0,1fr) auto; }
    .r12-layout-root .r12-layout-grid[data-r12-layout="help-topics"] > .hc-topic > div { grid-area: 1 / 2; }
    .r12-layout-root .r12-layout-grid[data-r12-layout="help-topics"] > .hc-topic > .hc-topic-arrow { grid-area: 1 / 3; }
  }

  /* L04 — Keep native icon layout and direct SVG relationships. Only the
   * inherited R8 observation minimum is reduced; native category rows already
   * become horizontal on phones without an important override. */
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-layout-grid[data-r12-layout="waste-observation"] > li {
    min-height: 64px !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-layout-grid:is([data-r12-layout="waste-tiles"],[data-r12-layout="waste-observation"]) > li > strong {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
    min-width: 0;
    max-width: 100%;
  }

  /* L05 — existing article/report and file-package rows become complete cards.
   * Column headings remain in the DOM and visible as a compact table key.
   * Pricing's membership comparison is deliberately excluded (root owns it).
   */
  body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-responsive-table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: auto !important;
  }
  .r12-layout-root .r12-responsive-table > caption { display: block; width: 100%; }
  .r12-layout-root .r12-responsive-table > :is(thead,tbody,tfoot) { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; width: 100%; }
  .r12-layout-root .r12-responsive-table > thead { margin-bottom: 16px; }
  .r12-layout-root .r12-responsive-table .r12-table-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; min-width: 0; overflow: visible; }
  body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-responsive-table .r12-table-cell {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    overflow-wrap: normal !important;
    word-break: normal;
    hyphens: manual;
    text-align: left;
    box-sizing: border-box;
  }
  .r12-layout-root .r12-responsive-table .r12-table-row-label { font-weight: 750; }
  .r12-layout-root .r12-table-region { max-width: 100%; min-width: 0; }
  /* The files family has inherited important display/clip/position rules. */
  body.jem33-r4.jem33-r12 #main.r12-layout-root .pricing-files-table .r12-responsive-table { display: block !important; }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .pricing-files-table .r12-responsive-table > :is(thead,tbody) {
    display: grid !important;
    width: 100% !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .pricing-files-table .r12-responsive-table > thead {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .pricing-files-table .r12-responsive-table .r12-table-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .pricing-files-table .r12-responsive-table .r12-table-cell { display: block !important; }
  @media (min-width:601px) {
    .r12-layout-root .r12-responsive-table > tbody { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .r12-layout-root .r12-responsive-table > thead > .r12-table-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  }
  @media (min-width:1051px) {
    body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-responsive-table { display: table; }
    .r12-layout-root .r12-responsive-table > caption { display: table-caption; }
    .r12-layout-root .r12-responsive-table > thead { display: table-header-group; }
    .r12-layout-root .r12-responsive-table > tbody { display: table-row-group; }
    .r12-layout-root .r12-responsive-table > tfoot { display: table-footer-group; }
    .r12-layout-root .r12-responsive-table .r12-table-row { display: table-row; }
    body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-responsive-table .r12-table-cell { display: table-cell; }
    body.jem33-r4.jem33-r12 #main.r12-layout-root .pricing-files-table .r12-responsive-table { display: table !important; }
    body.jem33-r4.jem33-r12 #main.r12-layout-root .pricing-files-table .r12-responsive-table > thead { display: table-header-group !important; }
    body.jem33-r4.jem33-r12 #main.r12-layout-root .pricing-files-table .r12-responsive-table > tbody { display: table-row-group !important; }
    body.jem33-r4.jem33-r12 #main.r12-layout-root .pricing-files-table .r12-responsive-table .r12-table-row { display: table-row !important; }
    body.jem33-r4.jem33-r12 #main.r12-layout-root .pricing-files-table .r12-responsive-table .r12-table-cell { display: table-cell !important; }
  }

  /* L06 — mini previews keep complete labels, with content-sized columns. */
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-preview-flow {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-preview-flow > span {
    flex: 1 1 var(--r12-preview-min-width,128px) !important;
    min-width: min-content;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
  }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-value-distinction {
    align-items: stretch !important;
    gap: 12px !important;
  }
  .r12-value-flow { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; }
  .r12-value-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .r12-value-cell strong { overflow-wrap: normal; word-break: normal; }
  .r12-value-separator { font-size: 2rem; text-align: center; }
  @media (min-width:601px) {
    .r12-value-flow { flex-direction: row; align-items: center; }
  }
  body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-outcome-flow { overflow-x: auto; }
  body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-outcome-labels {
    grid-template-columns: repeat(4,minmax(max-content,1fr));
    min-width: var(--r12-outcome-min-width,0px);
    gap: 8px;
    overflow-wrap: normal;
  }
  body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-outcome-labels > span {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-step-flow {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-step-flow > li {
    flex: 1 1 140px;
    grid-column: auto !important;
    width: auto !important;
    min-height: 80px !important;
    padding: 14px !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-step-flow > li > strong {
    overflow-wrap: normal !important;
    word-break: normal;
    hyphens: manual !important;
    font-size: 15px !important;
  }

  /* L07 — shell frame only; active state, disabled state and results visibility
   * remain native. Header, Fishbone controls and SVG internals are not selected.
   */
  body.jem33-r4.jem33-r12 #main.r12-tool-page :is(.r12-tool-title,#ordrel-r3 .r12-tool-title) {
    width: 100% !important;
    max-width: none !important;
    padding: 24px !important;
    margin: 0 0 16px !important;
    box-sizing: border-box;
  }
  body.jem33-r4.jem33-r12 #main.r12-tool-page :is(.r12-title-identity,#ordrel-r3 .r12-title-identity) {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: start !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-tool-page :is(.r12-title-copy,#ordrel-r3 .r12-title-copy) { min-width: 0 !important; width: 100%; }
  body.jem33-r4.jem33-r12 #main.r12-tool-page :is(.r12-tool-title,#ordrel-r3 .r12-tool-title) h1 {
    font-size: clamp(26px,3vw,36px) !important;
    line-height: 1.18 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal;
  }
  body.jem33-r4.jem33-r12 #main.r12-tool-page > .r12-tool-help {
    margin: 0 0 16px !important;
    padding: 0 24px 16px !important;
    border-radius: 16px !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-tool-page > .r12-tool-help:not([open]) { padding-bottom: 0 !important; }
  body.jem33-r4.jem33-r12 #main.r12-tool-page > .r12-tool-help > summary { min-height: 48px !important; padding: 12px 0 !important; }
  body.jem33-r4.jem33-r12 #main.r12-tool-page :is(.r12-tool-context,#ordrel-r3 .r12-tool-context) {
    margin: 0 0 16px !important;
    padding: 16px 24px !important;
    gap: 12px !important;
    min-width: 0;
  }
  body.jem33-r4.jem33-r12 #main.r12-tool-page .r12-tool-membership { width: 100%; min-width: 0; margin: 0; }
  body.jem33-r4.jem33-r12 #main.r12-tool-page :is(.r12-tool-frame,#ordrel-r3 .r12-preferred-shell):not(.r12-fishbone-frame) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  @media (min-width:601px) {
    body.jem33-r4.jem33-r12 #main.r12-tool-page :is(.r12-title-identity,#ordrel-r3 .r12-title-identity) { grid-template-columns: 48px minmax(0,1fr) auto !important; align-items: center !important; }
  }

  /* L08 — one equal-width horizontal rail at every size. Long translated labels
   * expand the rail's minimum cell width; the rail scrolls within its own box.
   */
  body.jem33-r4.jem33-r12 #main.r12-tool-page :is(#ordrel-r3,#why-workspace,#improvement-lab,#builder,#six-form,#fishbone-workspace,.calculator-workspace) .r12-tool-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 0 0 8px !important;
    margin: 0 0 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scroll-padding-inline: 8px;
  }
  body.jem33-r4.jem33-r12 #main.r12-tool-page :is(#ordrel-r3,#why-workspace,#improvement-lab,#builder,#six-form,#fishbone-workspace,.calculator-workspace) .r12-tool-tabs > .r12-tab-cell {
    display: flex !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0;
    padding: 0 !important;
    flex: 1 0 var(--r12-tab-min-width,132px) !important;
    list-style: none;
    box-sizing: border-box;
  }
  body.jem33-r4.jem33-r12 #main.r12-tool-page :is(#ordrel-r3,#why-workspace,#improvement-lab,#builder,#six-form,#fishbone-workspace,.calculator-workspace) .r12-tool-tabs :is(.r12-tab,.r12-tab-cell:not(:has(button))) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: 100% !important;
    padding: 12px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal;
    text-align: center !important;
    box-sizing: border-box;
  }
  .r12-tab-content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; }
  body.jem33-r4.jem33-r12 #main.r12-tool-page .r12-tool-secondary-tabs {
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-tool-page .r12-tool-secondary-tabs > button {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  /* L09 — opened preferred-tool data tables keep whole native column headings.
   * New neutral scroller/width wrappers leave the original table and its frozen
   * CHART_CSS rules intact. No important override or automatic hyphen is used.
   */
  .r12-native-data-scroll { overflow-x: auto; width: 100%; max-width: 100%; }
  .r12-native-data-width { min-width: 36rem; }

  /* L10 — nested prose does not pay for two card insets on a phone. The native
   * disclosure retains its 24px inset; only its outer grouping loses an inset.
   */
  @media (max-width:600px) {
    body#ordrel-r163.jem33-r4.jem33-r12 main#main.r12-layout-root :is(.r12-faq-region,.r12-file-region) {
      padding-inline: 0 !important;
    }
  }
  /* New flex annotations let the existing compact badge use a second line,
   * leaving the translated tool name a useful continuous measure. */
  .r12-related-identity { flex-wrap: wrap; }
  .r12-related-identity > .r12-reference-name { flex: 1 1 150px; }

  /* L11 — a miniature sequence uses its full row when all its labels cannot
   * fit. Geometry, icon dimensions and source labels are not modified. */
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-preview-steps:not(.r12-premium-rail) {
    grid-template-columns: repeat(var(--r12-preview-columns,1),minmax(0,1fr)) !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-preview-steps[data-r12-preview-stacked="true"]:not(.r12-premium-rail) > li {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-preview-steps[data-r12-preview-stacked="true"]:not(.r12-premium-rail) > li > strong { text-align: left !important; }

  /* L12 — fit only the exceptional whole word that exceeds the real heading
   * width. The measured source scale returns on resize; readable minima are
   * 24px for H1 and 20px for H2. Remaining exceptions are explicitly recorded.
   */
  body#ordrel-r163.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-prose-heading[data-r12-fitted-heading="true"] {
    font-size: var(--r12-heading-word-size) !important;
  }
  /* L13 — body metrics and value classifications have their own readable
   * measures; the seven required public grid families retain their breakpoints.
   */
  @media (max-width:1050px) {
    body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-reading-metrics { grid-template-columns: minmax(0,1fr) !important; }
    body.jem33-r4.jem33-r12 :is(main#main,main#r5-workspace).r12-layout-root .r12-layout-grid[data-r12-layout="waste-value-classes"] {
      grid-template-columns: repeat(2,minmax(0,1fr)) !important;
      gap: 12px !important;
    }
  }
  /* L14 — the native Waste caption already has an 18px inner top inset.
   * Remove its separate 18px margin on phones; retain the existing inner inset.
   */
  @media (max-width:600px) {
    body.jem33-r4.jem33-r12 #main.r12-layout-root .hero-waste-sequence > figcaption {
      margin-top: 0 !important;
    }
  }
  /* L15 — source .why-node > summary > span truncates the native label at
   * normal priority. A neutral phrasing wrapper retains that native element;
   * the original data-addressed inner span gets its own wrapping text flow.
   * No important override or native event/state change is needed.
   */
  .r12-layout-root .r12-why-summary-label { flex: 1 1 0; min-width: 0; }
  .r12-layout-root .r12-why-summary-label > [data-why-summary] {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  /* L16 — preserve separate source sentence nodes as separate visual clauses. */
  .r12-layout-root .r12-heading-clause { display: block; }
  /* L17 — a translated card title receives the two remaining native tracks.
   * The secondary illustration keeps its original size and parent on a new
   * row; the first icon and the complete title remain aligned above it.
   */
  .r12-layout-root :is(.identity-job,.ordrel-tool-card) > .identity-heading > .identity-name { grid-column: 2 / -1; }
  .r12-layout-root :is(.identity-job,.ordrel-tool-card) > .identity-heading > svg.identity-outcome { grid-column: 1 / -1; justify-self: end; }
  /* L18 — only the surrounding Fishbone count/example row may wrap. Its
   * original example button, diagram, modes and viewport controls stay intact.
   */
  @media (max-width:600px) {
    .r12-layout-root .fishbone-topline { flex-wrap: wrap; }
    .r12-layout-root .fishbone-topline > #fishbone-count { flex: 1 0 100%; min-width: 0; }
  }
  /* L19 — separate original OE link copy from the original arrow. Native span
   * rules reserve the arrow's width and enlarge it; the new label explicitly
   * inherits the link type and may take its own full row. Leaf-card insets stay.
   */
  .r12-layout-root .oe-links a { flex-wrap: wrap; }
  body.jem33-r4.jem33-r12 #main.r12-layout-root .oe-links a > .r12-oe-link-label {
    flex: 1 1 min-content !important;
    font-size: inherit !important;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }
  @media (max-width:600px) {
    body.jem33-r4.jem33-r12 #main.r12-layout-root .r12-loop-step .oe-links a {
      font-size: 16px !important;
      padding-inline: 0 !important;
    }
    .r12-layout-root .r12-solidus-prose { letter-spacing: -.02em; }
  }
  /* L20 — a definition pair uses complete rows when either native cell cannot
   * contain its longest word. Actual cell widths decide, at every breakpoint.
   */
  body.jem33-r4.jem33-r12 #main.r12-layout-root .oc-panel dl.r12-definition-stack {
    grid-template-columns: minmax(0,1fr) !important;
  }
}