:root {
  --space-0: 0;
  --space-7: 40px;
  --space-8: 48px;
  --space-anchor-offset: 100px;
  --radius-full: 999px;
  --text-2xl: 28px;
  --line-tight: 1.2;
  --line-body: 1.5;
  --tracking-tight: -0.02em;
}

.trace-amount {
  color: var(--forest);
  text-decoration-color: var(--green-line);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--space-1);
}

.trace-amount:hover {
  color: var(--forest-2);
  text-decoration-color: var(--forest-2);
}

.help-popover {
  display: inline-grid;
  position: relative;
  vertical-align: middle;
}

.help-popover > button {
  width: var(--space-5);
  height: var(--space-5);
  min-height: 0;
  padding: 0;
  color: var(--forest);
  background: var(--mint);
  border: 1px solid var(--green-line);
  border-radius: var(--radius-round);
  font-size: var(--text-xs);
  font-weight: 850;
  cursor: help;
}

.help-popover-content {
  width: min(320px, calc(100vw - var(--space-6)));
  padding: var(--space-4);
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  z-index: 30;
  display: grid;
  gap: var(--space-2);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
  font-size: var(--text-xs);
  line-height: var(--line-body);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--space-1));
  transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.help-popover-content strong,
.help-popover-content span {
  display: block;
}

.label-with-help {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.role-help-list {
  display: grid;
  gap: var(--space-3);
}

.role-help-list > span > span {
  margin-top: var(--space-1);
}

.help-popover-content span {
  margin-top: var(--space-1);
  color: var(--muted);
}

.help-popover:hover .help-popover-content,
.help-popover:focus-within .help-popover-content {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.favorite-toggle {
  margin: 0;
}

.favorite-toggle button {
  width: var(--control-height-compact);
  height: var(--control-height-compact);
  min-height: 0;
  padding: var(--space-2);
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  cursor: pointer;
}

.favorite-toggle svg {
  width: var(--space-4);
  fill: transparent;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.favorite-toggle button:hover,
.favorite-toggle button:focus-visible {
  color: var(--forest);
  background: var(--green-bg-soft);
  border-color: var(--green-line);
  outline: 0;
}

.favorite-toggle button[aria-pressed="true"] {
  color: var(--forest);
  background: var(--mint);
  border-color: var(--green-line);
}

.favorite-toggle button[aria-pressed="true"] svg {
  fill: currentColor;
}

.ui-empty-state {
  padding: var(--space-6) var(--space-4);
  display: grid;
  gap: var(--space-1);
  color: var(--muted);
  background: var(--surface);
  border-radius: var(--radius-m);
  text-align: center;
}

.ui-empty-state strong {
  color: var(--ink);
  font-size: var(--text-s);
}

.ui-empty-state span {
  font-size: var(--text-xs);
}

.trace-amount:focus-visible,
.favorite-operation:focus-visible,
.trace-output-list a:focus-visible,
.ui-kit-index a:focus-visible {
  outline: 2px solid var(--green-strong);
  outline-offset: var(--space-1);
}

.favorite-operations {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: minmax(170px, 0.3fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  background: var(--forest-2);
  color: var(--white);
  border-radius: var(--radius-l);
}

.favorite-operations-heading h2,
.favorite-operations-heading p {
  margin: 0;
}

.favorite-operations-heading h2 {
  font-size: var(--text-l);
}

.favorite-operations-heading p,
.favorite-operation small,
.favorite-operation-empty {
  color: var(--green-line);
  font-size: var(--text-s);
}

.favorite-operation-list {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
  overflow-x: auto;
}

.favorite-operation {
  min-width: 220px;
  padding: var(--space-3) var(--space-4);
  display: grid;
  gap: var(--space-1);
  background: var(--forest);
  border: 1px solid var(--green-strong);
  border-radius: var(--radius-m);
}

.favorite-operation-empty {
  margin: 0;
}

.operation-actions form {
  margin: 0;
}

.preference-choice-list {
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  border: 0;
}

.preference-choice-list label {
  padding: var(--space-3);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  cursor: pointer;
}

.preference-choice-list label:has(input:checked) {
  background: var(--green-bg-soft);
  border-color: var(--green-line);
}

.preference-choice-list strong,
.preference-choice-list small {
  display: block;
}

.preference-choice-list small {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-s);
  line-height: var(--line-body);
}

.recurring-rule-list,
.recurring-suggestion-list {
  display: grid;
  gap: var(--space-2);
}

.recurring-rule,
.recurring-suggestion-list article {
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-4);
  align-items: center;
  background: var(--surface);
  border-radius: var(--radius-m);
}

.recurring-rule small,
.recurring-suggestion-list small {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-s);
}

.recurring-suggestions {
  margin-bottom: var(--space-4);
  border: 1px solid var(--amber-line);
}

.scenario-isolated {
  padding: var(--space-2) var(--space-3);
  color: var(--forest);
  background: var(--green-bg);
  border-radius: var(--radius-full);
  font-size: var(--text-s);
  font-weight: 750;
}

.trace-heading {
  align-items: center;
}

.trace-heading-amount {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
}

.trace-formula,
.document-fingerprint {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  background: var(--surface-2);
  border-radius: var(--radius-m);
}

.trace-formula span,
.document-fingerprint span,
.document-fingerprint small {
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.document-fingerprint code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.trace-layout {
  margin-bottom: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: var(--space-4);
}

.trace-source-list,
.trace-output-list {
  display: grid;
  gap: var(--space-2);
}

.trace-source-list article,
.trace-output-list a {
  padding: var(--space-3) 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.trace-source-list article:last-child,
.trace-output-list a:last-child {
  border-bottom: 0;
}

.trace-source-main,
.trace-output-list a > span:first-child {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.trace-source-main small,
.trace-output-list small {
  color: var(--muted);
  font-size: var(--text-s);
  line-height: var(--line-body);
}

.trace-source-side {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  white-space: nowrap;
}

.trace-output-list a > strong {
  white-space: nowrap;
}

.trace-kind {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 750;
  text-transform: uppercase;
}

.delta-summary,
.what-if-summary {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  display: flex;
  gap: var(--space-5);
  align-items: center;
  background: var(--forest-2);
  color: var(--white);
  border-radius: var(--radius-l);
}

.delta-summary > div,
.what-if-summary > div {
  display: grid;
  gap: var(--space-1);
}

.delta-summary span,
.what-if-summary span {
  color: var(--green-line);
  font-size: var(--text-xs);
}

.delta-summary small {
  color: var(--green-line);
}

.delta-arrow {
  font-size: var(--text-xl);
}

.delta-net {
  margin-left: auto;
  padding-left: var(--space-5);
  border-left: 1px solid var(--green-strong);
}

.delta-table td:first-child strong {
  display: block;
  margin-top: var(--space-1);
}

.delta-value.positive {
  color: var(--green-strong);
}

.delta-value.negative {
  color: var(--red);
}

.what-if-form {
  margin-bottom: var(--space-4);
}

.what-if-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.what-if-fields label {
  display: grid;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: 700;
}

.scenario-changed {
  background: var(--green-bg-soft);
}

.contextual-actions {
  position: relative;
}

.contextual-actions > summary {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  cursor: pointer;
  list-style: none;
}

.contextual-actions > summary svg {
  width: 18px;
  fill: var(--muted);
}

.ui-state-error {
  border-color: var(--red-line);
}

.ui-state-error input,
.ui-state-error select {
  border-color: var(--red);
}

.ui-state-disabled {
  opacity: 0.55;
}

.ui-state-disabled > summary,
.ui-state-disabled a,
.ui-state-disabled button {
  pointer-events: none;
}

.ui-state-empty {
  color: var(--muted);
}

.ui-kit-index {
  margin-bottom: var(--space-6);
  padding: var(--space-2);
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  background: var(--surface-2);
  border-radius: var(--radius-m);
}

.ui-kit-index a {
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  border-radius: var(--radius-s);
}

.ui-kit-index a:hover {
  background: var(--white);
}

.ui-kit-section {
  margin-bottom: var(--space-7);
  scroll-margin-top: var(--space-anchor-offset);
}

.ui-state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.ui-state-grid > article {
  min-width: 0;
  min-height: 130px;
  padding: var(--space-4);
  display: grid;
  align-content: start;
  gap: var(--space-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

.ui-state-grid > article > span:first-child {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 750;
  text-transform: uppercase;
}

.ui-mobile-state {
  width: min(100%, 390px);
  grid-column: span 1;
  border-color: var(--teal);
}

.ui-state-grid .ui-disclosure {
  margin: 0;
  padding: 0;
}

.ui-state-grid .ui-disclosure .disclosure-body {
  padding: var(--space-3);
}

.ui-state-grid .acquired-source {
  min-width: 0;
}

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

  .what-if-fields,
  .ui-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .delta-summary,
  .what-if-summary {
    flex-wrap: wrap;
  }
}

@media (max-width: 620px) {
  .favorite-operations,
  .delta-summary,
  .what-if-summary {
    padding: var(--space-4);
  }

  .favorite-operation-list {
    flex-direction: column;
  }

  .favorite-operation {
    min-width: 0;
  }

  .recurring-rule,
  .recurring-suggestion-list article,
  .what-if-fields,
  .ui-state-grid {
    grid-template-columns: 1fr;
  }

  .trace-formula,
  .document-fingerprint {
    align-items: flex-start;
    flex-direction: column;
  }

  .trace-source-list article {
    align-items: flex-start;
    flex-direction: column;
  }

  .trace-source-side {
    width: 100%;
    justify-content: space-between;
  }

  .delta-net {
    width: 100%;
    margin-left: 0;
    padding: var(--space-3) 0 0;
    border-left: 0;
    border-top: 1px solid var(--green-strong);
  }
}