/* ============================================================================
   Invisible Character / Blank Text — 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 — spring green, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #6def61  12.8:1 on --bg   11.8:1 on --surface   13.2:1 on --bg-sunk
     light #2e7728   5.3:1 on --bg    5.5: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: #6def61; --accent-dim: rgba(109, 239, 97, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #2e7728; --accent-dim: rgba(46, 119, 40, 0.10); }
}

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

/* base has no visually-hidden helper */
.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;
}
.offscreen-copy { position: fixed; top: -1000px; left: 0; opacity: 0; }

/* ============================================================================
   The character grid — one card per copyable blank/invisible character
   ========================================================================= */

.tool { margin-bottom: 1.5rem; }

.char-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  margin-top: 1.1rem;
}

.char-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.char-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.char-name { font-weight: 600; color: var(--text); }
.char-codepoint {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-faint);
}

/* the bordered "fence" preview — the whole point is to show WHERE the
   invisible character sits, since the character itself draws nothing */
.char-fence {
  font-family: var(--mono);
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  background: var(--bg-sunk);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  overflow-wrap: anywhere;
  color: var(--text);
}

.char-width-note { font-size: 0.8125rem; color: var(--text-dim); }
.char-best-for { font-size: 0.875rem; color: var(--text-dim); margin: 0; }

.char-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.char-copy-status {
  font-size: 0.8125rem;
  color: var(--ok);
  min-height: 1.3em;
}
.char-copy-status.is-err { color: var(--err); }

/* ============================================================================
   The generator panel — N copies of one chosen character
   ========================================================================= */

.gen-fields {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  margin-top: 1.1rem;
  margin-bottom: 0.25rem;
}
.gen-fields select,
.gen-fields input[type="number"] { background-color: var(--surface); }

#gen-clamp-note:not([hidden]) { color: var(--warn); border-color: var(--warn); }

.output-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.output-head .hint-inline { font-weight: 400; color: var(--text-faint); font-size: 0.8em; }

#gen-count-readout {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.gen-preview {
  font-family: var(--mono);
  font-size: 1.125rem;
  background: var(--bg-sunk);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  margin: 0.6rem 0;
  overflow-wrap: anywhere;
  min-height: 1.8em;
}

#gen-output {
  min-height: 6rem;
  resize: vertical;
  background: var(--bg-sunk);
  line-height: 1.6;
  font-size: 0.875rem;
}

#gen-copy-status { font-size: 0.8125rem; color: var(--ok); min-height: 1.4em; }
#gen-copy-status.is-err { color: var(--err); }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.note { margin: 0.75rem 0; }

/* ============================================================================
   Article furniture shared with other tools
   ========================================================================= */

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

.example {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  margin: 0 0 1rem;
}
.example h3 { margin-top: 0; }
.example p:last-child { margin-bottom: 0; }

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

/* base.css only styles lists inside .prose; sections here use bare <ul>/<ol> */
main ul, main ol { padding-left: 1.25em; margin: 0 0 1.1em; }
main li { margin-bottom: 0.4em; }