/* Hallmark · genre: modern-minimal · macrostructure: Ecosystem Index · theme: XIEHENG technical · enrichment: none · nav: N1b existing · footer: Ft2 existing · H2 ratio=7/5,right=proof-column,divider=vertical-rule · F3 columns=4,rules=every-row,numbers=tabular · F4 numbering=01/02/03,layout=vertical,connector=line · C3 underline=solid,hover=colour-shift,arrow=→ · pre-emit critique: P5 H5 E4 S5 R5 V5 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34,49,50–57) */

html,
body { overflow-x: clip; }

.decorative-support {
  --dr-ink: #13231d;
  --dr-muted: #52635c;
  --dr-rule: #c8d2cc;
  --dr-paper: #f7f8f5;
  --dr-soft: #edf1ed;
  --dr-signal: #9f471f;
  --dr-focus: #075e48;
  --dr-field: #ffffff;
  --dr-error: #7a1515;
  --dr-success: #0c5c39;
  color: var(--dr-ink);
  background: var(--dr-paper);
}

.decorative-support main { min-width: 0; }
.decorative-support h1,
.decorative-support h2,
.decorative-support h3 { font-family: var(--font-display); overflow-wrap: anywhere; min-width: 0; }
.decorative-support p,
.decorative-support li,
.decorative-support td,
.decorative-support th { max-width: 72ch; }

.decorative-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); border-bottom: 1px solid var(--dr-rule); background: var(--dr-paper); color: var(--dr-ink); }
.decorative-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(17rem, 5fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.decorative-hero .support-breadcrumb { grid-column: 1 / -1; }
.decorative-hero .eyebrow,
.decorative-hero h1,
.decorative-hero .lede,
.decorative-hero .hero-actions { grid-column: 1; }
.decorative-hero::after { content: "DUTY\A FINISH\A INTERFACES\A APPROVAL"; white-space: pre; grid-column: 2; grid-row: 2 / span 4; align-self: stretch; border-inline-start: 1px solid var(--dr-rule); padding-inline-start: clamp(1.5rem, 3vw, 3rem); font: 700 clamp(.75rem, 1vw, 1rem)/2.75 var(--font-mono); letter-spacing: .16em; color: var(--dr-signal); }

.support-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-block-end: clamp(2rem, 5vw, 4rem); font-size: .82rem; color: var(--dr-muted); }
.support-breadcrumb a { color: inherit; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.support-breadcrumb a:hover { color: var(--dr-signal); }

.ecosystem-rail { border-top: 1px solid var(--dr-ink); }
.ecosystem-rail a { min-height: 72px; display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; border-bottom: 1px solid var(--dr-rule); color: var(--dr-ink); text-decoration: none; }
.ecosystem-rail small { font: 700 .75rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dr-signal); }
.ecosystem-rail span { min-width: 0; }
.ecosystem-rail b { font-size: 1.2rem; transition: transform 160ms ease, color 160ms ease; }

.approval-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dr-ink); }
.approval-steps li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); padding-block: clamp(1.25rem, 3vw, 2.25rem); border-bottom: 1px solid var(--dr-rule); }
.approval-steps b { font: 700 .75rem/1.4 var(--font-mono); color: var(--dr-signal); }
.approval-steps h3 { margin-block: 0 .4rem; font-size: clamp(1.2rem, 2vw, 1.65rem); }
.approval-steps p { margin: 0; color: var(--dr-muted); }

.decorative-support .spec-table { font-variant-numeric: tabular-nums; }
.decorative-support .spec-table > div { border-color: var(--dr-rule); }
.decorative-support .button,
.decorative-support button,
.decorative-support input,
.decorative-support textarea { min-height: 44px; }
.decorative-support input,
.decorative-support textarea { width: 100%; border: 1px solid var(--dr-rule); outline: 2px solid transparent; outline-offset: 2px; background: var(--dr-field); color: var(--dr-ink); }
.decorative-support textarea { min-height: 7rem; resize: vertical; }
.decorative-support :focus-visible { outline: 3px solid var(--dr-focus); outline-offset: 3px; }
.decorative-support [disabled],
.decorative-support [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.decorative-support [data-state="loading"] { cursor: progress; opacity: .78; }
.decorative-support [data-state="error"] { border-color: var(--dr-error); color: var(--dr-error); }
.decorative-support [data-state="success"] { border-color: var(--dr-success); color: var(--dr-success); }
.decorative-support .privacy-note { border-inline-start: 3px solid var(--dr-signal); background: var(--dr-soft); color: var(--dr-ink); padding: 1rem 1.25rem; margin-block: 1.5rem; }
.decorative-support .field-help { min-height: 1lh; }
.decorative-support .tool-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.decorative-support .tool-actions .button { white-space: nowrap; }
.decorative-support .site-header .brand,
.decorative-support .site-header a,
.decorative-support .site-header summary,
.decorative-support .footer-line a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }

@media (hover: hover) and (pointer: fine) {
  .ecosystem-rail a:hover { color: var(--dr-signal); }
  .ecosystem-rail a:hover b { transform: translateX(.25rem); }
  .decorative-support .button:hover { transform: translateY(-1px); }
  .decorative-support input:hover,
  .decorative-support textarea:hover { background: var(--dr-soft); }
}
.ecosystem-rail a:active b,
.decorative-support .button:active { transform: translateY(1px); }

@media (max-width: 59.99rem) {
  .decorative-hero .wrap { grid-template-columns: 1fr; }
  .decorative-hero .eyebrow,
  .decorative-hero h1,
  .decorative-hero .lede,
  .decorative-hero .hero-actions,
  .decorative-hero::after { grid-column: 1; }
  .decorative-hero::after { grid-row: auto; border-inline-start: 0; border-top: 1px solid var(--dr-rule); padding: 1.25rem 0 0; margin-block-start: 2rem; line-height: 2; }
}

@media (max-width: 39.99rem) {
  .ecosystem-rail a { grid-template-columns: 5rem minmax(0, 1fr) auto; min-height: 84px; }
  .approval-steps li { grid-template-columns: 3rem minmax(0, 1fr); }
  .decorative-support .tool-actions { display: grid; grid-template-columns: 1fr; }
  .decorative-support .tool-actions .button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .decorative-support *,
  .decorative-support *::before,
  .decorative-support *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}