/* Ad-supported utility page. Priorities, in order:
   1. Answer visible instantly, no layout shift
   2. Ad slots with reserved height so CWV stays green
   3. Readable on a phone in a kitchen, one-handed */

:root {
  --ink: #1a1c1a;
  --muted: #5c645c;
  --line: #dfe3df;
  --bg: #fff;
  --ok: #1c6b3c;
  --ok-bg: #e8f4ec;
  --mid: #8a5a00;
  --mid-bg: #fdf1dc;
  --bad: #9b2226;
  --bad-bg: #fbeaea;
  --max: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8ebe8; --muted: #a3aca3; --line: #333833; --bg: #141614;
    --ok: #7fd4a0; --ok-bg: #16301f; --mid: #e8b35c; --mid-bg: #302410;
    --bad: #f08e91; --bad-bg: #2f1618;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main { max-width: var(--max); margin: 0 auto; padding: 0 1.1rem 4rem; }

header.site, footer.site {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem 1.1rem;
  font-size: .9rem;
}
footer.site { border-top: 1px solid var(--line); margin-top: 3rem; color: var(--muted); }
.brand { font-weight: 650; text-decoration: none; color: var(--ink); }

h1 { font-size: 1.75rem; line-height: 1.25; margin: .6rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.4rem 0 .3rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
h4 { font-size: .98rem; margin: 0 0 .2rem; }
a { color: inherit; }

/* The answer block. Everything else on the page is optional reading. */
.answer {
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: var(--bg);
}
.answer .verdict { font-size: 1.35rem; font-weight: 700; margin: 0 0 .3rem; }
.answer .short { margin: 0; }
.v-yes, .v-usually-yes { border-left-color: var(--ok); background: var(--ok-bg); }
.v-yes .verdict, .v-usually-yes .verdict { color: var(--ok); }
.v-conditional { border-left-color: var(--mid); background: var(--mid-bg); }
.v-conditional .verdict { color: var(--mid); }
.v-usually-no, .v-no { border-left-color: var(--bad); background: var(--bad-bg); }
.v-usually-no .verdict, .v-no .verdict { color: var(--bad); }

.pill {
  font-size: .72rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; padding: .15rem .45rem; border-radius: 999px;
}
.pill.ok  { background: var(--ok-bg);  color: var(--ok); }
.pill.mid { background: var(--mid-bg); color: var(--mid); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }

.blurb { color: var(--muted); font-size: .93rem; margin: .2rem 0 .6rem; }
.src { font-size: .85rem; color: var(--muted); }
.caveat { font-size: .9rem; color: var(--muted); margin: .2rem 0 0; }

.layer { border-top: 1px solid var(--line); padding-top: .3rem; }
.alt { margin: 0 0 1.1rem; }

ul.checks, ul.mistakes { padding-left: 1.1rem; }
ul.checks li, ul.mistakes li { margin: .3rem 0; }

.verified {
  margin-top: 2.5rem; padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--muted);
}

.related { margin-top: 2rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.related h2 { font-size: .95rem; margin: 0 .3rem 0 0; }
.related a { font-size: .9rem; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }

ul.index { list-style: none; padding: 0; }
ul.index li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
ul.index a { text-decoration: none; font-weight: 550; }
.lede { color: var(--muted); }

/* Reserved height stops cumulative layout shift when the ad loads.
   Never let an ad slot size itself from its content. */
.ad {
  min-height: 280px;
  margin: 2rem 0;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
}
@media (min-width: 700px) { .ad { min-height: 250px; } }
.ad-note { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }