/* ORDREL R16 — layout fixes on the R12 look. No colour, font, size or spacing-token change.
   Each block fixes one R12 release-gate defect (D1–D7) at its cause and touches only the
   elements named. Must load after r12-*.css, inside @layer r7-refinement. */
@layer r7-refinement {

/* D1 · My Work weekly-review card collapses to a 0 px column on phones (all 7 languages).
   Cause: the R6 phone reset ".order-side-card > * {grid-column:1}" loses to the desktop rule
   ".order-side-card > label {grid-column:2}", so the label opens a second column. (R11.1 HF-23) */
@media (max-width:760px) {
  body.jem33-r4 #main .mw-review-extras > .order-side-card {grid-template-columns:minmax(0,1fr)!important;}
  body.jem33-r4 #main .mw-review-extras > .order-side-card > * {grid-column:1!important;grid-row:auto!important;min-width:0!important;}
}

/* D2 · Help "Still need a hand?" box collapses at 761–1000 px (all 7 languages).
   Cause: three columns (auto, 1.3fr, .7fr) for icon, text and action while the icon is
   hidden below 1000 px. Use two columns there. (R11.1 HF-22) */
@media (min-width:761px) and (max-width:1000px) {
  body.jem33-r4[data-route="/help"] #main .hc-contact {grid-template-columns:minmax(0,1fr) minmax(200px,.5fr)!important;}
  body.jem33-r4[data-route="/help"] #main .hc-contact > * {min-width:0!important;}
}

/* D3 · Tool-card "Example" label drawn under the "Use this tool" arrow on phones (/tools and /,
   A3 and DMAIC cards, all languages). Cause: the qualitative preview keeps a desktop placement
   (grid-column 2, rows 1–3), so the action grid opens a second column and the button lands in a
   0 px first column, over the preview's caption. On phones, place the preview in the normal flow,
   like every other card. */
@media (max-width:760px) {
  body.jem33-r4 #main .ordrel-tool-card .r12-tool-actions {grid-template-columns:minmax(0,1fr)!important;}
  body.jem33-r4 #main .ordrel-tool-card .r12-tool-actions > .ox-tool-preview {grid-column:auto!important;grid-row:auto!important;}
}

/* D4 · A3 and DMAIC step tabs run under the dashboard at 1440 px (6 languages).
   Cause: r12-components.css makes the step rail one non-wrapping flex row with horizontal
   scroll; in longer languages the last steps sit past the column edge, under the dashboard.
   Let the rail wrap onto a second row inside its column, from 1024 px where the dashboard sits beside it.
   Phones and tablets keep R12's scrolling rail. Same tabs, same styling. */
@media (min-width:1024px) {
  body.jem33-r4.jem33-r12 #main.r12-tool-page #improvement-lab nav.r12-tool-tabs {flex-wrap:wrap!important;overflow:visible!important;max-width:100%!important;}
  body.jem33-r4.jem33-r12 #main.r12-tool-page #improvement-lab nav.r12-tool-tabs > * {flex:0 1 auto!important;min-width:0!important;}
}

/* D5 · Tool-card descriptions hidden under the example preview (/, /tools at 768 and 1440 px;
   DE, ES, FR, IT, PT-BR). Cause: card text shrinks in a clipped flex column while previews take
   height:100%. Text keeps its height; the preview takes the remaining height, so cards and their
   example panels still line up as in R12. (R11.1 HF-24) */
body.jem33-r4:is([data-route="/"],[data-route="/tools"]) #main .ordrel-tool-grid > article > :not(.ox-tool-preview,.r9-example-surface,.r12-tool-actions) {flex-shrink:0!important;}
body.jem33-r4:is([data-route="/"],[data-route="/tools"]) #main .ordrel-tool-grid > article > :is(.ox-tool-preview,.r9-example-surface) {height:auto!important;flex:1 0 auto!important;}

/* D6 · Learn guide card heading clipped in German ("8 Verschwendungsarten / Muda") at 390 and
   768 px. Cause: two cards side by side with no tablet breakpoint; flex heading min-width =
   icon + longest word. Stack below 900 px; on phones the heading may wrap under its icon when a word is too long. (HF-27) */
@media (max-width:900px) {
  body.jem33-r4[data-route="/learn"] #main .r5d-split.r5d-learning-paths {grid-template-columns:minmax(0,1fr)!important;}
  body.jem33-r4[data-route="/learn"] #main .sseo-learn-card > div {min-width:0!important;}
}
@media (max-width:600px) {
  body.jem33-r4[data-route="/learn"] #main .sseo-learn-card h2 {flex-wrap:wrap!important;min-width:0!important;}
}
/* Below 360 px the longest German word ("Verschwendungsarten") is wider than the card at the
   heading size; only there, the guide-card heading steps down to 22 px (as R11.1 did). */
@media (max-width:359px) {
  body.jem33-r4[data-route="/learn"] #main .sseo-learn-card h2 {font-size:22px!important;}
}

/* D7 · Home case-demo bar label drawn over by its bar in Spanish and Italian on phones
   ("Microparadas"). Cause: fixed 75 px label column. Minimum = longest word. (HF-29) */
@media (max-width:650px) {
  body.jem33-r4[data-route="/"] #main .oc-bars > div {grid-template-columns:minmax(min-content,.8fr) minmax(0,1fr) 52px!important;}
}


/* D8–D11 · Small phones (320 px) in German, found by the R16 gate at the new 320 px width.
   Each block applies below 360 px only; nothing changes at 390 px and up. */
@media (max-width:359px) {
  /* D8 · Home case demo: "Vorbereitungsreihenfolge?" is wider than the cause-flow column. */
  body.jem33-r4[data-route="/"] #main .oc-cause-flow strong {font-size:14px!important;}
  /* D9 · Pricing plan limits: the value column ("100") collapses to 0 px beside its label. */
  body.jem33-r4[data-route="/pricing"] #main .plan-limits > div {grid-template-columns:auto minmax(0,1fr)!important;}
  /* D10 · Value tool step footer: "Back" and "Weiter: Kostenannahmen →" share one row, so the long
     German word is wider than its half. Below 360 px, the two step buttons stack. */
  body.jem33-r4.jem33-r12 #main .flow-step-footer {flex-wrap:wrap!important;}
  body.jem33-r4.jem33-r12 #main .flow-step-footer > * {flex:1 1 100%!important;}
  /* D11 · Waste Walk guide: "Eine Verschwendungsbeobachtung starten" — the single long German word
     is wider than the button. Below 360 px only, the button text steps down to 15 px. */
  body.jem33-r4.jem33-r12 #main .wseo-actions > a.button.r12-primary-action {font-size:15px!important;padding-inline:10px!important;}
}

/* D12 · Home and Tools "What do you want to improve?" choice cards at 361–480 px (all languages; worst in
   German, English and French). Cause: two 129 px columns are narrower than one long word plus the arrow
   ("Produktionsziel", "Qualitätsproblem"), so the text runs over the next card's arrow. Below 480 px the
   cards stack in one column, which is R12's own layout at 320 px. The "9 more" badge no longer splits. */
@media (max-width:480px) {
  body.jem33-r4 #main .ox-finder .ox-finder-choices {grid-template-columns:minmax(0,1fr)!important;}
  body.jem33-r4 #main .ox-finder .ox-finder-choices > a {grid-column:1!important;min-width:0!important;}
}
body.jem33-r4 #main .ox-finder summary > span {white-space:nowrap!important;}   /* stays inline, so R12 keeps its own navy badge */

/* D13 · OEE, Pareto and Cycle/Takt project bar at 320 px in German: "Exportieren" is wider than its half of
   the button row, so the text runs past the button's border. Below 360 px only, each button keeps its
   label's width and the second button moves to its own line when both do not fit. */
@media (max-width:359px) {
  body.jem33-r4 #main .or-project .or-actions > .or-button {flex:1 1 auto!important;min-width:max-content!important;}
}

/* D14 · Waste page step chips at 1024 px and up: "Countermeasure" / "Gegenmaßnahme" are wider than the
   chip's text area, so the word runs past the chip's edge. From 1024 px the chip's side padding is 6 px
   instead of 14 px (same chip, same text size). */
@media (min-width:1024px) {
  body.jem33-r4.jem33-r12[data-route="/waste"] main#main .wseo-flow > li[data-r12-surface] {padding-inline:6px!important;}
}
/* D15 · Long words break at their soft hyphens (R16.2 adds ­ to a few long German, Spanish, Italian and
   Portuguese words in the page text). The native waste list sets hyphens:none, which would ignore them. */
body.jem33-r4[data-route="/waste"] #main li.r12-layout-item strong {hyphens:manual!important;}

} /* end @layer r7-refinement */