/* Static HTML architecture: shared desktop rows, stacked environments on narrow screens. */
.sophy-page {
  --sophy-blue: #205ba7; --sophy-blue-bg: #eef5ff; --sophy-blue-line: #b4c9e7;
  --sophy-amber: #87501a; --sophy-amber-bg: #fff6e9; --sophy-amber-line: #dec29b;
  --sophy-ink: #1d2c43; --sophy-muted: #4e6077; --sophy-card: #fff;
}
[data-md-color-scheme="slate"] .sophy-page {
  --sophy-blue: #a6ccff; --sophy-blue-bg: #1b2a40; --sophy-blue-line: #435b7c;
  --sophy-amber: #efc28b; --sophy-amber-bg: #30281f; --sophy-amber-line: #7a6143;
  --sophy-ink: #e6edf7; --sophy-muted: #bbc7d9; --sophy-card: #171e2b;
}
.md-typeset .sophy-eyebrow {
  display: block; font-size: .65rem; font-weight: 750; letter-spacing: .11em;
  text-transform: uppercase; color: var(--sophy-blue); margin: .3rem 0 .6rem;
}
.md-typeset .sophy-page h1 { margin-bottom: 1.1rem; color: var(--sophy-ink); }
.sophy-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 2rem;
  align-items: center; padding: 1.5rem; border: 1px solid var(--factory-border);
  border-radius: .8rem; background: linear-gradient(120deg, var(--sophy-blue-bg), var(--factory-surface));
}
.md-typeset .sophy-headline {
  margin-top: 0; font-size: clamp(1.25rem, 2.3vw, 1.7rem); line-height: 1.3;
  font-weight: 700; letter-spacing: -.025em; color: var(--sophy-ink);
}
.sophy-status { font-weight: 650; color: var(--sophy-blue); }
.sophy-hero .md-button { font-size: .72rem; padding: .5rem .7rem; margin: .3rem .2rem .1rem 0; }
.sophy-portrait { text-align: center; color: var(--sophy-muted); }
.sophy-portrait img { display: block; width: 12rem; margin: auto; }
.sophy-portrait span, .sophy-portrait strong { display: block; font-size: .65rem; line-height: 1.8; }
.sophy-portrait strong { color: var(--sophy-blue); }
.md-typeset figure.sophy-map {
  display: block; width: 100%; margin: 1.5rem 0; padding: 1.1rem; text-align: left;
  border: 1px solid var(--factory-border); border-radius: .8rem; background: var(--factory-surface);
}
.sophy-map-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.md-typeset .sophy-map-heading h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--sophy-ink); }
.sophy-legend { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .65rem; font-weight: 700; }
.sophy-legend span { padding: .3rem .5rem; border-radius: 2rem; white-space: nowrap; }
.sophy-sense-key { background: var(--sophy-blue-bg); color: var(--sophy-blue); border: 1px solid var(--sophy-blue-line); }
.sophy-act-key { background: var(--sophy-amber-bg); color: var(--sophy-amber); border: 1px solid var(--sophy-amber-line); }
.sophy-system { display: grid; grid-template-columns: .8fr 1.15fr 4rem 1.15fr; grid-template-rows: auto auto auto; gap: .75rem; }
.sophy-environment { display: grid; grid-template-rows: subgrid; grid-row: 1 / 4; min-width: 0; }
.sophy-environment header { padding: .8rem .2rem .4rem; border-top: 3px solid var(--sophy-blue); }
.sophy-body header { border-color: var(--sophy-amber); }
.sophy-environment-number { display: block; font-size: .6rem; font-weight: 750; letter-spacing: .08em; color: var(--sophy-muted); }
.md-typeset .sophy-environment h4 { font-size: .94rem; line-height: 1.4; margin: .4rem 0 .2rem; color: var(--sophy-ink); }
.md-typeset .sophy-environment header p { font-size: .65rem; line-height: 1.5; margin: 0; color: var(--sophy-muted); }
.sophy-lane { min-width: 0; padding: .65rem; border: 1px solid var(--factory-border); border-radius: .5rem; }
.sophy-perception { --lane-ink: var(--sophy-blue); background: var(--sophy-blue-bg); border-color: var(--sophy-blue-line); }
.sophy-action { --lane-ink: var(--sophy-amber); background: var(--sophy-amber-bg); border-color: var(--sophy-amber-line); }
.sophy-brain .sophy-lane, .sophy-body .sophy-lane { display: grid; grid-template-rows: 2.2rem 1fr 1.2rem 1fr 1.2rem 1fr; }
.sophy-lane-label { display: block; font-size: .6rem; font-weight: 650; color: var(--lane-ink, var(--sophy-muted)); line-height: 1.5; margin-bottom: .6rem; }
.sophy-node {
  display: flex; align-items: flex-start; gap: .5rem; padding: .65rem .55rem;
  min-width: 0; min-height: 5rem; background: var(--sophy-card); border: 1px solid var(--factory-border); border-radius: .4rem;
}
.sophy-node > div { min-width: 0; }
.sophy-node strong { display: block; font-size: .72rem; font-weight: 700; line-height: 1.4; color: var(--sophy-ink); }
.sophy-node div > span { display: block; margin-top: .3rem; font-size: .65rem; line-height: 1.6; color: var(--sophy-muted); }
.sophy-step { display: flex; justify-content: center; align-items: center; font-size: 0; color: var(--lane-ink, var(--sophy-blue)); }
.sophy-step::before { content: ""; display: block; width: .95rem; height: .95rem; background: currentColor; mask: url("../icons/sophy/arrow.svg") center / contain no-repeat; }
.sophy-brain .sophy-perception .sophy-step::before,
.sophy-body .sophy-action .sophy-step::before { transform: rotate(180deg); }
.sophy-operator .sophy-node { margin: .2rem 0; }
.sophy-operator-route, .sophy-boundary-note { font-size: .65rem; color: var(--sophy-muted); line-height: 1.7; }
.sophy-operator-route { color: var(--sophy-blue); font-weight: 650; }
.sophy-operator-action { background: var(--sophy-amber-bg); border-style: dashed; border-color: var(--sophy-amber-line); }
.sophy-operator-action .sophy-operator-route { color: var(--sophy-amber); }
.sophy-approval { border-color: var(--sophy-amber-line); }
.sophy-tunnel { display: grid; grid-template-rows: subgrid; grid-row: 1 / 4; min-width: 0; text-align: center; }
.sophy-tunnel header { display: flex; flex-direction: column; align-items: center; justify-content: end; font-size: .65rem; padding-bottom: .5rem; color: var(--sophy-muted); }
.sophy-tunnel .sophy-icon { margin-bottom: .25rem; }
.sophy-crossing { display: flex; justify-content: end; flex-direction: column; padding-bottom: 2.5rem; background: none; }
.sophy-crossing > span { font-size: .6rem; color: var(--lane-ink); font-weight: 650; line-height: 1.5; }
.sophy-crossing svg { display: block; width: 100%; height: 1.2rem; fill: none; stroke: var(--lane-ink); stroke-width: 2; }
.sophy-crossing .sophy-mobile-direction { display: none; }
.sophy-feedback { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--sophy-blue-line); border-radius: .5rem; padding: .7rem; margin: .9rem 0; background: var(--sophy-blue-bg); }
.sophy-feedback > span { flex: 0 0 1.7rem; width: 1.7rem; height: 1.7rem; font-size: 0; background: var(--sophy-blue); mask: url("../icons/factory-map/feedback.svg") center / contain no-repeat; }
.sophy-feedback strong, .sophy-feedback div > span { display: block; font-size: .65rem; line-height: 1.6; color: var(--sophy-muted); }
.sophy-feedback strong { font-size: .72rem; color: var(--sophy-blue); margin-bottom: .2rem; }
.sophy-map-rule { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .65rem; color: var(--sophy-muted); }
.sophy-map-rule strong { color: var(--sophy-ink); }
.md-typeset .sophy-map figcaption { max-width: none; margin-top: .9rem; font-size: .65rem; font-style: normal; line-height: 1.7; color: var(--sophy-muted); text-align: left; }
.sophy-icon { display: block; flex: 0 0 1.2rem; width: 1.2rem; height: 1.2rem; color: var(--lane-ink, var(--sophy-blue)); background: currentColor; mask: var(--sophy-icon) center / contain no-repeat; }
.sophy-icon-terminal { --sophy-icon: url("../icons/sophy/terminal.svg"); }
.sophy-icon-person { --sophy-icon: url("../icons/factory-map/person.svg"); }
.sophy-icon-shield { --sophy-icon: url("../icons/sophy/shield.svg"); }
.sophy-icon-model { --sophy-icon: url("../icons/factory-map/models.svg"); }
.sophy-icon-agent { --sophy-icon: url("../icons/factory-map/workflow.svg"); }
.sophy-icon-tools { --sophy-icon: url("../icons/sophy/tools.svg"); }
.sophy-icon-lock { --sophy-icon: url("../icons/sophy/lock.svg"); }
.sophy-icon-sensors { --sophy-icon: url("../icons/sophy/sensors.svg"); }
.sophy-icon-gait { --sophy-icon: url("../icons/sophy/gait.svg"); }
.sophy-icon-robot { --sophy-icon: url("../icons/sophy/robot.svg"); }
.sophy-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sophy-capability { padding: 1rem; border: 1px solid var(--factory-border); border-radius: .5rem; background: var(--factory-surface); }
.md-typeset .sophy-capability h3 { margin: 0 0 .6rem; font-size: .9rem; font-weight: 700; }
.md-typeset .sophy-capability p { margin: 0; font-size: .75rem; line-height: 1.8; }
.sophy-planned { border-style: dashed; }
@media (max-width: 1100px) {
  .sophy-system { grid-template-columns: 1fr; grid-template-rows: none; gap: 1rem; }
  .sophy-environment, .sophy-tunnel { grid-row: auto; grid-template-rows: none; gap: .75rem; }
  .sophy-environment { padding: .75rem; border: 1px solid var(--factory-border); border-radius: .6rem; }
  .sophy-environment header { padding-top: .6rem; }
  .sophy-brain .sophy-lane, .sophy-body .sophy-lane { grid-template-rows: auto auto 1.2rem auto 1.2rem auto; }
  .sophy-node { min-height: 0; padding: .75rem; }
  .sophy-node strong { font-size: .8rem; }
  .sophy-node div > span { font-size: .7rem; }
  .sophy-lane-label, .sophy-environment-number { font-size: .65rem; }
  .sophy-tunnel { grid-template-columns: 1fr 1fr; padding: .8rem; border: 1px dashed var(--factory-border); border-radius: .5rem; }
  .sophy-tunnel header { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: .35rem; padding: 0; }
  .sophy-crossing { padding: 0; }
  .sophy-crossing svg { display: none; }
  .sophy-crossing .sophy-mobile-direction { display: block; font-size: .7rem; margin-top: .3rem; }
  .sophy-crossing > span { font-size: .65rem; }
}
@media (max-width: 800px) {
  .sophy-hero { grid-template-columns: 1fr; gap: .7rem; padding: 1rem; }
  .sophy-portrait img { width: 9rem; }
  .sophy-map-heading { align-items: start; flex-direction: column; }
  .sophy-capabilities { grid-template-columns: 1fr; }
  .md-typeset figure.sophy-map { padding: .7rem; }
  .sophy-map-rule { align-items: start; }
}