/*
 * checker-page.css — shared furniture for the ProseMirror checker pages:
 * /grammar-check, /spell-check, /punctuation-check, /proofreading-checker.
 *
 * These four pages are the same tool with different copy, example text and
 * edit endpoint, so the layout lives here instead of being copy-pasted into
 * each template's <style> block.
 *
 * Load AFTER editor.css — several rules here deliberately override it
 * (`#count-container`, `#ctrl-buttons .btn`, the `.accordion` block, and its
 * global `h2 { margin-top: 2.5em }`). Component vocabulary follows
 * sapling-ds.css; anything genuinely page-specific stays in the template.
 */

/* ---------------------------------------------------------------------------
 * Tool panel
 *
 * Lifted over the bottom of the hero, so the hero needs enough bottom padding
 * to sit behind it (the templates add it). The editor's own markup and IDs are
 * untouched — the ProseMirror build and the SDK bind to them — so the tool is
 * restyled in place rather than rewrapped.
 * ------------------------------------------------------------------------- */
.checker-tool {
  max-width: 900px;
  margin: -3.5rem auto 0;
  position: relative;
  z-index: 1;
  padding: 1.5rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-panel);
  background: #fff;
  box-shadow: 0 18px 40px rgb(16 20 45 / 12%);
}
.checker-tool #count-container {
  margin-top: 0.85rem;
  color: var(--ds-ink-soft);
  font-size: 0.9rem;
}
.checker-tool #ctrl-buttons {
  gap: 0.5rem;
  margin: 1rem 0 0;
  justify-content: center;
}
/* .btn-light here is the neutral tool control; give it a resting border, since
   main2.css's global `.btn { border: 0 }` otherwise leaves it borderless. */
.checker-tool .btn-light,
.checker-tool a.btn-light {
  border: 1px solid #c9cfe6;
  border-radius: var(--border-radius-lg);
  background: #fff;
  color: var(--ds-ink-soft);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
}
.checker-tool .btn-light:hover,
.checker-tool a.btn-light:hover {
  background: #f2f4fb;
  border-color: var(--sapling-blue);
  color: var(--sapling-blue);
}
/* Per-language disclaimer on /lang/<lang>. */
.checker-tool .checker-note {
  width: 100%;
  margin: 0.75rem 0 0;
  text-align: right;
  font-size: 0.82rem;
  color: var(--ds-ink-soft);
}

/* Romanization readout (pinyin / romaji) on /lang/chinese and /lang/japanese.
   A full-width block under the counts, not an inline token: sapling-ds.css's
   `.s-page code` chip (0.88em, muted blue) stacked on the old 0.82rem
   disclaimer sizing left it at ~11.5px and easy to miss. `.s-page` is in the
   selector so this outranks that rule. Hidden until the first result lands
   (lang.html toggles `is-empty`). */
.checker-tool .checker-romanized {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--border-radius-lg);
  background: var(--ds-surface);
  text-align: left;
}
.checker-tool .checker-romanized.is-empty {
  display: none;
}
.checker-tool .checker-romanized-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
}
.s-page .checker-tool .checker-romanized code {
  flex: 1 1 auto;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ds-ink);
  overflow-wrap: anywhere;
}
.checker-tool .checker-subnote {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ds-ink-soft);
}

/* The native-language name of the tool, above the hero title on /lang/<lang>.
   Kept as a heading for SEO — it is the page's main keyword phrase — but sized
   as an eyebrow. `margin: 0` also beats editor.css's global `h2 { margin-top:
   2.5em }`. */
.checker-hero-native {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ds-accent-soft);
}

/* ---------------------------------------------------------------------------
 * Section content
 * ------------------------------------------------------------------------- */

/* Language pills — replaces the stacked .list-group the pages used to render
   these as, which was a 200px-wide column of blue-tinted rows. */
.checker-langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding: 0;
  list-style: none;
  margin: 0;
}
.checker-langs a {
  display: inline-block;
  padding: 0.5em 1.1em;
  border: 1px solid var(--ds-line);
  border-radius: var(--border-radius-pill);
  background: #fff;
  color: var(--sapling-blue);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.checker-langs a:hover {
  border-color: var(--sapling-blue);
  background: #f2f4fb;
  text-decoration: none;
}

/* English varieties — flag chips. Content-sized and wrapping rather than a
   fixed 4-up grid: a rigid quarter-width column is narrower than "American
   English" at most viewports, which broke every label onto two lines. */
.checker-varieties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
  /* Wide enough for all four chips on one line once they are content-sized. */
  max-width: 54rem;
  margin: 0 auto;
}
.checker-varieties li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--border-radius-lg);
  background: #fff;
  font-size: 0.92rem;
  white-space: nowrap;
}

/* Institution logos. */
.checker-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem;
  padding: 1.75rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--border-radius-lg);
  background: #fff;
}
.checker-credit img {
  filter: grayscale(100%);
  opacity: 0.75;
}

/* Checklist of what the tool covers (grammar check only, harmless elsewhere). */
.checker-checklist {
  gap: 0.5rem 1.25rem;
}
.checker-checklist .form-check-inline {
  margin-right: 0;
}

/* ---------------------------------------------------------------------------
 * Accordions
 *
 * Scoped to `.s-page .accordion` rather than an id, so it covers both the
 * "Features & Benefits" accordion (#accordionExample on all four pages) and
 * the separate FAQ accordion on /spell-check without either template needing
 * to know the selector. (0,2,x) beats editor.css's (0,1,x) equivalents.
 * ------------------------------------------------------------------------- */
.s-page .accordion {
  max-width: 48rem;
  margin: 0 auto;
}
.s-page .accordion .card {
  border: 1px solid var(--ds-line);
  border-radius: var(--border-radius-lg) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.s-page .accordion .card-header {
  padding: 0;
  border-bottom: 0;
  background: #fff;
}
.s-page .accordion .card-header h2,
.s-page .accordion .card-header h3 {
  margin: 0;
  padding-top: 0;
}
.s-page .accordion .btn-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  text-align: left;
  color: var(--ds-ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: normal;
}
.s-page .accordion .btn-link:hover,
.s-page .accordion .btn-link:focus {
  color: var(--sapling-blue);
  text-decoration: none;
}
.s-page .accordion .btn-link::after {
  content: "\f078"; /* chevron-down */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.7rem;
  color: var(--sapling-blue);
  transition: transform var(--transition-fast);
  flex: 0 0 auto;
}
.s-page .accordion .btn-link[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.s-page .accordion .card-body {
  padding: 0 1.25rem 1.15rem;
  margin: 0;
  color: var(--ds-ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}
.s-page .accordion .card-body ul {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .checker-tool {
    margin-top: -2rem;
    padding: 1rem;
  }
}