/* ============================================================================
   Fancy 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 — green, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #61ef6b  12.7:1 on --bg   11.7:1 on --surface   13.1:1 on --bg-sunk
     light #28772d   5.3:1 on --bg    5.6:1 on --surface    4.9:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root {
  --accent: #61ef6b;
  --accent-dim: rgba(97, 239, 107, 0.14);
}
@media (prefers-color-scheme: light) {
  :root {
    --accent: #28772d;
    --accent-dim: rgba(40, 119, 45, 0.10);
  }
}

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

/* base has no visually-hidden helper; table captions need one */
.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;
}

/* ============================================================================
   The tool
   ========================================================================= */

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

#ft-input {
  min-height: 4.5rem;
  resize: vertical;
  font-family: var(--mono);
  font-size: 0.9375rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 0.9rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.ft-counts {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.ft-rows {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.ft-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
}

.ft-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.ft-row-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ft-copy {
  flex: 0 0 auto;
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  min-width: 4.75rem;
}

/* Fancy glyphs run larger than the site's normal .readout use (a math-
   alphabet or circled character needs more visual room than a digit to read
   clearly), and unlike a calculator's answer this text is naturally
   multi-line, so the usual single-line readout treatment is relaxed. */
.ft-row-out {
  min-height: 1.6em;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border-radius: var(--radius-sm);
}
.ft-row-out:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ft-row-out:empty::before {
  content: "—";
  color: var(--text-faint);
}

/* off-screen textarea used only as the execCommand('copy') fallback target */
.ft-offscreen {
  position: fixed;
  top: -9999px;
  left: -9999px;
}

/* ============================================================================
   Article furniture — reference table, examples, callouts, FAQ links
   ========================================================================= */

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

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

.tag-pass { color: var(--ok);  font-weight: 600; }
.tag-fail { color: var(--err); font-weight: 600; }

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

td .mono, th .mono { white-space: nowrap; }