/* The free audit page.
   ============================================================================
   Its own stylesheet rather than more lines in styles.css: this page is the
   top of the funnel and will be iterated on far more often than the workspace,
   and a separate file means that iteration cannot break the app. */

.auditpage main { padding-bottom: 80px; }

/* ---- the ask ---- */
.au-hero {
  padding: clamp(50px, 8vw, 96px) var(--gutter) clamp(30px, 5vw, 56px);
  max-width: 900px; margin: 0 auto; text-align: center;
}
.au-hero h1 {
  font-size: clamp(2.625rem, 6.4vw, 5.125rem); line-height: .94; letter-spacing: -.06em; margin: 18px 0 24px;
}
.au-hero h1 em { color: var(--soft); }
.au-hero .lede { max-width: 640px; margin: 0 auto; }
.au-hero.done { padding-bottom: 24px; }
.au-hero.done h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); }

.au-form { max-width: 560px; margin: 36px auto 0; text-align: left; }
.au-form label { font-size:var(--t-sm); font-weight: 800; }
.au-form > div { display: flex; margin: 9px 0; }
.au-form input {
  min-width: 0; flex: 1; border: 1px solid var(--line); border-right: 0;
  border-radius: 999px 0 0 999px; padding: 15px 22px; background: #fff; font: inherit;
}
.au-form button {
  border-radius: 0 999px 999px 0; padding: 15px 26px; background: var(--ink); color: #fff; font-weight: 700;
}
.au-form button:disabled { opacity: .6; cursor: default; }
.au-form small { color: var(--soft); display: block; }

.au-error, .au-flag {
  max-width: 620px; margin: 20px auto 0; padding: 16px 20px;
  border: 1px solid #efd3bd; background: #fdf2ea; border-radius: 16px; text-align: left;
}
.au-error p, .au-flag p { margin: 6px 0 0; color: var(--soft); font-size:var(--t-base); line-height: 1.6; }
.au-flag { max-width: none; margin: 0 0 22px; }

/* ---- the wait ----
   Paced, not reported: the work happens in one call. Each line is dimmed until
   its turn and ticked when the next one starts, which is honest about ordering
   without claiming a thing was found. */
.au-progress { max-width: 600px; margin: 0 auto; padding: 0 20px 40px; }
.au-hero.running { padding-bottom: 20px; }
.au-hero.running h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
.au-hero.running .lede, .au-hero.running .tool-sample { display: none; }

/* ---- the report ---- */
/* The header is sticky, so whatever is scrolled to has to clear it. The margin
   goes on the element the script actually scrolls, which is the outer mount
   rather than the section inside it. */
#au-report { scroll-margin-top: 96px; }
.au-report { max-width: 1060px; margin: 0 auto; padding: 0 var(--gutter); }
.au-top h2 { font-size: clamp(1.875rem, 4vw, 2.875rem); letter-spacing: -.05em; margin: 8px 0 14px; }
.au-top .lede { font-size:var(--t-h4); max-width: 700px; }
.au-quote { font-size:var(--t-base); color: var(--soft); max-width: 700px; }
.au-quote q { color: var(--ink); }

.au-dials { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.au-dial {
  display: flex; align-items: center; gap: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px 28px;
}
.au-dial-num { display: flex; align-items: baseline; gap: 3px; }
.au-dial-num b { font-size: 3.5rem; letter-spacing: -.05em; line-height: 1; }
.au-dial-num small { font-size:var(--t-base); color: var(--soft); }
.au-dial p { margin: 5px 0 0; font-size:var(--t-sm); color: var(--soft); }
.au-dial.good { border-color: #c5e0ca; background: linear-gradient(180deg, #f4faf5, #fff); }
.au-dial.fair { border-color: #e6e2b8; background: linear-gradient(180deg, #fbfaee, #fff); }
.au-dial.poor { border-color: #efd3bd; background: linear-gradient(180deg, #fdf5ef, #fff); }

.au-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.au-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px; margin-bottom: 16px;
}
.au-card h3 { font-size:var(--t-h3); letter-spacing: -.03em; margin: 8px 0 10px; }
.au-lead { font-size:var(--t-base); line-height: 1.65; margin: 0 0 14px; }

.au-checks { list-style: none; padding: 0; margin: 0; }
.au-checks li { padding: 11px 0 11px 30px; border-top: 1px solid var(--line); position: relative; }
.au-checks li:first-child { border-top: 0; }
.au-checks li > .tick-dot { position: absolute; left: 0; top: 12px; }
.au-checks b { display: block; font-size:var(--t-sm); }
.au-checks span { display: block; font-size:var(--t-sm); color: var(--soft); line-height: 1.55; margin-top: 2px; }

/* ---- voice ---- */
.au-rules { display: grid; gap: 12px; margin: 16px 0; }
.au-rule { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: var(--paper); }
.au-rule b { font-size:var(--t-base); }
.au-rule blockquote {
  margin: 9px 0 0; padding-left: 13px; border-left: 3px solid var(--acid);
  font-size:var(--t-base); line-height: 1.6;
}
.au-rule small { display: block; margin-top: 7px; font-size:var(--t-sm); color: var(--soft); }
.au-voice em { font-style: normal; font-weight: 700; }

/* ---- keywords ---- */
.au-kw { list-style: none; padding: 0; margin: 0; }
.au-kw li { padding: 13px 0; border-top: 1px solid var(--line); }
.au-kw li:first-child { border-top: 0; }
.au-kw b { font-size:var(--t-base); }
.au-kw small { display: block; font-size:var(--t-xs); color: var(--soft); margin: 3px 0; }
.au-kw span { display: block; font-size:var(--t-sm); color: var(--soft); line-height: 1.55; }
/* The difficulty and intent tags sit in a row: the span rule above made each
   one a full-width bar. */
.au-kw small .au-tag { display: inline-block; margin: 2px 6px 2px 0; }
.au-tag {
  display: inline-block; font-size:var(--t-micro); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); margin-right: 5px;
}
.au-tag.low { background: var(--mint); border-color: #c5e0ca; }
.au-tag.high { background: var(--peach); border-color: #efd3bd; }

/* ---- communities ---- */
.au-subs { display: grid; gap: 12px; margin-top: 16px; }
.au-sub { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: var(--paper); }
.au-sub > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.au-sub b { font-size:var(--t-base); }
.au-sub small { font-size:var(--t-xs); color: var(--soft); }
.au-sub p { margin: 7px 0 0; font-size:var(--t-sm); line-height: 1.6; color: var(--soft); }
.au-sub blockquote {
  margin: 10px 0 0; padding-left: 13px; border-left: 3px solid var(--acid);
  font-size:var(--t-sm); line-height: 1.55; color: var(--soft);
}

/* ---- the ask at the end ---- */
.au-cta {
  background: var(--ink); color: var(--paper); border-radius: 26px;
  padding: clamp(30px, 5vw, 52px); margin: 26px 0;
}
.au-cta .eyebrow { color: #9f9f9f; }
.au-cta h3 { font-size: clamp(1.625rem, 3.4vw, 2.5rem); letter-spacing: -.04em; margin: 12px 0 16px; }
.au-cta > p { font-size:var(--t-md); line-height: 1.65; color: #d2d1ce; max-width: 720px; }
.au-cta-list { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; max-width: 760px; }
.au-cta-list li { font-size:var(--t-base); line-height: 1.6; color: #d2d1ce; padding-left: 20px; position: relative; }
.au-cta-list li:before { content: '\2192'; position: absolute; left: 0; color: var(--acid); }
.au-cta-list b { color: var(--paper); }
.au-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.au-primary, .au-secondary {
  display: inline-block; padding: 14px 26px; border-radius: 999px; font-weight: 700;
  font-size:var(--t-base); text-decoration: none;
}
.au-primary { background: var(--acid); color: var(--ink); }
.au-secondary { border: 1px solid #404040; color: var(--paper); }
.au-cta .small { color: #9f9f9f; margin-top: 14px; }

@media (max-width: 860px) {
  .au-dials, .au-two { grid-template-columns: 1fr; }
  .au-form > div { display: grid; gap: 8px; }
  .au-form input, .au-form button { border-radius: 999px; border-right: 1px solid var(--line); min-height: 52px; }
  .au-form button { border-color: var(--ink); }
}

/* A community Reddit would not let us check. Marked rather than dressed up
   with numbers we did not read. */
.au-unchecked { color: #a8510f; font-weight: 700; }

/* The header CTA is a link on this page, which has no workspace to open, and
   `.top nav a` would otherwise turn it grey on ink and shrink it. */
.top nav a.nav-cta { color: white; font-size: inherit; }
@media (max-width: 560px) { .top nav a.nav-cta { font-size: var(--t-xs); } }
.au-report h2:focus{outline:0} /* outline-ok: focused by script to announce the report, not by the reader */

/* Share this report: the image it will post, then the two ways to share. */
.au-share{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin:18px 0}
.au-share img{width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--line)}
.au-share b{font-size:var(--t-md)}
.au-share p{margin:4px 0 10px}
@media (max-width:640px){.au-share{grid-template-columns:1fr}}

/* A dated sample on each free tool page, run on Pointed's own site. */
.tool-sample{margin:14px 0 0;font-size:var(--t-sm)}
details.tool-sample{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px}
.tool-sample summary{cursor:pointer;font-weight:700}
.tool-sample pre.tool-out{white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;margin:10px 0 0}
.tool-sample-scores{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.tool-sample-scores div{display:grid;gap:4px;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px}
.tool-sample-scores small{color:var(--soft);line-height:1.5}
.tool-sample-list{margin:10px 0 0;padding-left:20px;display:grid;gap:4px}
@media (max-width:560px){.tool-sample-scores{grid-template-columns:1fr}}
/* The Hacker News line under the communities had no room above it. */
.au-subs + p { margin-top: var(--s-3); }