/* Form, table, panel and button components. Shared by all three tools.
   Tokens only, no raw hex. */

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; }

.field > label {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.4;
}

.field input,
.field select {
  width: 100%;
  padding: 10px 12px;
  background: var(--parchment);
  border: 1px solid var(--subtle-gray);
  border-radius: 0;
  font-size: var(--t-body);
}

.field input:focus,
.field select:focus { border-color: var(--deep-ink); }

.field .hint { color: var(--rule-gray); font-size: var(--t-meta); line-height: 1.5; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 479px) {
  .field-row { grid-template-columns: 1fr; }
}

/* Panel */
.panel { background: var(--alt-row); padding: 20px; }

details.panel > summary {
  cursor: pointer;
  font-size: var(--t-h3);
  font-weight: 600;
  list-style: none;
}

details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after { content: ' +'; }
details.panel[open] > summary::after { content: ' -'; }
details.panel[open] > summary { margin-bottom: 16px; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid var(--deep-ink);
  background: var(--deep-ink);
  color: var(--parchment);
  font-size: var(--t-body);
  font-weight: 600;
  cursor: pointer;
}

.btn:hover { background: var(--parchment); color: var(--deep-ink); }

.btn-quiet { background: var(--parchment); color: var(--deep-ink); }
.btn-quiet:hover { background: var(--deep-ink); color: var(--parchment); }

/* Table */
.table-wrap { overflow-x: auto; }

.data-table th,
.data-table td {
  padding: 10px 12px;
  text-align: left;
  font-size: var(--t-small);
  line-height: 1.5;
}

.data-table thead tr { background: var(--deep-ink); color: var(--parchment); }
.data-table thead th { font-weight: 600; }
.data-table tbody tr:nth-child(even) { background: var(--alt-row); }

.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.data-table tfoot tr {
  background: var(--deep-ink);
  color: var(--parchment);
  font-weight: 600;
}

/* Rules */
.rule { height: 1px; background: var(--subtle-gray); }

/* The print header block. Shown only by print.css. */
.print-only { display: none; }