/* Asset Manager — Layout B page-scoped styles. Builds on bundle.css tokens (:root vars). */
:root {
  --amb-blue-tint: var(--additional-lightblue);
  --amb-shadow-float: 0 24px 60px #00205b1a;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.amb-mono { font-family: "DM Mono", sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.amb-text-sm { font-size: .875rem; line-height: 1.25rem; margin-bottom: 0; }
.amb-center { justify-content: center; flex-wrap: wrap; }

/* ---- tags ---- */
.amb-tag {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .75rem;
  border-radius: 999em;
  border: 1px solid transparent;
  font-family: DM Sans, sans-serif;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 400;
  white-space: nowrap;
}
.amb-tag.is-tint { background-color: var(--amb-blue-tint); color: var(--brand-primary); }
.amb-tag.is-neutral { background-color: var(--background-secondary); color: var(--background-default); }
.amb-tag.is-white { background-color: var(--contrast-primary); color: var(--brand-primary); }
.amb-tag.is-outline { border-color: var(--contrast-divider); color: var(--contrast-primary); }
.amb-tags { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- spec row: label left, value right, hairline between rows ---- */
.amb-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .5rem 0;
  border-top: 1px solid var(--contrast-divider-dark);
  font-size: .875rem;
  line-height: 1.25rem;
}
.amb-kv:first-child { border-top: 0; }
.amb-kv > span:first-child { color: var(--background-opacity-80); font-weight: 300; }
.amb-kv > span:last-child { color: var(--background-default); text-align: right; font-variant-numeric: tabular-nums; }

/* ---- hero: input -> output demo ---- */
.amb-io { margin-top: 4rem; display: grid; grid-template-columns: 4fr 1fr 7fr; align-items: center; gap: 1rem; }
.amb-sheet { border: 1px solid var(--contrast-divider-dark); border-radius: 1rem; overflow: hidden; background-color: var(--contrast-primary); }
.amb-sheet-head {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .875rem 1.125rem;
  background-color: var(--background-secondary);
  border-bottom: 1px solid var(--contrast-divider-dark);
}
.amb-sheet-rows > div {
  padding: .625rem 1.125rem;
  font-size: .875rem; line-height: 1.25rem;
  border-bottom: 1px solid var(--contrast-divider-dark);
  font-variant-numeric: tabular-nums;
  color: var(--background-default);
}
.amb-sheet-rows > div:last-child { border-bottom: 0; }
.amb-sheet-rows .hd { color: var(--background-opacity-80); }
.amb-sheet-rows .hl { background-color: var(--amb-blue-tint); color: var(--brand-primary); }
.amb-arrow { display: flex; flex-direction: column; align-items: center; gap: .625rem; text-align: center; }
.amb-arrow svg { color: var(--brand-primary); display: block; }
.amb-out-card {
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: 2rem;
  border-radius: 1.5rem;
  background-color: var(--contrast-primary);
  border: 1px solid var(--contrast-divider-dark);
  box-shadow: var(--amb-shadow-float);
}
.amb-out-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.amb-out-sub { color: var(--background-opacity-80); }
.amb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }

/* ---- what you get: spec-card grid ---- */
.amb-spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 4rem; }
.amb-spec-card { background-color: var(--contrast-primary); border-radius: 1rem; padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }

/* ---- how it works: steps + filters demo ---- */
.amb-how { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; margin-top: 4rem; }
.amb-steps { display: flex; flex-direction: column; gap: 2rem; }
.amb-step { display: flex; gap: 1.25rem; }
.amb-step .amb-num {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border-radius: 999em;
  background-color: var(--background-default);
  color: var(--contrast-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; font-variant-numeric: tabular-nums;
}
.amb-step.is-current .amb-num { background-color: var(--brand-primary); }
.amb-step h6 { margin-bottom: .25rem; }
.amb-step.is-current h6 { color: var(--brand-primary) !important; }
.amb-filters {
  background-color: var(--brand-primary);
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.amb-filters .caption { color: var(--contrast-primary); margin-bottom: .75rem; }
.amb-filters-foot {
  border-top: 1px solid var(--contrast-divider);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.amb-count { display: flex; align-items: baseline; gap: .75rem; }
.amb-count p { color: var(--contrast-primary); margin: 0; }
.amb-stat-num {
  color: var(--contrast-primary);
  letter-spacing: -2px;
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 3rem;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.amb-acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.amb-acts .transparent-button { border-color: var(--contrast-primary); }
.amb-acts .transparent-button:hover { background-color: var(--background-hover-brand); }

/* ---- use cases table ---- */
.amb-uc-table { background-color: var(--contrast-primary); border-radius: 1.5rem; overflow: hidden; margin-top: 4rem; }
.amb-uc-row {
  display: grid; grid-template-columns: 2.2fr 2fr 2.4fr; gap: 1rem;
  padding: 1.375rem 2rem; align-items: center;
  border-bottom: 1px solid var(--contrast-divider-dark);
}
.amb-uc-row:last-child { border-bottom: 0; }
.amb-uc-row.is-head { padding-top: 1rem; padding-bottom: 1rem; }
.amb-uc-title { font-size: 1.125rem; line-height: 1.575rem; color: var(--background-default); }
.amb-uc-row .amb-tag { white-space: normal; }
.amb-uc-row p { margin-bottom: 0; }
.amb-field-label { display: none; font-size: .75rem; line-height: 1rem; }
.amb-uc-row .amb-field-label { margin-bottom: .25rem; }

/* ---- why this matters: rollup card ---- */
.amb-why { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: center; }
.amb-why .button { align-self: flex-start; }
.amb-rollup {
  border: 1px solid var(--contrast-divider-dark);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: var(--amb-shadow-float);
  background-color: var(--contrast-primary);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.amb-rollup-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.amb-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.amb-three .caption { margin-bottom: .5rem; }
.amb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.amb-tiles > div { background-color: var(--background-secondary); border-radius: .75rem; padding: 1rem; display: flex; flex-direction: column; gap: .25rem; }
.amb-tiles span { font-size: .875rem; line-height: 1.25rem; color: var(--background-opacity-80); }
.amb-tile-num {
  color: var(--background-default);
  letter-spacing: -1px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.5rem;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* ---- responsive ---- */
@media screen and (max-width: 991px) {
  .amb-io { grid-template-columns: 1fr; gap: 1.25rem; }
  .amb-arrow svg { transform: rotate(90deg); margin-block: 1.25rem; }
  .amb-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amb-how, .amb-why { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media screen and (max-width: 767px) {
  .amb-sheet-rows > div:nth-child(n+6):not(.hl) { display: none; }
  .amb-out-card, .amb-rollup { padding: 1.25rem; }
  .amb-out-head { flex-direction: column; }
  .amb-two { grid-template-columns: 1fr; gap: 0; }
  .amb-spec-grid { grid-template-columns: 1fr; }
  .amb-filters { padding: 1.5rem; }
  .amb-acts, .amb-acts > * { width: 100%; }
  .amb-uc-row, .amb-uc-row.is-head { grid-template-columns: 1fr; gap: .5rem; padding: 1.125rem 1.25rem; }
  .amb-uc-row.is-head { display: none; }
  .amb-uc-row .amb-field-label { display: block; margin-bottom: .25rem; }
  .amb-three { grid-template-columns: 1fr; gap: 1rem; }
  .amb-tiles { grid-template-columns: 1fr; gap: .5rem; }
  .amb-tiles > div { padding: .75rem; }
}