/* SEO Audit -- app-specific styles only.
   Shared with every other JustSimple app via /static/sidebar.css +
   /static/base.css (linked before this file in base.html): the page
   background, the .content gutter, the hero h1/topbar, the .card shell
   (radius/padding/shadow), --ink/--muted/--line/--accent, the
   --radius-sm/--radius-tile/--radius-card/--space-card tokens, and the
   --font-hero/--font-stat/--font-input/--font-btn/--weight-heading
   typography tokens (sidebar.css :root) -- e.g. the donut's center
   number below uses --font-stat/--weight-heading, the same tokens
   overview.css's .metric-value and .audit-donut-label .n use, so a
   "big number" is the same size/weight everywhere instead of each app
   picking its own.

   DESIGN-CONSISTENCY PASS (see chat): this file used to duplicate all of
   that (its own h1, its own .card, its own .wrap, a red hero-underline,
   its own button/input radius numbers, its own font sizes). All of that
   is now deleted -- don't re-add it here. If a card/heading/button/font
   size here looks inconsistent with another app, the fix belongs in the
   shared base.css/sidebar.css tokens, not a local override in this
   file. */

/* --- search/audit form (index.html) ---
   font-size for the inputs/select/button now reference the same
   --font-input/--font-btn tokens as overview.css's search bar (see
   sidebar.css :root) instead of a hand-picked 0.95rem, so this form's
   text matches the dashboard's search bar text exactly. */
form.audit-form{ display:flex; gap:10px; flex-wrap:wrap; }
input[type=text], input[type=url]{
  flex:1; min-width:240px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); font-size:var(--font-input);
}
button{
  background:var(--accent); color:#fff; border:none; padding:12px 20px;
  border-radius:var(--radius-sm); font-size:var(--font-btn); font-weight:700;
  text-transform:none; letter-spacing:0; cursor:pointer;
}
button:hover{ opacity:0.9; }
.content-select{
  flex:1; min-width:200px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); font-size:var(--font-input); background:#fff;
}
.full-width{ flex-basis:100%; }
.flex-input{ flex:1; min-width:200px; }

/* Wraps the form (+ its progress bar) to get the same divider overview.css's
   .card-search-row uses to separate the search area from whatever
   follows inside the same card -- same var(--line)/--space-card tokens,
   so the line itself is identical everywhere, not a locally-guessed value. */
.audit-form-row{
  padding-bottom:var(--space-card);
  margin-bottom:var(--space-card);
  border-bottom:1px solid var(--line);
}

/* Hint line under the form -- same class/values as overview.css's
   .search-hint (gray, left-aligned, no bold) so both search bars read
   the same way instead of one being centered/dark and one muted/left. */
.search-hint{ font-size:0.85rem; color:var(--muted); margin:0; }

/* General muted helper/caption text -- used all over result.html,
   opportunities.html and this page's own Recent Audits table (e.g.
   "Want to combine a few audits...") but was never actually defined
   anywhere in this app's CSS, so it was silently rendering in the
   default dark --ink instead of muted gray. Same values as
   .search-hint above -- kept as a separate class since it's used for
   general captions, not just the search-bar hint specifically. */
.sub{ font-size:0.85rem; color:var(--muted); }
#audit-progress{ margin-top:16px; }
#audit-progress.hidden{ display:none; }

/* Generic hide utility -- this app previously only had the scoped
   #audit-progress.hidden rule above; the credit-cost tooltip icon
   (index.html, shown/hidden via JS depending on login state) needs a
   plain, unscoped .hidden it can toggle the same way every other
   JustSimple app's own base.html already defines locally. */
.hidden{ display:none !important; }
.audit-bar-initial{ width:2%; background:var(--accent); }
#audit-bar-label{ margin:6px 0 0; font-size:0.82rem; }

.flash{ background:#fff3cd; border:1px solid #ffe69c; padding:10px 14px; border-radius:var(--radius-sm); margin-bottom:16px; }

/* --- generic table + status badges --- */
table{ width:100%; border-collapse:collapse; font-size:0.88rem; }
th, td{ padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; word-break:break-word; }
th{ color:var(--muted); font-weight:600; text-transform:uppercase; font-size:0.72rem; letter-spacing:.03em; }

.badge{ display:inline-block; padding:2px 9px; border-radius:100px; font-size:0.75rem; font-weight:600; }
.Optimised{ background:#d9ead3; color:var(--good); }
.Partially-Optimised{ background:#fff2cc; color:var(--warn); }
.Non-Optimised{ background:#f4cccc; color:var(--bad); }
/* --- Priority Roadmap severity tiers (see app._severity_tier) --- */
.tier-SHOWSTOPPER{ background:#f4cccc; color:var(--bad); }
.tier-HIGH{ background:#fff2cc; color:var(--warn); }
.tier-MEDIUM{ background:#efefef; color:var(--muted); }
.tier-LOW{ background:#e8eefc; color:var(--accent); }
.Not-Applicable{ background:#efefef; color:var(--muted); }

.score{ font-size:2.6rem; font-weight:var(--weight-heading); }
.score-wrap{ display:flex; align-items:center; gap:20px; }
.actions a{
  display:inline-block; margin-right:10px; padding:9px 16px; border-radius:var(--radius-sm);
  background:var(--ink); color:#fff; text-decoration:none; font-size:0.88rem; font-weight:700;
}
.actions a.secondary{ background:#fff; color:var(--ink); border:1px solid var(--line); }
a.back{ color:var(--muted); text-decoration:none; font-size:0.85rem; }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0 24px; }
.stat{ background:#fafafa; border:1px solid var(--line); border-radius:var(--radius-tile); padding:14px; }
.stat .n{ font-size:1.4rem; font-weight:var(--weight-heading); }
.stat .l{ color:var(--muted); font-size:0.8rem; }

.hist table{ table-layout:fixed; }
.hist th, .hist td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist td:nth-child(4), .hist th:nth-child(4){ white-space:normal; overflow-wrap:anywhere; }
.hist td:nth-child(6){ white-space:normal; overflow:visible; text-overflow:clip; text-align:center; line-height:1.4; }
.hist td:last-child, .hist th:last-child{ text-align:right; overflow:visible; }
.hist a{ color:var(--accent); text-decoration:none; }

/* --- collapsible long URLs -- reused both in the Recent Audits table
   AND under the hero h1 on result.html/opportunities.html (see
   page_subtitle block in those templates) -- one definition, two call
   sites, instead of a separate "hero-url-toggle" copy of this. --- */
.url-cell{ white-space:normal; overflow-wrap:anywhere; }
.url-toggle{ padding:0; }
.url-toggle summary{ cursor:pointer; list-style:none; display:flex; align-items:flex-start; gap:6px; color:var(--ink); }
.url-toggle summary::-webkit-details-marker{ display:none; }
.url-toggle summary::before{ content:"▶"; flex:none; color:var(--muted); font-size:0.6rem; margin-top:3px; transition:transform .15s; }
.url-toggle[open] summary::before{ transform:rotate(90deg); }
.url-toggle .full-url{ margin:4px 0 0 15px; color:var(--muted); word-break:break-all; overflow-wrap:anywhere; }
/* Modifier for when the toggle sits under a centered hero h1 (see
   page_subtitle block in result.html/opportunities.html) rather than
   left-aligned in a table cell. Keeps <details> block-level (summary
   stacked above the full-url div) -- only centers each line's own
   content, doesn't lay summary/full-url out side by side. */
.url-toggle.center{ text-align:center; }
.url-toggle.center summary{ justify-content:center; }
.url-toggle.center .full-url{ margin-left:0; text-align:center; }

/* --- icon action buttons (view / delete) in the Recent Audits table --- */
.actions-cell{ display:flex; justify-content:flex-end; align-items:center; gap:6px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; color:var(--muted); cursor:pointer; text-decoration:none; line-height:0;
}
.icon-btn:hover{ background:#fafafa; }
.icon-btn .icon{ width:15px; height:15px; stroke:currentColor; }
.icon-view:hover{ color:var(--accent); border-color:var(--accent); }
.icon-delete:hover{ color:var(--bad); border-color:var(--bad); }
.delete-form{ display:inline-flex; margin:0; }

/* --- per-type breakdown + donut chart --- */
.overview{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.donut{ width:150px; height:150px; border-radius:50%; flex:none; position:relative; }
.donut::after{ content:""; position:absolute; inset:20px; background:#fff; border-radius:50%; }
.donut .donut-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; z-index:1; }
.donut .donut-label .n{ font-size:var(--font-stat); font-weight:var(--weight-heading); line-height:1; }
.donut .donut-label .l{ font-size:0.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.legend{ display:flex; flex-direction:column; gap:8px; flex:1; min-width:220px; }
.legend-row{ display:flex; align-items:center; gap:10px; font-size:0.85rem; }
.legend-row .sw{ width:11px; height:11px; border-radius:3px; flex:none; }
.legend-row .lt{ flex:1; color:var(--ink); }
.legend-row .lw{ color:var(--muted); font-size:0.78rem; }
.legend-row .lp{ font-weight:700; min-width:44px; text-align:right; }

.type-card{ margin-bottom:14px; }
.type-card summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:2px 0; }
.type-card summary::-webkit-details-marker{ display:none; }
.type-card summary .chev{ transition:transform .15s; color:var(--muted); font-size:0.75rem; }
.type-card[open] summary .chev{ transform:rotate(90deg); }
.type-card summary .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.type-card summary .tname{ font-weight:700; flex:1; }
.type-card summary .tcount{ color:var(--muted); font-size:0.8rem; }
.type-card summary .tpct{ font-weight:700; min-width:48px; text-align:right; }
.bar-track{ background:#eef0f3; border-radius:100px; height:7px; margin:10px 0 16px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:100px; }
.type-card table{ margin-top:4px; }
.type-card table th:nth-child(3), .type-card table td:nth-child(3){ white-space:nowrap; }
/* Columns 1-3 (Elements / Status / Criticality) hold short labels -- let
   them wrap normally at word boundaries instead of the global
   overflow-wrap:anywhere/word-break:break-word rule, which was slicing
   single words like "Elements" or "Duplicated" across several lines.
   The <colgroup> pixel widths on .checklist-table are just suggested
   starting widths (table-layout stays auto), so the table still shrinks
   and reflows fluidly on narrow screens instead of being rigidly fixed. */
.checklist-table th:nth-child(1), .checklist-table td:nth-child(1),
.checklist-table th:nth-child(2), .checklist-table td:nth-child(2),
.checklist-table th:nth-child(3), .checklist-table td:nth-child(3){
  overflow-wrap:normal; word-break:normal;
}
.obs-plain{ color:var(--muted); font-size:0.85rem; }
.finding-box{ background:#fafafa; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; font-size:0.85rem; }
.finding-box .found{ color:var(--ink); font-weight:600; line-height:1.5; }
.finding-box p.tip{ color:var(--ink); margin:8px 0 0; line-height:1.55; }
.finding-box p.tip:first-of-type{ margin-top:10px; }
.obs-plain .value-box, .finding-box .value-box{
  background:#eef1f5; border-radius:var(--radius-sm); padding:8px 10px; margin-top:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.8rem;
  color:var(--ink); line-height:1.5; white-space:pre-wrap; word-break:break-word;
}
.finding-toggle{ padding:0; }
.finding-toggle summary{ cursor:pointer; list-style:none; padding:12px 14px; display:flex; gap:8px; align-items:flex-start; }
.finding-toggle summary::-webkit-details-marker{ display:none; }
.finding-toggle summary::before{ content:"▶"; flex:none; color:var(--muted); font-size:0.65rem; margin-top:4px; transition:transform .15s; }
.finding-toggle[open] summary::before{ transform:rotate(90deg); }
.finding-toggle .finding-body{ padding:0 14px 12px; }
.finding-toggle .suggestion-label{
  display:flex; align-items:center; gap:6px; color:var(--accent); font-weight:700;
  font-size:0.72rem; text-transform:uppercase; letter-spacing:.03em; margin:2px 0 6px;
}
.finding-toggle .suggestion-label::before{ content:"💡"; font-size:0.9rem; }
.narrative{ background:#f7f9fc; border-left:3px solid var(--accent); padding:10px 14px; border-radius:0 8px 8px 0; font-size:0.9rem; line-height:1.6; color:var(--ink); margin:0 0 16px; }

/* --- keyword distribution table --- */
.kw-table{ width:100%; border-collapse:collapse; }
.kw-table th{ color:var(--muted); font-weight:600; text-transform:uppercase; font-size:0.7rem; letter-spacing:.04em; text-align:left; padding:8px 10px; }
.kw-table th.center, .kw-table td.center{ text-align:center; }
.kw-table td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.kw-table tr.pinned{ background:#f7f9fc; }
.kw-word{ font-weight:600; }
.kw-word .pin-tag{ font-size:0.68rem; font-weight:600; color:var(--accent); background:#e8eefc; border-radius:100px; padding:1px 8px; margin-left:8px; vertical-align:middle; }
.kw-yes{ color:var(--good); font-weight:700; }
.kw-no{ color:var(--bad); font-weight:700; }
.kw-freq{ color:var(--muted); }
.kw-bar-track{ background:#eef0f3; border-radius:100px; height:8px; width:100%; min-width:80px; overflow:hidden; }
.kw-bar-fill{ height:100%; border-radius:100px; background:var(--accent); }
.kw-subhead{ margin:0 0 6px; font-size:0.92rem; }
.kw-subhead-spaced{ margin-top:24px; }
.kw-intro{ margin:0 0 12px; }
.kw-bar-col{ width:140px; }
.how-it-works{ margin-top:20px; }
.how-it-works summary{ cursor:pointer; color:var(--muted); font-size:0.85rem; }

/* --- AI Visibility questions: each question is its own row (not a
   table column), so the answer panel below it can use the full card
   width instead of being squeezed into a narrow table column. --- */
.ai-q-list{ display:flex; flex-direction:column; gap:10px; }
.ai-q-item{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.ai-q-row{ display:flex; align-items:center; gap:16px; padding:10px 14px; background:#fafafa; }
.ai-q-text{ flex:1; font-size:0.88rem; color:var(--ink); }
.ai-q-mentioned{ flex:none; font-size:0.82rem; font-weight:700; white-space:nowrap; }
.ai-answer-toggle{ border:none; border-top:1px solid var(--line); border-radius:0; }
.ai-answer-toggle summary{ padding:8px 14px; font-size:0.8rem; color:var(--accent); }
.ai-answer-body{ font-size:0.85rem; line-height:1.65; padding:2px 16px 14px; max-width:760px; }
.ai-answer-body p{ margin:0 0 10px; }
.ai-answer-body p:last-child{ margin-bottom:0; }
.ai-answer-body p.ans-heading{ font-weight:700; color:var(--ink); margin:12px 0 6px; }
.ai-answer-body p.ans-heading:first-child{ margin-top:0; }
.ai-answer-body ul{ margin:0 0 10px 20px; padding:0; }
.ai-answer-body li{ margin-bottom:5px; }
.ai-answer-body a{ color:var(--accent); }

/* --- structured heading groups (e.g. H1 / H2 lists) --- */
.heading-groups{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.heading-group{ background:#eef1f5; border-radius:var(--radius-sm); border:1px solid var(--line); }
.heading-group summary{ cursor:pointer; list-style:none; padding:7px 10px; display:flex; align-items:center; gap:8px; font-size:0.8rem; }
.heading-group summary::-webkit-details-marker{ display:none; }
.heading-group summary::before{ content:"▶"; color:var(--muted); font-size:0.6rem; transition:transform .15s; }
.heading-group[open] summary::before{ transform:rotate(90deg); }
.hg-label{ font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); }
.hg-count{ color:var(--muted); background:#fff; border-radius:100px; padding:0 8px; font-size:0.72rem; }
.hg-list{ margin:0; padding:6px 14px 10px 30px; font-size:0.83rem; color:var(--ink); line-height:1.6; }
.hg-list li{ margin-bottom:2px; }

/* --- Site Audit / SEO Opportunities tab bar, shown at the top of both
   report pages for a given result so switching between them doesn't
   need the sidebar (see result.html + opportunities.html). --- */
.audit-tabs{ display:flex; gap:22px; border-bottom:1px solid var(--line); margin:4px 0 20px; }
.audit-tab{
  padding:10px 2px; font-size:0.9rem; font-weight:700; color:var(--muted);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.audit-tab:hover{ color:var(--ink); }
.audit-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.audit-tab .tab-count{
  background:var(--bg); color:var(--muted); border-radius:100px; padding:1px 8px;
  font-size:0.72rem; font-weight:700; margin-left:7px;
}
.audit-tab.active .tab-count{ background:#e8effd; color:var(--accent); }

.render-badge{ display:inline-block; padding:1px 9px; border-radius:100px; font-size:0.75rem; font-weight:600; }
.render-ok{ background:#d9ead3; color:var(--good); }
.render-warn{ background:#fff2cc; color:var(--warn); cursor:help; }

/* --- audit-app-specific utilities (generic ones like .mb-8/.mt-10/.m-0/
   .text-center now live in the shared base.css -- only the ones unique
   to this app's own components stay here). --- */
.label-upper{ text-transform:uppercase; letter-spacing:.03em; }
.big-score{ font-size:2rem; }
.url-sub{ font-size:0.78rem; word-break:break-all; margin:6px 0; }

/* --- "Get started" callout (inside the search card) + intro card below
   it, on the SEO Audit landing page only (index.html). Same shell/pattern
   as backlink/static/backlink.css's .bl-start-here / .bl-intro-card
   (itself copied from competitive_research's .cr- versions) -- same
   --accent arrow + two-column card -- just prefixed sa- for this app,
   with copy/checklist/art specific to what this tool actually audits
   (technical + on-page, content/schema, speed/Core Web Vitals -- see
   seo_engine.py's SEOChecker methods). Keep in sync with the bl-/cr-
   shells if that pattern's spacing/layout ever changes. */
.sa-start-here{
  display:flex; align-items:center; gap:6px; margin-top:14px;
  color:var(--accent); font-size:0.78rem; font-weight:700; letter-spacing:.03em;
}
.sa-start-here svg{ width:22px; height:16px; flex:0 0 auto; }
.sa-start-here span{ white-space:normal; }

.sa-section-title{ font-size:1.35rem; font-weight:var(--weight-heading); color:var(--ink); margin:28px 2px 16px; }

.sa-intro-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-card);
  padding:var(--space-card); display:flex; align-items:center; gap:40px;
}
@media (max-width:820px){ .sa-intro-card{ flex-direction:column; align-items:stretch; } }
.sa-intro-copy{ flex:0 0 42%; }
.sa-intro-copy p{ margin:0 0 10px; font-size:0.92rem; color:var(--muted); line-height:1.55; }
.sa-intro-checklist{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.sa-intro-checklist li{ display:flex; gap:10px; align-items:flex-start; font-size:0.88rem; color:var(--ink); line-height:1.5; }
.sa-intro-checklist li strong{ font-weight:700; }
.sa-intro-check{ flex:0 0 auto; width:16px; height:16px; margin-top:2px; color:var(--accent); }
.sa-intro-art{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; }
.sa-intro-art svg{ width:100%; height:auto; max-width:420px; }