/* ============================================================================
   Zalgo / Cursed Text 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  #9970e1   5.2:1 on --bg    4.8:1 on --surface    5.4:1 on --bg-sunk
     light #3c0896  12.1:1 on --bg   12.6:1 on --surface   11.1:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #9970e1; --accent-dim: rgba(153, 112, 225, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #3c0896; --accent-dim: rgba(60, 8, 150, 0.10); }
}

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

/* ============================================================================
   The generator — two panes (plain / cursed) over intensity + mark toggles.
   ========================================================================= */

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

.panes {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  margin-bottom: 1.25rem;
}

.pane textarea {
  display: block;
  width: 100%;
  min-height: 11rem;
  resize: vertical;
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.6;
  background: var(--surface);
  tab-size: 4;
  overflow-wrap: anywhere;
}
.pane textarea[readonly] { color: var(--text); }

.pane-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ------------------------------------------------------------- controls -- */

.controls {
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  padding: 1rem 0;
  margin-bottom: 0.25rem;
  border-top: 1px solid var(--line);
}

.intensity-field label {
  margin-bottom: 0.5rem;
}
.intensity-field #intensity-label {
  color: var(--accent);
  font-weight: 700;
}

input[type="range"] {
  width: 100%;
  margin: 0.3rem 0 0.65rem;
  accent-color: var(--accent);
}

.intensity-field .chips { margin-top: 0.1rem; }

.opt-group {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}
.opt {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.9375rem;
  cursor: pointer;
}
.opt input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
  accent-color: var(--accent);
}
.opt-hint {
  color: var(--text-faint);
  font-size: 0.8125rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.copy-status {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ok);
}
.copy-status.is-err { color: var(--err); }

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

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

.mark-groups {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin: 1rem 0 1.5rem;
}
.mark-groups > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.05rem;
}
.mark-groups h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}
.mark-groups p { margin: 0; font-size: 0.9375rem; color: var(--text-dim); }
.mark-sample {
  display: block;
  font-family: var(--mono);
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

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

.example,
.pagelinks a {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.example { margin: 0 0 1rem; }
.example h3 { margin-top: 0; }
.example p:last-child { margin-bottom: 0; }
.example .mark-sample { font-size: 1.25rem; word-break: break-word; }

.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; }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }
.pagelinks a:hover { border-color: var(--accent); }

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