/* ============================================================================
   CSS Box-Shadow 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 — violet, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #a467e9  5.13:1 on --bg   4.73:1 on --surface   5.31:1 on --bg-sunk
     light #4a0896 11.40:1 on --bg  11.89:1 on --surface  10.45:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #a467e9; --accent-dim: rgba(164, 103, 233, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #4a0896; --accent-dim: rgba(74, 8, 150, 0.10); }
}

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

/* ============================================================================
   Tool shell
   ========================================================================= */

.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-size: 1.05rem;
}

.presets { margin-bottom: 1.5rem; }
.presets .field-label { margin-bottom: 0.5rem; }

.shadow-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 46rem) {
  .shadow-body { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- layers -- */

.layers { display: grid; gap: 0.9rem; margin-bottom: 0.9rem; }

.layer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem 1.1rem;
}

.layer-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.layer-title {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  margin-right: auto;
}

.inset-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  cursor: pointer;
}
.inset-toggle input { width: auto; cursor: pointer; }

.layer-remove {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  cursor: pointer;
}
.layer-remove:hover { color: var(--err); border-color: var(--err); }

.layer-grid {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.rangerow { display: flex; align-items: center; gap: 0.6rem; }
.rangerow input[type="range"] { flex: 1 1 auto; width: auto; min-width: 0; }
.rangerow input[type="range"] { accent-color: var(--accent); }

.num-side {
  flex: 0 0 4.2rem;
  width: 4.2rem;
  text-align: right;
  padding: 0.35rem 0.5rem;
}

.colorrow { display: flex; align-items: center; gap: 0.6rem; }
.colorrow input[type="color"] {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.375rem;
  padding: 0.2rem;
}
.colorrow .field { flex: 1 1 auto; min-width: 0; }
.colorrow .field .rangerow { margin: 0; }

.add-layer-btn { width: 100%; margin-top: 0.15rem; }

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

.preview-col { display: grid; gap: 1.25rem; }

.stage {
  background: var(--bg-sunk);
  background-image:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 14rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

.sample {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 14px;
  background: var(--surface);
}

.output { display: grid; gap: 0.5rem; }
.output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.css-out {
  margin: 0;
  width: 100%;
  max-width: none;
  min-height: 3rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Article furniture — long-tail gallery reuses these classes
   ========================================================================= */

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

.formula, .callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
}
.formula {
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre;
}
.callout {
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.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; }

/* -------------------------------------------------------- example gallery -- */
/* used by css-box-shadow-examples.html */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.gcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  display: grid;
  gap: 0.85rem;
}

.gcard .stage {
  min-height: 8rem;
  padding: 1.5rem;
}
.gcard .sample { width: 4.5rem; height: 4.5rem; border-radius: 10px; }

.gcard h3 { margin: 0; font-size: 0.9375rem; }

.gcard pre {
  margin: 0;
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.gcard .btn-quiet { justify-self: start; font-size: 0.75rem; padding: 0.4rem 0.7rem; }

.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;
}