/* ============================================================
   10_ BUDGET-KARTEN  (Screen 2)
   ============================================================ */
.budget {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 720px) {
  .budget {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

.budget-card {
  position: relative;
  text-align: left;
  padding: 18px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 12px;
  row-gap: 8px;
  border: 1px solid var(--steel-soft);
  background: var(--concrete);
  transition:
    background .15s var(--ease-soft),
    border-color .15s var(--ease-soft),
    transform .15s var(--ease-soft);
  min-height: 128px;
}
@media (min-width: 720px) {
  .budget-card { padding: 28px 24px; min-height: 172px; }
}
.budget-card:hover {
  background: var(--card);
  border-color: var(--steel-line);
  transform: translateY(-1px);
}
.budget-card.is-selected {
  background: var(--card);
  border-color: var(--orange);
}
.budget-card.is-selected::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--orange);
}

.budget-id {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding-top: 2px;
}
.budget-id .marker {
  width: 12px; height: 12px;
  border: 1.5px solid var(--ink);
  position: relative;
  flex: none;
  transition: background .15s var(--ease-soft), border-color .15s var(--ease-soft);
}
.budget-card.is-selected .budget-id .marker {
  background: var(--orange);
  border-color: var(--orange);
}
.budget-card.is-selected .budget-id .marker::after {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M2.4 7 L5.6 10 L11.4 4' stroke='%23EDEDE9' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/></svg>") center/9px no-repeat;
}
.budget.has-error .budget-card {
  border-color: var(--orange);
}
.budget-error {
  display: none;
  margin-top: 10px;
  color: var(--orange);
}
.budget.has-error + .budget-error { display: block; }

.budget-amount {
  grid-column: 2;
  font-family: var(--font-tight);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.08;
}
.budget-context {
  grid-column: 2;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(58, 74, 92, .72);
  max-width: 36ch;
}
@media (max-width: 420px) {
  .budget-card { padding: 14px 12px; min-height: 126px; }
  .budget-id .marker { width: 10px; height: 10px; }
  .budget-amount { font-size: 19px; }
  .budget-context { font-size: 11px; }
}