/* ══════════════════════════════════════════════════
   order-correction.css
   Recycler manual — 08 · Order Correction chapter
   Implements Figma section 128:272 (OC-01 … OC-08)
   Requires design-tokens.css + recycler-manual.css; adds OC-only pieces
   (status diagram, decision tree, compare table, checklists, placeholders).
   ══════════════════════════════════════════════════ */

.oc-page {
  /* Status palette — Figma OC-02 / OC-06 diagrams */
  --oc-awaiting: #3730a3;
  --oc-awaiting-bg: #eef2ff;
  --oc-applied: #166534;
  --oc-rejected: #b91c1c;
  --oc-rejected-bg: #fef2f2;
  --oc-rejected-line: #ef4444;
  --oc-discarded: #475569;
  --oc-discarded-bg: #f1f5f9;
  --oc-late: #92400e;
  --oc-late-bg: #fff7ed;
  --oc-late-line: #f59e0b;
  --oc-data: #5b21b6;
  --oc-data-bg: #f5f3ff;
  --oc-data-line: #8b5cf6;
  --oc-caution: #c2410c;
  --oc-caution-line: #f97316;
}

/* ── Sidebar sub-entries for the multi-page chapter ── */
.sidebar-links a.sidebar-sublink {
  padding: 7px 12px 7px 26px;
  font-size: 13px;
  font-weight: 500;
}

.oc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════
   Media placeholder — screenshot / video not supplied yet
   ══════════════════════════════════════════════════ */
.oc-placeholder {
  aspect-ratio: 16 / 9;
  border-width: 2px;
}

.oc-placeholder--video {
  flex: 1;
  border: 0;
}

/* Bulleted card body (Figma OC-07 "Who gets notified") — matches .feature-card p */
.oc-bullets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: clamp(14px, 0.9vw, 17px);
  line-height: 1.53;
}

/* Screenshot with numbered markers (Figma OC-03 status page).
   Markers sit in blank space beside each target so they never cover UI text. */
.oc-shot {
  position: relative;
  width: 100%;
}

.oc-marker {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(20px, 2.1vw, 30px);
  height: clamp(20px, 2.1vw, 30px);
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 2px 6px rgba(18, 38, 48, 0.25);
  color: #fff;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
}

/* Marker positions (% of the screenshot) live here, not in inline style
   attributes: the site CSP (style-src 'self') blocks inline styles. */
.oc-marker--status-1 { left: 52%; top: 38.5%; }
.oc-marker--status-2 { left: 83.7%; top: 34%; }
.oc-marker--status-3 { left: 85%; top: 43.2%; }

.media-frame .oc-placeholder__icon {
  width: 56px;
  height: auto;
  border-radius: 0;
  background: none;
}

/* ══════════════════════════════════════════════════
   Checklist chips (Figma 193:386 / 203:272)
   ══════════════════════════════════════════════════ */
.oc-chips-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.oc-chips-card__title {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

.oc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oc-chips li {
  padding: 6px 10px;
  border: 1px solid var(--teal);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--teal);
  font-size: 12px;
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════
   Panel — shared shell for diagrams and checklists
   ══════════════════════════════════════════════════ */
.oc-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 1.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  container-type: inline-size;
}

.oc-panel--dashed {
  border: 2px dashed var(--line);
  background: var(--media);
}

.oc-panel__title {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.oc-panel__title--danger {
  color: #991b1b;
}

.oc-panel__subtitle {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.oc-panel__subtitle--warn {
  color: #9a3412;
}

/* Beginner explanation under a subtitle (e.g. what a correction type is) */
.oc-panel__hint {
  max-width: 80ch;
  margin: -6px 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* ── Definition list (status meanings / roles) — Figma 182:272 ── */
.oc-deflist {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-heading);
  background: var(--card);
}

.oc-deflist__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
}

.oc-deflist__row + .oc-deflist__row {
  border-top: 1px solid var(--line);
}

.oc-deflist dt {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.oc-deflist dd {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Roles that cannot use Order Correction */
.oc-deflist__row--denied {
  background: var(--oc-rejected-bg);
}

.oc-deflist__row--denied dt {
  color: var(--oc-rejected);
}

/* ══════════════════════════════════════════════════
   OC-02 · Status flow diagram (Figma 152:272)
   ══════════════════════════════════════════════════ */
.oc-flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@container (min-width: 900px) {
  .oc-flow-layout {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    align-items: start;
  }
}

.oc-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.oc-flow__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto 150px auto;
  padding-top: 28px;
}

.oc-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
}

.oc-state strong {
  font-size: 14px;
  line-height: 1.3;
}

.oc-state span {
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

.oc-state--awaiting { background: var(--oc-awaiting); }
.oc-state--applied { background: var(--oc-applied); }
.oc-state--rejected { background: var(--oc-rejected); }
.oc-state--discarded { background: var(--oc-discarded); }

.oc-tone--awaiting { color: var(--oc-awaiting); }
.oc-tone--applied { color: var(--oc-applied); }
.oc-tone--rejected { color: var(--oc-rejected); }
.oc-tone--discarded { color: var(--oc-discarded); }

.oc-edge {
  position: relative;
  min-width: 0;
}

.oc-edge__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.oc-edge__line {
  position: absolute;
  background: currentColor;
}

.oc-edge__line::after {
  content: "";
  position: absolute;
  border: 6px solid transparent;
}

/* Horizontal → : line at the state's vertical centre, label above it */
.oc-edge--right {
  align-self: center;
  height: 3px;
  margin: 0 2px;
}

.oc-edge--right .oc-edge__line {
  inset: 0 9px 0 0;
}

.oc-edge--right .oc-edge__line::after {
  top: 50%;
  right: -9px;
  border-width: 6px 0 6px 9px;
  border-left-color: currentColor;
  transform: translateY(-50%);
}

.oc-edge--right .oc-edge__label {
  position: absolute;
  right: 4px;
  bottom: 12px;
  left: 4px;
  text-align: center;
}

/* Vertical ↓ / ↑ between Awaiting approval and Rejected (Figma 152:292–297):
   both arrows sit under the state boxes in column 1; "Reject" reads to the
   left of the red arrow, "Edit + resubmit" to the right of the blue arrow
   (spilling into the empty column 2). */
.oc-flow__verticals {
  position: relative;
  grid-column: 1;
}

.oc-edge--down,
.oc-edge--up {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
}

.oc-edge--down { left: 42%; }
.oc-edge--up { left: 58%; }

.oc-edge--down .oc-edge__line,
.oc-edge--up .oc-edge__line {
  left: 0;
  width: 3px;
}

.oc-edge--down .oc-edge__label,
.oc-edge--up .oc-edge__label {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  transform: translateY(-50%);
}

.oc-edge--down .oc-edge__label {
  right: 10px;
  text-align: right;
}

.oc-edge--up .oc-edge__label {
  left: 12px;
}

.oc-edge--down .oc-edge__line {
  top: 0;
  bottom: 9px;
}

.oc-edge--down .oc-edge__line::after {
  bottom: -9px;
  left: 50%;
  border-width: 9px 6px 0;
  border-top-color: currentColor;
  transform: translateX(-50%);
}

.oc-edge--up .oc-edge__line {
  top: 9px;
  bottom: 0;
}

.oc-edge--up .oc-edge__line::after {
  top: -9px;
  left: 50%;
  border-width: 0 6px 9px;
  border-bottom-color: currentColor;
  transform: translateX(-50%);
}

.oc-flow__verticals + .oc-state {
  grid-column: 1;
}

/* ── Correction type rows (Figma 152:299 / 152:303) ── */
.oc-type {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 24px;
  padding: 12px;
  border: 1.5px solid;
  border-radius: var(--r-heading);
}

.oc-type strong {
  grid-column: 1 / -1;
  font-size: 12px;
}

.oc-type p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.oc-type .oc-type__allowed {
  color: inherit;
}

.oc-type .oc-type__denied {
  color: var(--oc-rejected);
}

.oc-type--late {
  border-color: var(--oc-late-line);
  background: var(--oc-late-bg);
  color: var(--oc-late);
}

.oc-type--data {
  border-color: var(--oc-data-line);
  background: var(--oc-data-bg);
  color: var(--oc-data);
}

/* ══════════════════════════════════════════════════
   OC-06 · Decision tree (Figma 201:272)
   ══════════════════════════════════════════════════ */
.oc-tree {
  --oc-tree-gap: 28px;
  align-items: center;
  gap: 0;
}

.oc-tree__root {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: var(--oc-tree-gap);
}

.oc-tree__root::after,
.oc-tree__branch::before,
.oc-tree__branch > .oc-node + .oc-node::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 4px;
  height: var(--oc-tree-gap);
  margin-left: -2px;
  border-radius: 2px;
  background: var(--line);
}

.oc-tree__root::after {
  bottom: 0;
}

.oc-tree__branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  padding-top: var(--oc-tree-gap);
}

.oc-tree__branches::before {
  content: "";
  position: absolute;
  top: 0;
  right: 25%;
  left: 25%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--line);
}

.oc-tree__branch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--oc-tree-gap);
  padding: 0 8px;
}

.oc-tree__branch::before {
  top: calc(var(--oc-tree-gap) * -1);
}

.oc-tree__branch > .oc-node + .oc-node::before {
  top: calc(var(--oc-tree-gap) * -1 - 1.5px);
}

.oc-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(100%, 240px);
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-note);
  background: var(--card);
}

.oc-node strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
}

.oc-node p,
.oc-tree__footnote {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.oc-node--question {
  background: var(--card);
}

.oc-node--rejected {
  border-color: var(--oc-rejected);
  background: var(--oc-rejected-bg);
}

.oc-node--rejected strong { color: var(--oc-rejected); }

.oc-node--resubmit {
  width: min(100%, 360px);
  border-color: var(--oc-awaiting);
  background: var(--oc-awaiting-bg);
}

.oc-node--resubmit strong { color: var(--oc-awaiting); }

.oc-node--discard {
  border-color: var(--oc-discarded);
  background: var(--oc-discarded-bg);
}

.oc-node--discard strong { color: var(--oc-discarded); }

.oc-tree__footnote {
  margin-top: 24px;
  text-align: center;
}

/* ══════════════════════════════════════════════════
   OC-07B · Reprint compare table (Figma 202:272)
   ══════════════════════════════════════════════════ */
.oc-compare {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  border-spacing: 0;
  background: var(--panel);
  font-size: 15px;
  table-layout: fixed;
}

.oc-compare th,
.oc-compare td {
  padding: 14px clamp(16px, 1.7vw, 32px);
  text-align: left;
  vertical-align: top;
}

.oc-compare thead th {
  background: var(--canvas);
  font-weight: 700;
}

.oc-compare tbody td {
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.oc-compare tbody td + td {
  color: var(--muted);
}

.oc-compare .oc-compare__yes { color: var(--oc-applied); }
.oc-compare .oc-compare__no { color: var(--oc-rejected); }

/* ══════════════════════════════════════════════════
   OC-08 · "Not provided" checklist (Figma 153:319)
   ══════════════════════════════════════════════════ */
.oc-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.oc-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1.5px solid;
  border-radius: 10px;
}

.oc-check__icon {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
}

.oc-check__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}

.oc-check__text strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.oc-check__text p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.oc-check--missing {
  border-color: var(--oc-rejected-line);
  background: var(--oc-rejected-bg);
}

.oc-check--missing .oc-check__icon {
  background: #fee2e2;
  color: var(--oc-rejected);
}

.oc-check--caution {
  border-color: var(--oc-caution-line);
  background: var(--oc-late-bg);
}

.oc-check--caution .oc-check__icon,
.oc-check--notice .oc-check__icon {
  background: #ffedd5;
  color: var(--oc-caution);
}

.oc-check--notice {
  border-width: 1px;
  border-color: var(--warn-line);
  background: var(--warn-bg);
}

.oc-check--notice .oc-check__text strong {
  color: var(--warn-ink);
}

/* ══════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Long OC tags and footer label must wrap instead of clipping */
  .oc-page .doc-tag {
    max-width: 100%;
    white-space: normal;
  }

  .oc-page .doc-footer {
    align-items: flex-start;
  }

  .oc-page .doc-footer span:first-child {
    min-width: 0;
    white-space: normal;
  }

  .oc-flow__grid {
    grid-template-columns: minmax(0, 1fr) minmax(56px, 0.8fr) minmax(0, 1fr);
  }

  .oc-state {
    padding: 8px 10px;
  }

  .oc-state strong {
    font-size: 12px;
  }

  .oc-edge__label {
    font-size: 10px;
  }

  /* Narrow column 1: shift arrows right so "Reject" fits to their left */
  .oc-edge--down { left: 62%; }
  .oc-edge--up { left: 78%; }

  .oc-type {
    grid-template-columns: minmax(0, 1fr);
  }

  .oc-tree {
    --oc-tree-gap: 20px;
  }

  .oc-node {
    padding: 12px;
  }

  .oc-node strong {
    font-size: 14px;
  }
}