/* ============================================================================
   CSS Gradient Generator — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — sky blue, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #61c0ef  9.27:1 on --bg   8.55:1 on --surface   9.59:1 on --bg-sunk
     light #086796  5.94:1 on --bg   6.19:1 on --surface   5.44:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root {
  --accent:     #61c0ef;
  --accent-dim: rgba(97, 192, 239, 0.14);
}
@media (prefers-color-scheme: light) {
  :root {
    --accent:     #086796;
    --accent-dim: rgba(8, 103, 150, 0.10);
  }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

/* base has no [hidden] override, and .field's own `display: grid` (an author
   rule) otherwise beats the user-agent stylesheet's [hidden] rule, so the
   shape/position fields would stay visible while empty. Same fix every other
   tool on this site uses. */
[hidden] { display: none !important; }

/* ============================================================================
   The builder
   A recessed console (--bg-sunk) holding the controls and the raised preview
   / output modules (--surface) — same "instrument bay" pattern the rest of
   the site uses for its working tool area.
   ========================================================================= */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
}

.tool > h2 {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.builder-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
}
@media (max-width: 52rem) {
  .builder-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- type row -- */

.type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

/* ---------------------------------------------------------- angle field -- */

.angle-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.35rem;
}
.angle-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
}
.angle-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-dim);
}
.angle-num input[type="number"] {
  width: 4.5rem;
  text-align: right;
  font-family: var(--mono);
}

.shape-position-row {
  display: grid;
  gap: 0.9rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  margin-top: 1.1rem;
}

/* ------------------------------------------------------------------ stops -- */

.stops-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.4rem;
  margin-bottom: 0.6rem;
}
.stops-heading h3 {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.stops-list { display: grid; gap: 0.6rem; }

.stop-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.6rem;
}
@media (max-width: 26rem) {
  .stop-row { grid-template-columns: auto 1fr; grid-template-areas: "swatch hex" "pos remove"; }
  .stop-row .stop-position-wrap { grid-area: pos; }
  .stop-row .stop-remove { grid-area: remove; justify-self: end; }
}

.stop-row input[type="color"] {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.2rem;
}

.stop-hex {
  width: 100%;
  min-width: 5.5rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stop-hex[aria-invalid="true"] { border-color: var(--err); }

.stop-position-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}
.stop-position {
  width: 4rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  text-align: right;
}
.stop-position-wrap span { color: var(--text-dim); font-size: 0.8125rem; }

.stop-remove {
  flex: 0 0 auto;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.stop-remove:hover:not(:disabled) { color: var(--err); border-color: var(--err); }
.stop-remove:disabled { opacity: 0.4; cursor: not-allowed; }

.stops-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------- presets -- */

.presets {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.presets h3 {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.preset-swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------- preview -- */

.preview-col { display: grid; gap: 1rem; align-content: start; }

.preview {
  position: relative;
  min-height: 14rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 40rem) { .preview { min-height: 18rem; } }

/* ----------------------------------------------------------------- output -- */

.output-block { display: grid; gap: 0.5rem; }
.output-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.output-label span:first-child {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.copy-status {
  font-size: 0.75rem;
  color: var(--ok);
  min-height: 1.1em;
}

.output-code {
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 3.6rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  background: var(--bg-sunk);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
}

.output-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ============================================================================
   Article furniture
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.formula {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre;
}

.swatch-strip {
  display: flex;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  margin: 0.75rem 0 1rem;
}

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}