/* Budget Build Forge and Budget Build Projector. Loaded after budget-machine.css, so the
 * page shell, title block and how-to block come from there; this file adds
 * only the forge cards, the form controls, the tiles and the charts. */

:root {
  --ub-s1: #2a78d6;
  --ub-s2: #eb6834;
  --ub-s3: #1baf7a;
  --ub-bad: #b91c1c;
  --ub-bad-bg: #fef2f2;
  --ub-good: #15803d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ub-s1: #3987e5;
    --ub-s2: #d95926;
    --ub-s3: #199e70;
    --ub-bad: #fca5a5;
    --ub-bad-bg: #3b1212;
    --ub-good: #86efac;
  }
}

.ub-card {
  background: var(--bm-white);
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius);
  padding: 1.25rem 1.4rem;
  margin: 0 0 1.25rem;
}
.ub-card > h2 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.ub-dek { color: var(--bm-muted); margin: 0 0 1rem; font-size: 0.93rem; }

.ub-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}
.ub-form label, .ub-line label {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.82rem; color: var(--bm-muted); font-weight: 600;
}
.ub-form .ub-full { grid-column: 1 / -1; }
.ub-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

.ub-card input, .ub-card select, .ub-card textarea, .ub-btn {
  font: inherit; font-size: 0.92rem;
  border: 1px solid var(--bm-border-dark);
  border-radius: var(--bm-radius);
  background: var(--bm-bg);
  color: var(--bm-text);
  padding: 0 0.7rem;
  height: 2.5rem;
  box-sizing: border-box;
  min-width: 0;
}
.ub-card textarea { height: auto; min-height: 4rem; padding: 0.55rem 0.7rem; }
.ub-btn { cursor: pointer; font-weight: 600; background: var(--bm-white); }
.ub-btn:hover { border-color: var(--bm-accent); color: var(--bm-accent); }
.ub-btn.ub-primary { background: var(--bm-accent); border-color: var(--bm-accent); color: #fff; }
.ub-btn.ub-primary:hover { background: var(--bm-accent-hover); color: #fff; }
.ub-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ub-status { min-height: 1.3rem; margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--ub-good); }
.ub-status.is-bad { color: var(--ub-bad); }

.ub-lines { display: grid; gap: 0.75rem; }
.ub-line {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: center;
  border-top: 1px solid var(--bm-border);
  padding-top: 0.75rem;
}
.ub-line:first-child { border-top: 0; padding-top: 0; }
.ub-line-name { font-weight: 700; }
.ub-line-name a { color: var(--bm-text); text-decoration: none; }
.ub-line-name a:hover { color: var(--bm-accent); text-decoration: underline; }
.ub-line-fact { font-size: 0.82rem; color: var(--bm-muted); margin-top: 0.15rem; }
.ub-custom { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem 1rem; }
.ub-custom[hidden] { display: none; }
@media (max-width: 640px) { .ub-line { grid-template-columns: 1fr; } }

.ub-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
.ub-tile { background: var(--bm-white); border: 1px solid var(--bm-border); border-radius: var(--bm-radius); padding: 0.8rem 1rem; }
.ub-tile-label { font-size: 0.78rem; color: var(--bm-muted); }
.ub-tile-value { font-size: 1.3rem; font-weight: 800; margin-top: 0.15rem; color: var(--bm-text); }
.ub-tile-note { font-size: 0.78rem; color: var(--bm-light); margin-top: 0.15rem; }

.ub-warning {
  background: var(--ub-bad-bg); color: var(--ub-bad);
  border: 1px solid var(--ub-bad); border-radius: var(--bm-radius);
  padding: 0.6rem 0.85rem; margin: 0 0 0.75rem; font-size: 0.92rem;
}
.ub-note { color: var(--bm-muted); font-size: 0.88rem; }

.ub-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; margin: 0.25rem 0 0.5rem; color: var(--bm-text); }
.ub-legend i, .ub-tip i { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; margin-right: 0.4rem; vertical-align: -1px; }
.ub-chart { position: relative; }
.ub-chart svg { width: 100%; height: auto; display: block; }
.ub-grid { stroke: var(--bm-border); stroke-width: 1; }
.ub-zero { stroke: var(--bm-border-dark); stroke-width: 1; }
.ub-axis { fill: var(--bm-light); font-size: 11px; }
.ub-endlabel { fill: var(--bm-text); font-size: 12px; }
.ub-cross { stroke: var(--bm-border-dark); stroke-width: 1; stroke-dasharray: 3 3; }
.ub-dot { stroke: var(--bm-white); stroke-width: 2; }
.ub-tip {
  position: absolute; width: 230px; pointer-events: none;
  background: var(--bm-white); color: var(--bm-text);
  border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
  padding: 0.5rem 0.65rem; font-size: 0.8rem; box-shadow: var(--bm-shadow);
}

.ub-quarters { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; }
.ub-quarter { background: var(--bm-white); border: 1px solid var(--bm-border); border-radius: var(--bm-radius); padding: 0.8rem 1rem; }
.ub-quarter.is-surplus { border-color: var(--ub-good); }
.ub-quarter h4 { margin: 0 0 0.5rem; font-size: 0.88rem; }
.ub-quarter dl { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.75rem; margin: 0; font-size: 0.84rem; }
.ub-quarter dt { color: var(--bm-muted); }
.ub-quarter dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.ub-picked { margin: 0; padding-left: 1.2rem; color: var(--bm-muted); font-size: 0.9rem; }
.ub-picked li { margin: 0.2rem 0; }
/* A long option name must never push the page wider than a phone. */
.ub-card select { width: 100%; }
.ub-line > div, .ub-line > label { min-width: 0; }
.ub-line-fact { overflow-wrap: anywhere; }