/* Everything a buyer or a student sees: the shop, an offer page, the
   thank-you page, the access page, the academy, the community and the
   scored quiz.
 *
 * Its own sheet because those pages belong to the seller, not to Hephus.
 * They used to load styles.css, which since the design pass is Hephus's
 * own voice — Bebas Neue in 9px capitals at wide tracking, black fills,
 * square corners. A seller's theme then had to win against it in the
 * cascade, which meant js/theme.js carried a dozen declarations whose only
 * job was undoing the admin, injected as a style tag at runtime so it
 * landed after the linked sheet. A cascade race decided by injection order
 * is not something to keep.
 *
 * Written against the theme variables from the start, so there is nothing
 * to undo. Every --ac-* carries a fallback, because these pages draw
 * before the theme module has loaded and a buyer should never see a naked
 * page: the fallbacks are the Studio theme, which is also what
 * academy_look() returns when a seller has not chosen.
 *
 * What is NOT here: the app shell, the sidebar, stat tiles, the marketing
 * page, charts. Those are Hephus's and live in styles.css. Funnel sections
 * are in funnel.css, because the seller's live page and the editor's
 * preview both need them.
 */

*{box-sizing:border-box} html,body{margin:0;padding:0}

body{
  background:var(--ac-paper,#FAF7F2);
  color:var(--ac-ink,#17140F);
  font-family:var(--ac-body,-apple-system,"Segoe UI",Helvetica,sans-serif);
  font-size:var(--ac-text,1.0625rem);
  line-height:var(--ac-lead,1.65);
  -webkit-font-smoothing:antialiased;
}
/* No underline by default, because most links on these pages are titles
   and buttons rather than words inside a sentence. Prose opts back in
   below, where an underline is the thing that says a word is a link. */
a{color:inherit;text-decoration:none}
p a,.awelcome a,.legal a{text-decoration:underline;text-underline-offset:2px}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--ac-display,Georgia,serif);font-weight:500;margin:0;line-height:1.15}
h1{font-size:var(--ac-h1,2.6rem);line-height:1.1}
h2{font-size:var(--ac-h2,1.7rem)}
h3{font-size:1.15rem}
.mute{color:var(--ac-mute,#8A8275)}
.small{font-size:var(--ac-small,.875rem)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.blur{filter:blur(5px);user-select:none}

/* ---------- layout ---------- */
/* A lesson gets the theme's reading measure. A shop does not: a measure
   is for prose, and applying it to a grid of products left the third card
   alone on a row with the page empty beside it. */
.student,.acad{max-width:var(--ac-measure,68ch);margin:0 auto;padding:0 20px 80px}
.store{max-width:980px;margin:0 auto;padding:0 20px 80px}
.store .brand{display:flex;align-items:center;gap:12px;padding:26px 0;flex-wrap:wrap}
.store .brand .n{font-family:var(--ac-display,Georgia,serif);font-size:var(--ac-h2,1.7rem);line-height:1.2}
.hp-page{margin:10px 0 40px}
footer{border-top:var(--ac-rule,1px) solid var(--ac-hair,#E6E1D8);
       padding:26px 0;margin-top:60px;color:var(--ac-mute,#8A8275);font-size:var(--ac-small,.875rem)}
footer a{margin-right:16px}

/* ---------- components ---------- */
.card{background:var(--ac-raised,#FFFFFF);
      border:var(--ac-rule,1px) solid var(--ac-hair,#E6E1D8);
      border-radius:var(--ac-radius,12px);
      padding:var(--ac-pad,24px)}
.card h3{margin-bottom:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     background:var(--ac-accent,#D4562A);border:1px solid var(--ac-accent,#D4562A);color:#fff;
     border-radius:var(--ac-radius,12px);padding:11px 20px;cursor:pointer;text-decoration:none;
     font-family:var(--ac-body,inherit);font-size:var(--ac-small,.875rem);font-weight:600;
     transition:opacity .15s}
.btn:hover{opacity:.88}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ac-ink,#17140F);border-color:var(--ac-hair,#E6E1D8)}
.btn.ghost:hover{opacity:1;border-color:var(--ac-accent,#D4562A)}
.btn.sm{padding:7px 14px;font-size:.8125rem}

label{display:block;font-size:var(--ac-small,.875rem);font-weight:600;margin:16px 0 6px}
input,select,textarea{width:100%;font:inherit;font-size:1rem;padding:11px 13px;
     border:1px solid var(--ac-hair,#E6E1D8);border-radius:var(--ac-radius,12px);
     background:var(--ac-raised,#fff);color:var(--ac-ink,#17140F)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac-accent,#D4562A)}
/* Phase 5 (ADR-046/ADR-026): a real, visible keyboard-focus ring.
   .btn/.quiz-opt/.quiz-scale-opt/.quiz-back already keep the browser's
   own default outline — nothing here ever suppressed it — but a plain
   default outline is easy to miss against these backgrounds, and a form
   field's border-colour change above is not always enough contrast on
   its own to count as a real focus indicator. :focus-visible, not
   :focus, so this only ever shows for keyboard navigation — a mouse
   click still gets the quieter feedback above, unchanged. */
.btn:focus-visible,.quiz-opt:focus-visible,.quiz-scale-opt:focus-visible,.quiz-back:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ac-accent,#D4562A);outline-offset:2px}
textarea{min-height:110px;resize:vertical;line-height:1.6}

.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.6875rem;font-weight:600;
      background:transparent;border:1px solid var(--ac-hair,#E6E1D8);color:var(--ac-mute,#8A8275)}
.pill.ok{border-color:#2F6B4F;color:#2F6B4F}
.pill.bad{border-color:#9E3535;color:#9E3535}
.pill.ember{border-color:var(--ac-accent,#D4562A);color:var(--ac-accent,#D4562A)}

.empty{padding:48px 30px;text-align:center;color:var(--ac-mute,#8A8275);
       background:var(--ac-raised,#fff);
       border:var(--ac-rule,1px) solid var(--ac-hair,#E6E1D8);
       border-radius:var(--ac-radius,12px)}
.empty b{display:block;font-family:var(--ac-display,Georgia,serif);
         font-size:var(--ac-h2,1.7rem);color:var(--ac-ink,#17140F);margin-bottom:8px;font-weight:500}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;
          align-items:center;justify-content:center;z-index:40;padding:20px}
.modal-bg.on{display:flex}
.modal{background:var(--ac-raised,#fff);color:var(--ac-ink,#17140F);
       border-radius:var(--ac-radius,12px);padding:28px;max-width:620px;width:100%;
       max-height:90vh;overflow:auto}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
       background:var(--ac-ink,#17140F);color:var(--ac-paper,#fff);padding:12px 20px;
       border-radius:var(--ac-radius,12px);font-size:.875rem;opacity:0;pointer-events:none;
       transition:opacity .2s;z-index:50}
.toast.on{opacity:1}

/* Hephus speaking on a seller's page, and the one thing here that should
   not look like theirs. A buyer being shown sample data has to be able to
   tell that it is Hephus saying so. */
.demo-bar{background:#0A0A0A;color:rgba(255,255,255,.6);font-size:9px;font-weight:500;
          letter-spacing:.25em;text-transform:uppercase;padding:11px 14px;text-align:center}
.demo-bar b{color:#fff;font-weight:500}

/* ---------- the shop ---------- */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.prod{background:var(--ac-raised,#fff);
      border:var(--ac-rule,1px) solid var(--ac-hair,#E6E1D8);
      border-radius:var(--ac-radius,12px);overflow:hidden;display:flex;flex-direction:column}
.prod .cv{aspect-ratio:16/10;background:var(--ac-paper,#F1ECE4);object-fit:cover;width:100%}
.prod .bd{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod .pr{font-family:var(--ac-display,Georgia,serif);font-size:1.6rem;line-height:1}
.prod .bd .btn{margin-top:auto}

/* ---------- the academy ---------- */
/* The picture across the top. Its own element rather than a background on
   an existing one, so it can be removed without leaving a gap where it
   was. */
.acover{width:100%;max-height:260px;object-fit:cover;display:block;
        border-radius:var(--ac-radius,12px);margin-bottom:20px}
.awelcome{margin:0 0 22px;font-size:1.0625rem;line-height:1.6}
.player{margin:16px 0;aspect-ratio:16/9;background:#000;
        border-radius:var(--ac-radius,12px);overflow:hidden}
.player iframe,.player video{width:100%;height:100%;border:0;display:block}

/* ---------- the scored quiz ---------- */
.quiz-bar{height:6px;background:var(--ac-hair,#E6E1D8);border-radius:3px;overflow:hidden;margin-bottom:22px}
.quiz-bar i{display:block;height:100%;background:var(--ac-accent,#D4562A);transition:width .25s}
.quiz-opt{display:block;width:100%;text-align:left;padding:13px 16px;margin-bottom:8px;
          border:1px solid var(--ac-hair,#E6E1D8);border-radius:var(--ac-radius,12px);
          background:var(--ac-raised,#fff);color:var(--ac-ink,#17140F);
          cursor:pointer;font:inherit;font-size:1rem;transition:border-color .15s}
.quiz-opt:hover{border-color:var(--ac-accent,#D4562A)}
.quiz-opt.on{border-color:var(--ac-accent,#D4562A);font-weight:600}
/* Branching (hephus-builder ADR-043 / this repo's ADR-024): a visitor can
   go back to a question already answered, so a chosen option needs a
   visible selected state even before they move on — .on above was styled
   but never actually reached by anything until now. */
.quiz-back{display:inline-block;background:none;border:0;padding:0 0 14px;
            color:var(--ac-ink-soft,#6B6154);cursor:pointer;font:inherit;font-size:.875rem}
.quiz-back:hover{color:var(--ac-accent,#D4562A)}
.quiz-scale-row{display:flex;flex-wrap:wrap;gap:8px}
.quiz-scale-opt{display:inline-flex;align-items:center;justify-content:center;
                 width:44px;height:44px;padding:0;margin:0;
                 border:1px solid var(--ac-hair,#E6E1D8);border-radius:var(--ac-radius,12px);
                 background:var(--ac-raised,#fff);color:var(--ac-ink,#17140F);
                 cursor:pointer;font:inherit;font-size:.9375rem;transition:border-color .15s}
.quiz-scale-opt:hover{border-color:var(--ac-accent,#D4562A)}
.quiz-scale-opt.on{border-color:var(--ac-accent,#D4562A);font-weight:600}
/* Phase 3 (hephus-builder ADR-044 / this repo's ADR-025): the structured
   section list a quiz's page is assembled from — see api/_lib/audit-
   sections.js. Every section shares .qsec for spacing; the rest are
   per-type. */
.qsec{margin:0 0 22px}
.qsec-hero{text-align:center}
.qsec-hero-img{max-width:100%;border-radius:var(--ac-radius,12px);margin-bottom:14px}
.qsec-hero-h{font-family:var(--ac-display,Georgia,serif);margin:0 0 6px}
.qsec-media,video.qsec-media{max-width:100%;border-radius:var(--ac-radius,12px);display:block}
.qsec-media-wrap{text-align:center}
.qsec-proof{display:grid;gap:10px}
.qsec-quote{margin:0;padding:12px 14px;border-left:2px solid var(--ac-accent,#D4562A);
            background:var(--ac-raised,#fff);border-radius:var(--ac-radius,12px);font-style:italic}
.qsec-quote cite{display:block;margin-top:6px;font-style:normal;font-size:.8125rem;color:var(--ac-ink-soft,#6B6154)}
.qsec-cta{text-align:center;padding-top:8px;border-top:1px solid var(--ac-hair,#E6E1D8)}
.qsec-faq{display:grid;gap:6px}
.qsec-faq-item{padding:10px 0;border-bottom:1px solid var(--ac-hair,#E6E1D8)}
.qsec-faq-item summary{cursor:pointer;font-weight:600}
.qsec-faq-item p{margin:8px 0 0;color:var(--ac-ink-soft,#6B6154)}
.qsec-footer{text-align:center;margin-top:30px}
.quiz-score{font-family:var(--ac-display,Georgia,serif);font-size:4.5rem;line-height:1;margin:6px 0 4px}
.quiz-pillars{display:grid;gap:10px;margin:18px 0}
.quiz-pillar b{display:flex;justify-content:space-between;font-size:.8125rem;font-weight:600;margin-bottom:4px}
.quiz-pillar .track{height:8px;background:var(--ac-hair,#E6E1D8);border-radius:4px;overflow:hidden}
.quiz-pillar .track i{display:block;height:100%;background:var(--ac-accent,#D4562A)}

/* The categorised audit's own results — a finding per answered question,
   grouped under its category, then a priority-actions list. Kept in the
   same neutral, brand-agnostic palette as the rest of this file rather
   than a traffic-light red/amber/green scheme: every seller sets their own
   --ac-accent, and a hardcoded red would clash with some of them. Urgency
   is read from the label and the left border weight, not from colour. */
.quiz-category{margin-bottom:18px}
.quiz-findings{margin-top:8px;display:grid;gap:6px}
.quiz-finding{margin:0;padding:9px 12px;border-radius:var(--ac-radius,12px);
  background:var(--ac-paper,#FAF7F2);font-size:.875rem;color:var(--ac-ink,#17140F);
  border-left:3px solid var(--ac-hair,#E6E1D8)}
.quiz-finding-low{border-left-color:var(--ac-accent,#D4562A)}
.quiz-actions{display:grid;gap:10px;margin-top:12px}
.quiz-action{padding:14px 16px;border:1px solid var(--ac-hair,#E6E1D8);
  border-radius:var(--ac-radius,12px);border-left-width:3px}
.quiz-action-urgent{border-left-color:var(--ac-accent,#D4562A)}
.quiz-action-important{border-left-color:var(--ac-hair,#E6E1D8)}
.quiz-action-maintain{border-left-color:var(--ac-hair,#E6E1D8);opacity:.85}

/* ---------- legal pages ---------- */
.legal{max-width:760px;margin:0 auto;padding:40px 20px 80px;line-height:1.65}
.legal h2{margin:30px 0 10px}

@media (max-width:720px){
  .store,.student,.acad{padding:0 16px 70px}
  .modal{padding:20px}
}