/* Sales tax engine. From scratch, so it uses the host's --shy-* tokens
   directly (no :root alias block). Every stylesheet loads on every page:
   every class is prefixed stx-. */

.stx-muted { color: var(--shy-text-muted); }
.stx-small { font-size: 0.85rem; }

.stx-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .stx-grid { grid-template-columns: 1fr; }
}

.stx-table { width: 100%; }
.shy-admin .stx-table td.stx-num,
.shy-admin .stx-table th.stx-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shy-admin .stx-table--tight td,
.shy-admin .stx-table--tight th { padding: 0.3rem 0.4rem; font-size: 0.8rem; }
.shy-admin .stx-table td.stx-key { color: var(--shy-text-faint); font-weight: 600; width: 3rem; }
.stx-note { display: block; color: var(--shy-text-muted); font-size: 0.78rem; }
.stx-inactive td { color: var(--shy-text-faint); }

.stx-how { margin-top: 0; color: var(--shy-text-muted); font-size: 0.9rem; }

.stx-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.stx-actions form { display: inline; }

.stx-link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--shy-brand);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.stx-link-button--danger { color: var(--shy-danger); margin-top: 1rem; }

.stx-pill {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--shy-surface-alt);
  color: var(--shy-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.stx-pill--ready { background: var(--shy-surface-alt); color: var(--shy-brand); }
.stx-pill--done { background: var(--shy-success-tint); color: var(--shy-success); }
.stx-pill--error { background: var(--shy-danger-tint); color: var(--shy-danger); }

.stx-banner {
  padding: 0.65rem 0.9rem;
  border-radius: var(--shy-radius);
  margin: 0 0 0.75rem;
  border: 1px solid var(--shy-border);
}

.stx-banner--error { background: var(--shy-danger-tint); color: var(--shy-danger); border-color: var(--shy-danger); }
.stx-banner--warn { background: var(--shy-warning-tint); color: var(--shy-text); border-color: var(--shy-warning); }
.stx-banner--done { background: var(--shy-success-tint); color: var(--shy-text); border-color: var(--shy-success); }

.stx-inline-form { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-end; }
.stx-inline-form .field { flex: 1 1 12rem; }
.shy-admin .stx-inline-form .actions { margin: 0 0 1rem; }

.shy-admin .stx-check { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.shy-admin .stx-check input { width: auto; }
.shy-admin .stx-check label { display: inline; margin: 0; }
.shy-admin .stx-check small { flex-basis: 100%; margin: 0; }

.stx-upload { margin-top: 1rem; }

/* Click-to-copy figures (tax_copy_controller.js). */
.stx-copy {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--shy-brand);
  background: var(--shy-surface-alt);
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  padding: 0.1rem 0.45rem;
  cursor: copy;
  white-space: nowrap;
}
.stx-copy:hover { border-color: var(--shy-brand); }
.stx-copy--just { background: var(--shy-success-tint); border-color: var(--shy-success); color: var(--shy-success); }
.stx-copy--just::after { content: " ✓"; }
.stx-copy--failed { border-color: var(--shy-danger); color: var(--shy-danger); }
.shy-admin .stx-table tr.stx-copied td { color: var(--shy-text-faint); }
.shy-admin .stx-table tr.stx-copied .stx-copy { color: var(--shy-text-muted); }

/* A wide jurisdiction table scrolls inside its card on a phone, never the page. */
.stx-scroll { overflow-x: auto; max-width: 100%; }