/* ============================================================================
   Lorem Ipsum 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 — dull olive-yellow, measured against base.css surfaces (WCAG
   relative luminance):
     dark  #efef61  15.48:1 on --bg   14.28:1 on --surface   16.02:1 on --bg-sunk
     light #6f6f25   5.06:1 on --bg    5.28:1 on --surface    4.64:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #efef61; --accent-dim: rgba(239, 239, 97, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #6f6f25; --accent-dim: rgba(111, 111, 37, 0.10); }
}

/* tool-specific rules below */

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

/* ---------------------------------------------------------------- tool -- */

.lig-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.lig-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
}
.lig-check input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.lig-format-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.25rem; }

.lig-copy-status {
  font-size: 0.8125rem;
  color: var(--text-dim);
}

.lig-output-field { margin-top: 1.25rem; }

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

.lig-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------- prose -- */

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

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

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

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