/* Visual V2 composition layer: the conversion result is taught with real chart-row contours. */

.shell {
  width: min(1180px, calc(100% - 48px));
}

.hero {
  padding-top: 20px;
}

.lead {
  max-width: 860px;
}

.workbench {
  grid-template-columns: minmax(340px, 4.1fr) minmax(0, 7.9fr);
  gap: 24px;
  margin-top: 20px;
}

.desk {
  gap: 13px;
}

.source-mode {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.source-mode__head {
  min-height: 36px;
}

.brand-control,
#brand-chips {
  min-width: 0;
}

#brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 114px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1px 2px 4px;
  scrollbar-width: thin;
}

.chip--brand {
  min-height: 50px;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: start;
  gap: 2px;
  padding: 5px 13px;
  line-height: 1.05;
}

.chip__name {
  display: block;
  color: inherit;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.chip__rule {
  display: block;
  color: var(--muted);
  font: 700 10.5px/1.05 var(--font-mono);
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.chip--brand[aria-pressed="true"] .chip__rule {
  color: var(--paper-deep);
}

.ledger {
  position: relative;
  min-height: 0;
  padding: 18px;
  container-type: inline-size;
}

.ledger__hero {
  display: grid;
  grid-template-columns: minmax(185px, 0.74fr) minmax(370px, 1.55fr);
  gap: 16px;
  align-items: stretch;
}

.result-summary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2px 0 0;
}

.result-summary__meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.result-summary__meta .badge {
  flex: 0 1 auto;
  margin-bottom: 0;
}

.result-context {
  flex: 0 1 auto;
  margin: 0;
  color: var(--ink-soft);
  font: 750 11px/1.2 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.legend__mobile {
  display: none;
}

.foot-panel {
  margin-top: 16px;
}

.answer-block {
  width: 100%;
  min-height: 0;
}

.answer {
  min-height: 70px;
}

.answer__value {
  font-size: clamp(48px, 6.4vw, 70px);
}

.action-line {
  min-height: 0;
  margin: 5px 0 0;
  font-size: 16px;
}

.fit-map {
  min-width: 0;
  margin: 0;
  padding: 10px 10px 8px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--visual-well);
}

.fit-map__head {
  min-height: 38px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 4px;
}

.fit-map__head > div {
  display: grid;
  gap: 1px;
}

.fit-map__kicker {
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-transform: uppercase;
}

.fit-map__head strong {
  color: var(--ink);
  font: 400 20px/1.15 var(--font-serif);
  font-variant-numeric: tabular-nums;
}

.fit-map__profile {
  max-width: 48%;
  padding-top: 2px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
}

.fit-map__svg {
  width: 100%;
  height: auto;
  max-height: 270px;
  display: block;
  overflow: visible;
}

.fit-map figcaption {
  margin: 2px 2px 0;
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1.35;
}

.fit-map__well-shape {
  stroke: none;
}

.fit-map__lane--source .fit-map__well-shape {
  fill: var(--source-soft);
}

.fit-map__lane--target .fit-map__well-shape {
  fill: var(--target-soft);
}

.fit-map__contour {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.35;
  stroke-opacity: 0.74;
  vector-effect: non-scaling-stroke;
  transition: transform 160ms ease-out, stroke-width 160ms ease-out, fill-opacity 160ms ease-out;
}

.fit-map__lane--source .fit-map__contour--active {
  fill: var(--source-soft);
  fill-opacity: 0.84;
  stroke: var(--source-signal);
  stroke-width: 2.7;
  stroke-opacity: 1;
}

.fit-map__lane--target .fit-map__contour--active {
  fill: var(--target-soft);
  fill-opacity: 0.88;
  stroke: var(--target-signal);
  stroke-width: 3.15;
  stroke-opacity: 1;
}

.fit-map__contour--empty {
  fill: transparent;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-dasharray: 8 7;
}

.fit-map__lane-kicker,
.fit-map__lane-title,
.fit-map__layer-label,
.fit-map__active-value,
.fit-map__active-unit,
.fit-map__connector-primary,
.fit-map__connector-secondary,
.fit-map__empty-label,
.fit-map__measure-label {
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.fit-map__lane-kicker {
  fill: var(--ink-soft);
  font: 750 13px/1 var(--font-sans);
  letter-spacing: 0.09em;
}

.fit-map__lane-title {
  fill: var(--ink);
  font: 700 16px/1 var(--font-sans);
}

.fit-map__layer-label {
  fill: var(--ink-soft);
  font: 750 14px/1 var(--font-mono);
}

.fit-map__lane--source .fit-map__layer-label--active {
  fill: var(--source-signal);
  font-size: 15px;
}

.fit-map__lane--target .fit-map__layer-label--active {
  fill: var(--target-signal);
  font-size: 15px;
}

.fit-map__active-value {
  fill: var(--ink);
  font: 400 38px/1 var(--font-serif);
}

.fit-map__active-unit {
  fill: var(--ink-soft);
  font: 750 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fit-map__connector-line {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.fit-map__connector-start {
  fill: var(--source-signal);
}

.fit-map__connector-arrow {
  fill: var(--target-signal);
}

.fit-map__connector-card {
  fill: var(--paper);
  stroke: var(--line-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fit-map__connector-primary {
  fill: var(--ink);
  font: 500 22px/1 var(--font-serif);
}

.fit-map__connector-secondary {
  fill: var(--ink-soft);
  font: 700 11.5px/1 var(--font-sans);
}

.fit-map__measure-line,
.fit-map__empty-slash {
  stroke: var(--source-signal);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}

.fit-map__measure-point {
  fill: var(--paper);
  stroke: var(--source-signal);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.fit-map__measure-label {
  fill: var(--source-signal);
  font: 750 11px/1 var(--font-mono);
  writing-mode: vertical-rl;
}

.fit-map__empty-slash {
  stroke: var(--target-signal);
  stroke-dasharray: none;
}

.fit-map__empty-label {
  fill: var(--muted);
  font: 700 13px/1 var(--font-sans);
}

.source-line {
  margin: 12px 0 10px;
}

.cross-system {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 0;
}

.cross-system p {
  min-width: 0;
  padding: 5px 7px;
  border-left: 3px solid var(--line-strong);
  background: transparent;
}

#cross-men {
  border-left-color: var(--source-signal);
}

#cross-women {
  border-left-color: var(--target-signal);
}

body[data-direction="w2m"] #cross-men {
  border-left-color: var(--target-signal);
}

body[data-direction="w2m"] #cross-women {
  border-left-color: var(--source-signal);
}

.rail-block {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.rail-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.rail-block__head strong {
  color: var(--ink);
  font: 700 12px/1.2 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.rail-block .ladder {
  margin: 2px 0 0;
  max-height: 100px;
}

body[data-direction="m2w"] .ladder__marker--men circle,
body[data-direction="w2m"] .ladder__marker--women circle {
  fill: var(--source-signal);
  stroke: var(--paper);
}

body[data-direction="m2w"] .ladder__marker--women circle,
body[data-direction="w2m"] .ladder__marker--men circle {
  fill: var(--target-signal);
  stroke: var(--paper);
}

.ladder__connector,
.ladder__range {
  stroke: var(--target-signal);
}

.width-result {
  margin: 5px 0 8px;
  padding: 6px 8px;
  border-left: 3px solid var(--source-signal);
  background: transparent;
  line-height: 1.4;
}

.result-actions {
  gap: 7px;
}

.result-actions button {
  min-height: 42px;
}

.rule-spectrum {
  padding-top: 34px;
}

.rule-spectrum__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.rule-card {
  min-width: 0;
  min-height: 116px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 12px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-soft);
  text-align: left;
}

.rule-card:hover {
  border-color: var(--ink);
  background: var(--visual-well);
}

.rule-card[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.rule-card__rule {
  color: var(--accent-ink);
  font: 400 26px/1 var(--font-serif);
  font-variant-numeric: tabular-nums;
}

.rule-card__rule small {
  font: 700 9px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rule-card strong {
  color: inherit;
  font-size: 12.5px;
  line-height: 1.2;
}

.rule-card > span:last-child {
  color: var(--muted);
  font: 700 10.5px/1.3 var(--font-mono);
}

.rule-card[aria-pressed="true"] .rule-card__rule,
.rule-card[aria-pressed="true"] > span:last-child {
  color: var(--paper-deep);
}

.rule-spectrum__note {
  max-width: 920px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.source-table {
  margin-top: 14px;
}

.source-table .disclosure__body {
  padding-top: 12px;
}

.measure-visual {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--visual-well);
}

.measure-visual__svg {
  width: 100%;
  height: auto;
  max-height: 196px;
  display: block;
}

.measure-visual__paper {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 1;
}

.measure-visual__foot {
  fill: var(--source-soft);
  stroke: var(--source-signal);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.measure-visual__line,
.measure-visual__heel-rule,
.measure-visual__toe-rule {
  fill: none;
  stroke: var(--target-signal);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.measure-visual__line {
  stroke-dasharray: 6 4;
}

.measure-visual__point {
  fill: var(--paper);
  stroke: var(--target-signal);
  stroke-width: 2;
}

.measure-visual__value-box {
  fill: var(--paper);
  stroke: var(--line-strong);
}

.measure-visual__value {
  fill: var(--ink);
  font: 400 18px/1 var(--font-serif);
  font-variant-numeric: tabular-nums;
}

.measure-visual__label,
.measure-visual__note {
  fill: var(--muted);
  font: 700 10px/1 var(--font-sans);
}

.measure-visual figcaption {
  margin: 7px 1px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

@media (min-width: 1200px) and (min-height: 850px) {
  .ledger {
    position: sticky;
    top: 14px;
  }
}

@media (max-width: 1199px) {
  .shell {
    width: min(100% - 40px, 1040px);
  }

  .workbench {
    grid-template-columns: minmax(320px, 4fr) minmax(0, 7fr);
    gap: 20px;
  }

  .ledger__hero {
    grid-template-columns: 1fr;
  }

  .fit-map__svg {
    max-height: 232px;
  }

  .result-summary {
    display: grid;
    grid-template-columns: minmax(170px, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 10px 16px;
  }

  .result-summary .badge {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .answer-block {
    display: contents;
  }

  .answer {
    grid-column: 1;
  }

  .action-line {
    grid-column: 2;
    align-self: center;
  }

  .rule-spectrum__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 681px) {
  #foot-toggle {
    display: none;
  }
}

@media (max-width: 899px) {
  .shell {
    width: min(100% - 40px, 760px);
  }

  .workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .desk {
    display: contents;
  }

  .direction-control {
    order: 1;
  }

  .source-mode {
    order: 2;
  }

  .region-control {
    order: 3;
  }

  .brand-control {
    order: 4;
  }

  .workbench > .ledger {
    order: 5;
  }

  .width-control {
    order: 6;
    margin-top: 3px;
  }

  #brand-chips {
    max-height: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: inline proximity;
  }

  #brand-chips > button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .ledger {
    position: relative;
  }

  .rule-spectrum__grid {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    overscroll-behavior-x: contain;
    scroll-snap-type: inline proximity;
  }

  .rule-card {
    flex: 0 0 150px;
    scroll-snap-align: start;
  }
}

@media (max-width: 680px) {
  .shell {
    width: calc(100% - 32px);
  }

  .site-header,
  .site-header__inner {
    min-height: 48px;
  }

  .wordmark,
  .header-action {
    min-height: 40px;
  }

  .hero {
    padding-top: 10px;
  }

  h1 {
    margin-bottom: 2px;
    font-size: clamp(25px, 7.2vw, 30px);
  }

  .lead {
    font-size: 13.5px;
    line-height: 1.25;
  }

  .workbench {
    gap: 6px;
    margin-top: 9px;
  }

  .source-mode[data-mode="label"] {
    gap: 0;
  }

  .source-mode[data-mode="label"] .source-mode__head {
    display: none;
  }

  .source-mode__head {
    min-height: 30px;
  }

  #foot-toggle {
    display: inline-flex;
  }

  .source-mode[data-mode="foot"] + .region-control #foot-toggle {
    display: none;
  }

  .legend__mobile {
    display: inline;
  }

  .foot-panel {
    margin-top: 10px;
  }

  .mode-switch button {
    min-height: 32px;
    padding-inline: 8px;
    font-size: 12px;
  }

  .segmented--direction button {
    min-height: 48px;
    padding-inline: 7px;
    font-size: 13px;
  }

  .stepper {
    grid-template-columns: 56px minmax(90px, 1fr) 56px;
    gap: 6px;
  }

  .stepper input {
    font-size: 40px;
  }

  .input-hint {
    min-height: 17px;
    margin-top: 2px;
    font-size: 11.5px;
  }

  .input-hint[data-kind="hint"] {
    display: none;
  }

  .control-label-row {
    margin-bottom: 3px;
  }

  .tabs button {
    min-height: 44px;
    font-size: 12.5px;
  }

  #brand-chips {
    gap: 6px;
    margin-inline: -1px;
    padding: 1px 16px 3px 1px;
    scroll-padding-inline: 1px 16px;
  }

  .chip--brand {
    min-height: 44px;
    padding-inline: 16px;
  }

  .chip__name {
    font-size: 12.5px;
  }

  .chip__rule {
    font-size: 10px;
  }

  .ledger {
    padding: 9px 11px 8px;
    border-radius: 8px;
  }

  .ledger__hero,
  .result-summary {
    display: block;
  }

  .result-summary__meta {
    margin-bottom: 2px;
  }

  .result-context {
    font-size: 11px;
  }

  .answer {
    min-height: 54px;
  }

  .answer__value {
    font-size: clamp(45px, 15vw, 58px);
  }

  .action-line {
    min-height: 0;
    margin: 2px 0 5px;
    font-size: 15px;
    line-height: 1.32;
  }

  .fit-map {
    margin-top: 0;
    padding: 3px 6px 0;
  }

  .fit-map__head {
    min-height: 23px;
  }

  .fit-map__head strong {
    font-size: 17px;
  }

  .fit-map__profile {
    font-size: 10px;
  }

  .fit-map__svg {
    max-height: 168px;
  }

  .fit-map figcaption {
    font-size: 10px;
    line-height: 1.25;
  }

  .source-line {
    margin: 9px 0 7px;
    font-size: 11px;
  }

  .cross-system {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 7px 0;
  }

  .cross-system p {
    padding: 6px 8px;
    font-size: 11.5px;
  }

  .rail-block {
    margin-top: 7px;
    padding-top: 7px;
  }

  .rail-block .ladder {
    max-height: 94px;
  }

  .width-result {
    margin: 5px 0 8px;
    padding: 7px 8px;
    font-size: 12px;
  }

  .result-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-actions #swap-result {
    grid-column: 1 / -1;
  }

  .rule-spectrum {
    padding-top: 28px;
  }

  .rule-card {
    flex-basis: 142px;
    min-height: 108px;
  }

  .foot-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .measure-visual__svg {
    max-height: 170px;
  }
}

@media (max-width: 430px) {
  #foot-toggle {
    max-width: 160px;
    justify-content: flex-end;
    text-align: right;
  }

  .fit-map__lane-title {
    font-size: 12.5px;
  }

  .fit-map__connector-card {
    transform: translateX(0);
  }

  .fit-map__connector-secondary {
    font-size: 9.2px;
  }

  .rail-block__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

@media (max-width: 360px) {
  .shell {
    width: calc(100% - 24px);
  }

  .fit-map__svg {
    max-height: 145px;
  }

  .fit-map__connector-primary {
    font-size: 18px;
  }

  .result-actions {
    grid-template-columns: 1fr;
  }

  .result-actions #swap-result {
    grid-column: auto;
  }
}

@media (forced-colors: active) {
  .fit-map,
  .rule-card,
  .measure-visual {
    border-color: ButtonBorder;
  }

  .fit-map__well-shape,
  .fit-map__contour--active,
  .measure-visual__foot {
    forced-color-adjust: none;
    fill: Canvas;
    stroke: Highlight;
  }

  .fit-map__lane--target .fit-map__contour--active,
  .fit-map__connector-arrow,
  .measure-visual__line,
  .measure-visual__point {
    forced-color-adjust: none;
    fill: Highlight;
    stroke: Highlight;
  }

  .rule-card[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

@media print {
  .fit-map {
    break-inside: avoid;
    border-color: black;
    background: white;
  }

  .fit-map__well-shape,
  .fit-map__contour--active {
    fill: white;
    stroke: black;
  }

  .fit-map__contour,
  .fit-map__connector-line,
  .fit-map__measure-line,
  .fit-map__empty-slash {
    stroke: black;
  }

  .fit-map__connector-card {
    fill: white;
    stroke: black;
  }

  .fit-map__connector-arrow,
  .fit-map__connector-start,
  .fit-map__measure-point {
    fill: black;
    stroke: black;
  }

  .fit-map__lane-kicker,
  .fit-map__lane-title,
  .fit-map__layer-label,
  .fit-map__active-value,
  .fit-map__active-unit,
  .fit-map__connector-primary,
  .fit-map__connector-secondary,
  .fit-map__measure-label,
  .fit-map__empty-label {
    fill: black;
  }
}