/* ============================================================================
   Discord Font 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 — mint green, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #61efc9  13.2:1 on --bg   12.2:1 on --surface   13.7:1 on --bg-sunk
     light #287761   5.1:1 on --bg    5.3:1 on --surface    4.7:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root {
  --accent: #61efc9;
  --accent-dim: rgba(97, 239, 201, 0.14);
}
@media (prefers-color-scheme: light) {
  :root {
    --accent: #287761;
    --accent-dim: rgba(40, 119, 97, 0.10);
  }
}

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

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

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

#df-input {
  min-height: 3.5rem;
  resize: vertical;
  font-size: 1rem;
}

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

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

.df-rows {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

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

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

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

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

/* the whole point of this tool is the glyphs — give the output row more
   room than a normal readout so decorative Unicode faces (which often
   render slightly smaller than the system font at the same declared size)
   stay legible and easy to eyeball before copying */
.df-row-out {
  min-height: 1.9em;
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border-radius: var(--radius-sm);
}
.df-row-out:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.df-row-out:empty::before {
  content: "—";
  font-size: 0.9375rem;
  color: var(--text-faint);
}

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

/* ============================================================================
   Code-block helper — visually a distinct, quieter module: it produces plain
   backtick-wrapped ASCII, not a fancy Unicode face, and should not compete
   with the ten style rows above it for attention.
   ========================================================================= */

.df-codeblock {
  margin-bottom: 2.5rem;
}
.df-codeblock .df-row-label { margin-bottom: 0.5rem; }
.df-codeblock .note { margin-bottom: 1rem; max-width: 56ch; }
.df-codeblock .toolbar {
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: none;
  justify-content: flex-start;
}
.df-codeblock .btn { font-family: var(--mono); }

/* ============================================================================
   Article furniture — reference table, examples, 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); }

/* .formula is a <div> with white-space: pre, so base's `pre` rule can't reach it */
.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;
}

/* a Unicode-styled word sitting inline in prose or a table cell — bigger than
   body text so the decorative face is actually legible at a glance, same
   reasoning as .df-row-out in the live tool above */
.df-sample { font-size: 1.1875rem; }

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

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

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