/* Schreibly shared visual components used across artboards */
/* NOTE: @import url("https://fonts.googleapis.com/...") REMOVED — no third-party network calls.
   Font stacks fall back to system fonts via --font-sans / --font-display in tokens.css. */

.sch-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--sch-navy);
  letter-spacing: -0.01em;
}
.sch-logo img { height: 1em; width: auto; display: block; }

/* Suggestion-card composition seen in the banner */
.sch-suggestion-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--sch-line-2);
}
.sch-line { height: 8px; background: var(--sch-line); border-radius: 999px; }
.sch-line.short { width: 60%; }
.sch-line.shorter { width: 40%; }

.sch-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--sch-line);
  color: var(--sch-blue); font-weight: 600;
  font-family: var(--font-sans);
}
.sch-pill.bad { color: var(--sch-coral); background: #FFF1F1; border-color: #FBD5D7; }
.sch-pill.good { color: var(--sch-mint); background: #E8FBF6; border-color: #BFEEDE; }

.sch-underline-bad  { color: var(--sch-coral); text-decoration: underline; text-decoration-color: var(--sch-coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sch-underline-good { color: var(--sch-mint);  text-decoration: underline; text-decoration-color: var(--sch-mint);  text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Buttons */
.sch-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none;
}
.sch-btn-primary { background: var(--sch-blue); color: #fff; }
.sch-btn-primary:hover { background: var(--sch-blue-2); color: #fff; }
.sch-btn-ghost   { background: transparent; color: var(--sch-navy); border-color: var(--sch-line); }
.sch-btn-ghost:hover { background: var(--sch-bg-2); color: var(--sch-navy); }