/* App pages that wear the public site skin (the free review form and result): the site stylesheet (/assets/style.css, style C) does the
   layout; this file adds the pieces only the app has (notices, file and text inputs, the review fragment classes pmcd-*, counters).
   Everything is scoped to body.skin-site. */
body.skin-site { --paper: #FBFAF6; --ink: #1B1D1F; --teal: #0B5E5E; --graphite: #51565B; --line: #E1DED6; --white: #FFFFFF; --teal-tint: #EAF2F1;
  --warn-bg: #FFF6DB; --warn-ink: #5C4400; --err: #8A1F11;
  margin: 0; background: var(--paper); color: var(--ink); }
.skin-site .dev-banner { background: var(--ink); color: var(--paper); font-size: 13px; padding: 6px 0; letter-spacing: .02em; }
.skin-site .dev-banner strong { color: #F4D35E; }
.skin-site .dev-banner a { color: var(--paper); }
.skin-site .reed-line { background: var(--teal-tint); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--graphite); padding: 8px 0; }
.skin-site .reed-line strong { color: var(--teal); }
.skin-site .brand img, .skin-site .brand-foot img { flex: none; }
.skin-site .brand-foot img { filter: brightness(0) invert(1); }
.skin-site .site-footer .fine-first { margin-bottom: 8px; }
.skin-site .site-footer .fine a { color: var(--paper); }
.skin-site .lang-switch { font-size: 14px; color: var(--graphite); white-space: nowrap; flex: none; }
.skin-site .lang-switch a { color: var(--graphite); padding: 0 2px; text-decoration: none; }
.skin-site .lang-switch a.active { color: var(--ink); font-weight: 700; }
.skin-site .lang-switch a:hover { color: var(--teal); text-decoration: underline; }
/* header at phone width (buyer review 9 Oct 2026): the site's head row (brand, desktop links from 900 px, button, Menu) plus the
   language switch; the brand name is hidden visually (kept for screen readers) below 560 px so the row fits 390 px in both languages */
.skin-site .site-header .head-row { flex-wrap: nowrap; }
.skin-site .site-header .brand { min-width: 0; }
.skin-site .nav-cta { margin-left: auto; }
@media (max-width: 559px) { .skin-site .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } }
@media (min-width: 900px) { .skin-site .nav-cta { margin-left: 0; } }
.skin-site h1 { font-size: 40px; }
.skin-site h2 { font-size: 28px; }
@media (min-width: 720px) { .skin-site h1 { font-size: 52px; } .skin-site h2 { font-size: 32px; } }
.skin-site .narrow { max-width: 820px; }
.skin-site .band { padding: 40px 0; }
.skin-site .hero { padding: 40px 0 24px; }
.skin-site .hero .lede, .skin-site p.lede { font-size: 19px; color: var(--graphite); max-width: 680px; }
.skin-site .notice { border-left: 4px solid var(--teal); background: var(--white); padding: 12px 16px; margin: 16px 0; border-radius: 0 10px 10px 0; }
.skin-site .notice.err { border-color: var(--err); color: var(--err); }
.skin-site .notice.warn { border-color: #C9A227; background: var(--warn-bg); color: var(--warn-ink); }
.skin-site .panel { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin: 24px 0; }
.skin-site .panel h2 { font-size: 26px; margin-top: 0; }
.skin-site .panel p:last-child { margin-bottom: 0; }
.skin-site form.review-form { display: grid; gap: 14px; max-width: 760px; }
.skin-site input[type=text], .skin-site input[type=file], .skin-site textarea {
  font: inherit; padding: 12px 14px; border: 1.5px solid var(--graphite); border-radius: 10px; background: var(--white); color: var(--ink); width: 100%; }
.skin-site textarea { min-height: 220px; resize: vertical; }
.skin-site .copybox { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
.skin-site label.field > span { font-weight: 700; }
.skin-site label.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 400; }
.skin-site .muted { color: var(--graphite); }
.skin-site .counter { display: inline-block; font-weight: 700; color: var(--teal); background: var(--white); border: 1.5px solid var(--teal); border-radius: 999px; padding: 4px 14px; margin: 4px 8px 4px 0; font-size: 15px; }
/* review fragment of the platform audit (classes pmcd-*) */
.skin-site .pmcd-review { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 10px 24px 22px; margin: 24px 0; }
.skin-site .pmcd-review h2 { font-size: 28px; }
.skin-site .pmcd-review h3 { font-size: 20px; margin-top: 1.2em; }
.skin-site .pmcd-group { margin: 20px 0; }
.skin-site .pmcd-lines { list-style: none; padding: 0; margin: 0; }
.skin-site .pmcd-line { border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 10px; padding: 12px 16px; margin: 12px 0; background: var(--paper); }
.skin-site .pmcd-line--risky { border-left-color: var(--err); }
.skin-site .pmcd-line--unsupported { border-left-color: #C9A227; }
.skin-site .pmcd-line--generic { border-left-color: var(--graphite); }
.skin-site .pmcd-line--ok { border-left-color: var(--teal); }
.skin-site .pmcd-line__class { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--graphite); }
.skin-site .pmcd-line__quote { margin: 8px 0; padding: 0 0 0 12px; border-left: 3px solid var(--line); font-style: italic; }
.skin-site .pmcd-line__reasons { margin: 8px 0; padding-left: 20px; font-size: 16px; }
.skin-site .pmcd-line__question { margin: 8px 0 0; }
.skin-site .pmcd-line__asks { font-weight: 700; color: var(--teal); }
.skin-site .pmcd-questions, .skin-site .pmcd-bridge { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 12px; }
.skin-site .pmcd-bridge__cta { display: inline-block; background: var(--teal); color: var(--white); padding: 10px 18px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.skin-site .pmcd-bridge__cta:hover { background: var(--ink); color: var(--white); }
.skin-site .pmcd-signature { font-weight: 700; margin-bottom: 0; }
.skin-site .pmcd-disclosure { color: var(--graphite); font-size: 14px; }
/* the Next block of the free review result (UX P0-9): three doors, then the optional email */
.skin-site .next-door { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.skin-site .next-email { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }