.course-tool-stack {
  display: grid;
  gap: 1.15rem;
  min-width: 0;
}

.tool-head h1 {
  margin: 0;
}

.tool-head p,
.tool-section-head p,
.tool-note,
.demo-steps p {
  color: var(--muted-foreground, #687487);
  line-height: 1.6;
}

.tool-head p {
  margin: .5rem 0 0;
}

.tool-surface,
.demo-navigation {
  min-width: 0;
  padding: clamp(.9rem, 2vw, 1.4rem);
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e1e6ee);
  border-radius: .65rem;
}

.tool-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem .9rem;
  margin-bottom: .95rem;
}

.tool-section-head h2 {
  margin: 0;
  font-size: 1.08rem;
}

.tool-section-head p,
.tool-note {
  margin: 0;
  font-size: .84rem;
}

.comparison-layout,
.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(12rem, 1fr);
  gap: 1.15rem;
  align-items: start;
}

.comparison-chart {
  display: grid;
  gap: .45rem;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.comparison-axis,
.comparison-row {
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr) 5rem;
  align-items: center;
  gap: .65rem;
  padding-inline: .65rem;
  text-align: left;
}

.comparison-axis {
  color: var(--muted-foreground, #687487);
  font-size: .72rem;
  line-height: 1.3;
}

.comparison-axis > :last-child,
.comparison-change {
  text-align: right;
}

.comparison-ticks {
  display: flex;
  justify-content: space-between;
  gap: .25rem;
}

.comparison-row {
  min-height: 2.7rem;
  width: 100%;
  border: 1px solid var(--border, #e1e6ee);
  border-radius: .4rem;
  background: var(--panel, #fff);
  color: inherit;
  cursor: pointer;
  font-size: .88rem;
}

.comparison-row:hover,
.comparison-row[aria-pressed="true"] {
  border-color: var(--primary, #315bc5);
  background: var(--accent, #eaf0fa);
}

.comparison-row svg {
  width: 100%;
  height: 1.15rem;
  overflow: visible;
}

.comparison-track {
  fill: var(--border, #e1e6ee);
}

.comparison-band {
  fill: var(--primary, #315bc5);
}

.comparison-change {
  font-weight: 700;
  white-space: nowrap;
}

.comparison-change span {
  font-size: .72em;
}

.comparison-inspector,
.calculator-result {
  background: var(--soft, #f8fafc);
  border: 1px solid var(--border, #e1e6ee);
  border-radius: .5rem;
  padding: .95rem;
  min-width: 0;
}

.comparison-inspector h3,
.calculator-result h3 {
  margin: .25rem 0;
}

.comparison-inspector h3,
.calculator-change {
  font-size: clamp(1.2rem, 2.3vw, 1.55rem);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.comparison-inspector p {
  margin: .4rem 0;
}

.tool-kicker {
  color: var(--muted-foreground, #687487);
  font-size: .78rem;
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .8rem;
}

.comparison-inspector .tool-actions {
  margin-top: .85rem;
}

.comparison-inspector a,
.tool-table a,
.glossary-content a,
.tool-back,
.demo-navigation .tool-actions > a:not(.button) {
  color: var(--primary, #315bc5);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.tool-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.tool-table :is(th, td) {
  padding: .65rem .45rem;
  text-align: left;
  border-bottom: 1px solid var(--border, #e1e6ee);
}

.tool-table thead {
  color: var(--muted-foreground, #687487);
  font-size: .82rem;
}

.calculator-form,
.calculator-fields {
  display: grid;
  min-width: 0;
  gap: .85rem;
}

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

.tool-field {
  display: grid;
  gap: .3rem;
  min-width: 0;
  font-size: .86rem;
  font-weight: 650;
}

.tool-field :is(input, select) {
  appearance: auto;
  display: block;
  min-height: 2.7rem;
  width: 100%;
  min-width: 0;
  padding: .45rem .65rem;
  border: 1px solid var(--border, #e1e6ee);
  border-radius: .4rem;
  background: var(--panel, #fff);
  color: inherit;
  font: inherit;
  font-weight: 400;
}

.tool-field input[aria-invalid="true"] {
  border-color: var(--destructive, #b44042);
}

.tool-error {
  margin: 0;
  color: var(--destructive, #b44042);
  font-size: .85rem;
}

.calculator-result p {
  margin: .5rem 0 0;
}

.calculator-change {
  color: var(--primary, #315bc5);
}

.calculator-formula {
  color: var(--muted-foreground, #687487);
  font-size: .84rem;
  overflow-wrap: anywhere;
}

.glossary-search {
  max-width: 28rem;
  margin-bottom: .6rem;
}

.glossary-list {
  display: grid;
  gap: .55rem;
  list-style: none;
  padding: 0;
  margin: .8rem 0 0;
}

.glossary-list > li {
  scroll-margin-top: 1rem;
}

.glossary-card {
  border: 1px solid var(--border, #e1e6ee);
  border-radius: .45rem;
}

.glossary-card summary {
  min-height: 2.75rem;
  padding: .65rem .85rem;
  cursor: pointer;
}

.glossary-card summary span {
  margin-inline-start: .6rem;
  color: var(--muted-foreground, #687487);
  font-size: .85rem;
}

.glossary-content {
  border-top: 1px solid var(--border, #e1e6ee);
  padding: .7rem .85rem .9rem;
  line-height: 1.65;
}

.glossary-content dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem .65rem;
  margin: 0;
}

.glossary-content dt {
  font-weight: 700;
}

.glossary-content dd {
  margin: 0;
}

.glossary-content h3 {
  margin: .8rem 0 .25rem;
  font-size: .9rem;
}

.glossary-content ul {
  padding-inline-start: 1.15rem;
  margin: 0;
}

.demo-steps {
  display: grid;
  gap: .65rem;
  padding-left: 1.4rem;
  margin: 0 0 1rem;
}

.demo-steps li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--border, #e1e6ee);
}

.demo-steps h2 {
  font-size: 1rem;
  margin: 0;
}

.demo-steps p {
  margin: .3rem 0 .55rem;
}

.demo-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
}

.demo-navigation p {
  margin: 0;
  font-weight: 650;
}

.course-tool-stack :is(button, a, input, select, summary):focus-visible,
.demo-navigation a:focus-visible {
  outline: 2px solid var(--primary, #315bc5);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .comparison-layout,
  .calculator-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .comparison-axis,
  .comparison-row {
    grid-template-columns: 4.7rem minmax(0, 1fr) 3.65rem;
    gap: .35rem;
    padding-inline: .35rem;
  }

  .comparison-row,
  .tool-table {
    font-size: .79rem;
  }

  .tool-table :is(th, td) {
    padding-inline: .3rem;
  }

  .calculator-fields,
  .glossary-content dl {
    grid-template-columns: 1fr;
  }

  .glossary-card summary span {
    display: block;
    margin-inline-start: 0;
  }
}

@media print {
  .demo-navigation {
    display: none;
  }
}