/* Plain-Language Checker. The same look as QR Code Maker and Sign Maker (navy bar, red and white
   stripe), kept in this folder so the tool can move to its own repo on its own. System fonts only:
   nothing to download, so the page works the moment it opens. */
:root {
  --navy: #1b2a4a; --red: #b22234; --ink: #1d2433; --muted: #59627a; --line: #d5dae3; --bg: #f3f5f9; --card: #fff;
  --warnbg: #fff7e0; --warnline: #c99a1a; --okbg: #e8f4ea; --okline: #2e7d32;
  --longbg: #fff1b8; --jbg: #fde2e4; --jline: #b22234; --pline: #2f5fb8; --flash: #ffd24d; --link: #1b2a4a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8ecf3; --muted: #a9b2c2; --line: #3a4458; --bg: #141a26; --card: #1e2636;
    --warnbg: #3a3218; --okbg: #1d3322; --longbg: #4a3f12; --jbg: #4d2228; --jline: #ff8a95; --pline: #8fb3ff; --flash: #8a6d00; --link: #9fb7ea;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e8ecf3; --muted: #a9b2c2; --line: #3a4458; --bg: #141a26; --card: #1e2636;
  --warnbg: #3a3218; --okbg: #1d3322; --longbg: #4a3f12; --jbg: #4d2228; --jline: #ff8a95; --pline: #8fb3ff; --flash: #8a6d00; --link: #9fb7ea;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 16px; overflow-wrap: anywhere; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.mast { background: var(--navy); color: #fff; }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: 56px; gap: 4px 12px; padding-top: 6px; padding-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.brand svg { width: 24px; height: 24px; flex: none; }
.tool { font-weight: 700; opacity: .9; }
/* Right side of the header (Fred, 3:44 PM ET 11-05): the app's own buttons, then the account badge,
   then the 9 dots. Signed in, suite-look.js moves the tool's name to the title and hides .tool. */
.who { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.stripe { height: 8px; background: repeating-linear-gradient(90deg, var(--red) 0 40px, #fff 40px 52px); }
h1 { font-size: 28px; line-height: 1.2; margin: 18px 0 6px; }
h2 { font-size: 20px; margin: 0 0 10px; }
h3 { font-size: 16px; margin: 0 0 8px; }
.lede { margin: 0 0 12px; color: var(--muted); max-width: 70ch; }
.beta { margin: 16px 0 0; padding: 8px 12px; background: var(--warnbg); border-left: 4px solid var(--warnline); border-radius: 4px; font-size: 14px; }
.private { margin: 0 0 16px; padding: 10px 12px; background: var(--okbg); border-left: 4px solid var(--okline); border-radius: 4px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px 16px; margin: 0 0 16px; min-width: 0; }
label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 4px; }
label.inline { display: inline; margin: 0; font-size: 16px; font-weight: 400; }
textarea, input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); min-height: 44px; }
textarea { resize: vertical; min-height: 200px; line-height: 1.5; }
.hint { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
button { font: inherit; font-weight: 700; border-radius: 6px; padding: 10px 16px; min-height: 44px; cursor: pointer; border: 2px solid var(--navy); background: var(--navy); color: #fff; }
button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
button.link { background: none; border: 0; padding: 4px 0; min-height: 32px; color: var(--link); text-decoration: underline; font-weight: 400; }
button.use { padding: 6px 12px; min-height: 40px; font-size: 15px; }
button:disabled { opacity: .5; cursor: default; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button:not(.secondary):not(.link) { background: #3b5b9a; border-color: #3b5b9a; } }
:root[data-theme="dark"] button:not(.secondary):not(.link) { background: #3b5b9a; border-color: #3b5b9a; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #4d7bd6; outline-offset: 2px; }
.status { min-height: 1.5em; margin: 8px 0 0; font-size: 15px; }
.keep { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.keep .hint { margin-top: 0; }
.keep .hint.warnline { color: var(--ink); background: var(--warnbg); border-left: 4px solid var(--warnline); border-radius: 4px; padding: 6px 10px; }

/* The score */
.score { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.grade { border-radius: 8px; padding: 12px 14px; border: 2px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.grade .small { font-size: 14px; color: var(--muted); }
.grade b { font-size: 40px; line-height: 1.1; }
.grade.good { border-color: var(--okline); background: var(--okbg); }
.grade.fair { border-color: var(--warnline); background: var(--warnbg); }
.grade.hard { border-color: var(--red); background: var(--jbg); }
.about p { margin: 0 0 8px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.stats div { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.stats dt { font-size: 13px; color: var(--muted); }
.stats dd { margin: 0; font-weight: 700; }
details { margin-top: 12px; }
summary { cursor: pointer; font-weight: 700; color: var(--link); min-height: 32px; }
details p { max-width: 75ch; }

/* What to fix */
.opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.opts input { width: 5.5em; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; margin: 10px 0; }
.fix { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.marked { white-space: pre-wrap; border: 1px solid var(--line); border-radius: 6px; padding: 12px; max-height: 70vh; overflow-y: auto; line-height: 1.7; }
.m-long { background: var(--longbg); }
mark { color: inherit; background: none; }
mark.m-jargon, .legend .m-jargon { background: var(--jbg); border-bottom: 2px solid var(--jline); }
mark.m-passive, .legend .m-passive { border-bottom: 2px dashed var(--pline); }
.legend .m-long { padding: 0 2px; }
.marked .flash, .marked .flash mark { background: var(--flash); }
.findings { margin: 8px 0 0; padding: 0 0 0 1.5em; }
.findings li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.findings q { font-style: italic; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); }
.k-long .tag { background: var(--longbg); }
.k-jargon .tag { background: var(--jbg); }
.k-passive .tag { border-color: var(--pline); }
.tip { display: block; font-size: 14px; color: var(--muted); margin: 4px 0; }
.shorter { margin: 8px 0 0; padding: 8px 10px; border-left: 4px solid var(--okline); background: var(--okbg); border-radius: 4px; }
.shorter blockquote { margin: 6px 0 8px; font-style: normal; }
.meta { font-size: 14px; color: var(--muted); }
.next { margin-top: 14px; padding: 10px 12px; border: 2px solid var(--warnline); background: var(--warnbg); border-radius: 8px; }
.next h3 { margin: 0; }
.next ol { margin: 8px 0 0; padding-left: 1.5em; }
.next li { margin: 0 0 10px; }
.next q { font-style: italic; }
.next blockquote { margin: 4px 0 8px; padding: 6px 10px; background: var(--card); border-left: 4px solid var(--okline); border-radius: 4px; }
.good { padding: 10px 12px; background: var(--okbg); border-left: 4px solid var(--okline); border-radius: 4px; }
.tips ul { margin: 0; padding-left: 1.2em; }
.tips li { margin: 4px 0; }
.foot { margin-top: 32px; padding: 18px 0 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot a { color: inherit; }

@media (max-width: 820px) {
  .fix { grid-template-columns: 1fr; }
  .marked { max-height: 50vh; }
}
@media (max-width: 560px) {
  h1 { font-size: 24px; }
  .score { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buttons button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print {
  .mast, .stripe, .beta, .buttons, .keep, .foot, .opts, details { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 0; }
  .marked { max-height: none; overflow: visible; }
}

/* Suite page-width standard (task 75, Fred 11-05): the header runs the full screen width with
   24px sides, like Poll Worker Management and the Task Tracker; the tool itself (one form and
   its preview) stays centered but may use up to 1440px. It used to stop at 1180px (curbside
   1040px), which left the header's logo floating mid-screen on a wide monitor. */
.wrap { max-width: 1440px; padding-left: 24px; padding-right: 24px; }
.mast .wrap { max-width: none; }
@media (max-width: 640px) { .wrap { padding-left: 12px; padding-right: 12px; } }