/* The control card, as the pattern pages share it: the card itself, the fields
   with their slider and readout, the chooser, the inputs and the buttons. The
   pages link this after shared.css, so what is written here wins over the
   plain page styles — the card is a field of its own, not a page button. */

.control-card {
  /* A layered backdrop makes the dialog readable over any pattern: the
     gradient tints the card, the backdrop-filter blurs and saturates the
     pattern behind it, and the accent border follows the current hue. */
  background: linear-gradient(165deg, rgba(18, 18, 31, 0.72), rgba(18, 18, 31, 0.45));
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--pattern-accent, #00d4ff) 40%, var(--border));
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  /* The editable surfaces of the card. They sit *above* the card, not below
     it: a field darker than its surroundings reads as a hole, a lighter one
     reads as something you can type into. One set of values, so the plain
     fields and the chooser cannot drift apart. */
  --field-bg: rgba(255, 255, 255, 0.07);
  --field-bg-hover: rgba(255, 255, 255, 0.11);
  --field-border: rgba(255, 255, 255, 0.16);
}
.control-card h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  color: var(--pattern-accent, var(--accent));
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* A block of the card with a title of its own, below the controls. */
.card-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.card-actions {
  display: flex;
  gap: 0.5rem;
}
.card-status {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.seed-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.seed-row input[type="number"] {
  flex: 1;
  min-width: 0;
}
.field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 0.75rem;
  align-items: center;
}
.field label {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.field output {
  font-size: 0.85rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.field input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
}
/* The chooser spans the whole width of the field, and lets the page
   decide its hue: the studio puts --pattern-accent on <html>, and the
   element reads it through its own accent hook. */
jd-select {
  grid-column: 1 / -1;
  --jd-select-accent: var(--pattern-accent, var(--accent));
  /* The chooser is a field of the card, so it takes the card's field values. */
  --jd-select-background: var(--field-bg);
  --jd-select-surface-hover: var(--field-bg-hover);
  --jd-select-border: var(--field-border);
}
input[type="number"],
input[type="range"] {
  accent-color: var(--accent);
}
button {
  accent-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}
button:hover {
  background: var(--surface-hover);
}
/* The editable fields of the card, raised above it. A form field inherits no
   font of its own, so the font is named here as well. */
input[type="number"],
input[type="text"],
input[type="file"],
textarea {
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  font-family: inherit;
  font-size: 0.85rem;
}
input[type="number"]::placeholder,
input[type="text"]::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
input[type="number"]:hover,
input[type="text"]:hover,
input[type="file"]:hover,
textarea:hover {
  background: var(--field-bg-hover);
  border-color: color-mix(in srgb, var(--pattern-accent, var(--accent)) 45%, var(--field-border));
}
input[type="number"]:focus-visible,
input[type="text"]:focus-visible,
input[type="file"]:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--pattern-accent, var(--accent));
  outline-offset: 2px;
}