/* ════════════════════════════════════════════════════════════════════
   /directory/<slug> — public AI-visibility comparison pages.

   LAYOUT SOURCE: Figma frame 386:4 ("ai-visibility-comparison"), applied
   per the 2026-08-02 owner decisions: its chrome (nav without Contact /
   Member Log In, no footer) applies to directory pages only; its
   comparison structure ships (three series on the radar, per-company
   score bars, takeaways + how-to-improve cards, single bottom CTA bar);
   its second-person copy, six-axis chart, model-version labels and mock
   figures do NOT. There is no per-token extraction — the frame's own
   figures are mock content, and pixel values here were read off the
   frame render by eye. No tokens file pretends otherwise.

   Five things that are easy to get wrong here:

     - .radar-outline { fill: none } IS A CLAIM, NOT A STYLE. A filled
       radar invites reading its AREA as a composite score. Area is an
       artifact of axis ordering, and the fifth axis (crawler access) is
       an INPUT where the other four are outcomes. Do not add a fill,
       on any series.
     - An unknown axis must be distinguishable from a measured zero
       WITHOUT COLOUR: hollow dashed ring + the words "Not measured".
     - Radar grid lines (rings + spokes) are #a8b6c6, sized for WCAG
       2.1 AAA (owner ask, round 4). The binding case is NOT the page
       ground (#020617) but the warm glow core the lines cross:
       0.32-alpha rgba(190,70,35) over #020617 blends to ~#3e1b1b,
       relative luminance ~0.0187. #a8b6c6 (L~0.458) gives 7.4:1 there
       and 9.8:1 on the ground — both over the 7:1 AAA line. The
       obvious slate-400 #94a3b8 fails the glow-core case at 6.6:1.
       The sidebar score TRACK stays #1e293b: it sits on a #0f172a
       card, is not an information carrier by itself (the number is
       printed beside it), and a bright track would read as a filled
       bar.
     - base.css sets line-height 1.6 on body. Roles whose leading
       differs restate it, or rows grow several px each.
     - No inline styles anywhere: style-src-attr is hash-pinned, so a
       data-driven inline style would silently fail to apply in
       production. All chart geometry is SVG presentation attributes;
       only colour lives here.

   Series palette (sampled off the frame render):
     series-0 subject     #2dd4bf  (teal)
     series-1 competitor  #fb923c  (orange)
     series-2 competitor  #a78bfa  (purple)
   ════════════════════════════════════════════════════════════════════ */

/* The shared interior-page glow, plus the frame's own warm radar glow
   (node 394:2) added behind the chart panel below. */
body.directory-doc {
  /* clip, not hidden: the CTA bar's calc(50% - 50vw) bleed overshoots by
     the scrollbar width, and clip discards it without minting a new
     scroll container. */
  overflow-x: clip;
  background-color: #020617;
  background-image: radial-gradient(ellipse 60% 30% at 50% 30%,
                                    #173948 0%, #0e1a2c 55%,
                                    rgba(6, 9, 20, 0) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.directory-entry {
  max-width: 1344px;
  margin: 0 auto;
  padding: 32px 24px 0;
  color: #e2e8f0;
}

/* ── head ─────────────────────────────────────────────────────────── */

.directory-crumbs {
  font-size: 14px;
  line-height: 1.4;
  color: #94a3b8;
  margin-bottom: 20px;
}

.directory-crumbs a { color: #94a3b8; text-decoration: none; }
.directory-crumbs a:hover { color: #00bfff; text-decoration: underline; }
.directory-crumbs span { margin-left: 6px; }

.directory-entry h1 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin: 0 0 12px;
  color: #f8fafc;
}

.directory-lede {
  font-size: 16px;
  line-height: 1.6;
  /* Full container width (owner ask, round 19): the lede runs to the same
     right edge as the sidebar column below it, no measure cap. */
  color: #cbd5e1;
  margin: 0;
}

.directory-lede a { color: #00bfff; }

.directory-entry h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 16px;
  color: #f8fafc;
}

/* ── the main grid: chart left, sidebar right (frame Main_Grid) ───── */

.directory-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

/* The frame's warm ambient glow behind the radar (394:2), centred on the
   radar itself: the panel contains only the chart SVG (the axis table was
   removed, owner decision round 3), so the panel's centre IS the radar's
   centre, and the red core sits under the polygon origin. */
.directory-chart-panel {
  position: relative;
  background: radial-gradient(closest-side at 50% 50%,
                              rgba(190, 70, 35, 0.32) 0%,
                              rgba(120, 45, 30, 0.15) 55%,
                              rgba(2, 6, 23, 0) 100%);
  border-radius: 24px;
  padding: 8px 16px;
}

.directory-radar {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.radar-ring {
  fill: none;
  stroke: #a8b6c6;   /* AAA-contrast grid: see the header note. */
  stroke-width: 1;
}

.radar-ring-label {
  fill: #a8b6c6;     /* text beside AAA lines should not itself fail AAA */
  font-size: 10px;
}

.radar-spoke { stroke: #a8b6c6; stroke-width: 1; }

/* fill: none is load-bearing, on every series. See the header. */
.radar-outline {
  fill: none;
  stroke: #2dd4bf;
  stroke-width: 2;
  stroke-linejoin: round;
}

.radar-outline--series-1 { stroke: #fb923c; }
.radar-outline--series-2 { stroke: #a78bfa; }

.radar-dot { fill: #2dd4bf; }
.radar-dot--series-1 { fill: #fb923c; }
.radar-dot--series-2 { fill: #a78bfa; }

/* The coincident-dot bullseye (owner ask, 2026-08-03): later series at the
   SAME point draw as wider hollow rings in their own colour around the
   first series' filled dot, so two measured zeros at the centre stay two
   visible marks. Solid stroke — dashed means "not measured" (below) and a
   ring carrying a VALUE must never borrow that vocabulary. */
.radar-dot--hollow { fill: none; stroke: #2dd4bf; stroke-width: 2; }
.radar-dot--hollow.radar-dot--series-1 { stroke: #fb923c; }
.radar-dot--hollow.radar-dot--series-2 { stroke: #a78bfa; }

/* Hollow + dashed: "not measured" must read as the absence of a value in
   greyscale, not as another series colour. */
.radar-dot--unknown {
  fill: none;
  stroke: #64748b;
  stroke-width: 1.5;
  stroke-dasharray: 2 2;
}

.radar-label {
  fill: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
}

.radar-sublabel {
  fill: #a8b6c6;     /* same AAA pass as the grid it labels */
  font-size: 11px;
}


/* ── sidebar (frame Sidebar: Scores_Card, Takeaways, Info_Box) ────── */

/* Scoped with two classes so it outweighs `.directory-entry h2` (0,1,1)
   without resorting to !important — the label is an h2 for the document
   outline, but the frame draws it as a small uppercase kicker. */
.directory-entry .directory-sidebar-label {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 14px;
}

.directory-scores {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.directory-score-card {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 4px 8px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.directory-score-card--subject { border-color: #2dd4bf55; }

.directory-chip {
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: #2dd4bf;
}

.directory-chip--series-1 { background: #fb923c; }
.directory-chip--series-2 { background: #a78bfa; }

.directory-score-name {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: #f1f5f9;
}

.directory-score-value {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  color: #f8fafc;
}

.directory-score-value--unknown {
  font-size: 13px;
  font-weight: 400;
  color: #94a3b8;
}

.directory-score-denom { color: #64748b; font-weight: 400; }

.directory-score-track {
  grid-column: 1 / -1;
  width: 100%;
  height: 6px;
  display: block;
  background: #1e293b;   /* the unfilled track, NOT the card colour */
  border-radius: 3px;
}

.directory-score-fill { fill: #2dd4bf; }
.directory-score-fill--series-1 { fill: #fb923c; }
.directory-score-fill--series-2 { fill: #a78bfa; }

.directory-score-counts {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
}

.directory-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.directory-card h3 {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 14px;
}

.directory-takeaways {
  list-style: none;
  margin: 0;
  padding: 0;
}

.directory-takeaways li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #cbd5e1;
  margin-bottom: 12px;
}

.directory-takeaways li:last-child { margin-bottom: 0; }

.directory-takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2dd4bf;
}

.directory-improve {
  font-size: 14px;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0;
}

/* ── full-width sections below the grid ───────────────────────────── */

/* Lives in the LEFT column, directly under the radar, at roughly half
   its former 820px width (round 4); simplified to the owner's mockup in
   round 7 — quiet title, big range, $-prefixed input, outlined
   Calculate button, italic caveat. No inputs list and no privacy line
   on the card: provenance lives in the view model and the caveat, and
   the privacy guarantee is the script's, pinned by test. */
.directory-model {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 16px;
  padding: 24px;
  max-width: 420px;
  /* 24px lifted by 50 (owner ask, round 16). The negative margin overlaps
     the radar SVG's BOX, not its chart: the 460-unit viewBox reserves
     ~100px of empty space under the drawn labels, and the card climbs
     into that reserve. If the radar geometry ever changes, re-check the
     clearance in a browser before trusting this number. */
  margin: -26px auto 0;
}

.directory-model h2 {
  font-size: 24px;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 24px;
}

.directory-model-figure { margin: 0 0 6px; }

.directory-model-amount {
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  color: #f8fafc;
}

.directory-model-per {
  font-size: 22px;
  line-height: 1.1;
  color: #94a3b8;
  margin-left: 6px;
}

.directory-model-sub {
  font-size: 15px;
  line-height: 1.5;
  color: #94a3b8;
  margin: 0 0 28px;
}

.directory-calc { margin: 0 0 24px; }

.directory-calc label {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 10px;
}

/* The $ prefix sits inside the field; the input pads left to clear it. */
.directory-calc-field { position: relative; }

.directory-calc-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 15px;
}

.directory-calc input {
  width: 100%;
  box-sizing: border-box;
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 10px;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.4;
  padding: 14px 14px 14px 30px;
}

.directory-calc input:focus {
  outline: 2px solid #00bfff;
  outline-offset: 1px;
  border-color: #00bfff;
}

/* Outlined, not filled: the page's one FILLED cyan control is the CTA at
   the bottom, and two filled buttons would compete for the same click. */
.directory-calc-button {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  background: transparent;
  border: 1px solid #00bfff;
  border-radius: 10px;
  color: #00bfff;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
}

.directory-calc-button:hover { background: rgba(0, 191, 255, 0.08); }

.directory-calc-button:focus-visible {
  outline: 2px solid #00bfff;
  outline-offset: 2px;
}

/* ── the result state (owner mockup, round 9) ─────────────────────── */

/* Focus lands on the container after Calculate so a screen reader
   announces the swap; the container itself needs no visible ring — the
   controls inside carry their own. */
.directory-model-result:focus { outline: none; }

/* The result sub sits directly above the CTA. */
.directory-model-result .directory-model-sub { margin-bottom: 24px; }


.directory-calc-context {
  color: #00bfff;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 10px;
}

/* Same outline treatment as the Calculate button — it replaces it as the
   card's one action, pointing at the same place as the bottom CTA. */
/* Rendered as a <button> inside .directory-calc-cta-form (the one-click
   audit POST); the background/font/cursor resets neutralise the UA button
   styles so it draws exactly as the anchor it replaced. */
.directory-calc-cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 15px;
  background: none;
  border: 1px solid #00bfff;
  border-radius: 10px;
  color: #00bfff;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.directory-calc-cta:hover { background: rgba(0, 191, 255, 0.08); }

.directory-calc-recalc {
  display: block;
  margin: 16px auto 0;
  padding: 4px 8px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: underline;
  cursor: pointer;
}

.directory-calc-recalc:hover { color: #cbd5e1; }

.directory-model-divider {
  border: none;
  border-top: 1px solid #1e293b;
  margin: 24px 0 0;
}






.directory-model-caveat {
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
  max-width: 68ch;
}


/* ── the bottom CTA bar (frame Bottom_Bar) ────────────────────────── */

/* Full-bleed strip to the VIEWPORT edges (owner decision, round 4): the
   page has no footer, so this bar is the floor of the page. The article
   sits inside base.html's centred .container, so escaping the padding is
   not enough — calc(50% - 50vw) pulls each edge to the screen. 50vw
   includes the scrollbar gutter, so body.directory-doc clips horizontal
   overflow below; without that the bar minted a sideways scroll. */
.directory-cta {
  margin: 72px calc(50% - 50vw) 0;
  padding: 24px;
  background: #0b1220;
  border-top: 1px solid #1e293b;
  text-align: center;
}

/* Also a <button> now (same one-click audit form as the calc CTA). */
.directory-cta-button {
  display: inline-block;
  width: min(480px, 100%);
  background: #00bfff;
  border: 0;
  color: #041016;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  padding: 18px 24px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 0 32px rgba(0, 191, 255, 0.35);
  cursor: pointer;
}

.directory-cta-button:hover { background: #33ccff; }

/* ── the /directory landing page (list + client-side search) ───────── */
/* Meta text uses the AAA grid grey #a8b6c6 (9.8:1 over #020617 — the
   contrast math is in this file's header). */

.directory-search { max-width: 560px; margin: 4px 0 0; }

.directory-search label {
  display: block;
  margin-bottom: 6px;
  color: #a8b6c6;
  font-size: 14px;
}

#directory-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 10px;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 16px;
}

#directory-search-input:focus {
  outline: 2px solid #00bfff;
  outline-offset: 1px;
}

.directory-count { margin: 12px 0 18px; color: #a8b6c6; font-size: 14px; }

.directory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.directory-list-item a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 10px;
  text-decoration: none;
}

.directory-list-item a:hover { border-color: #00bfff; }

.directory-list-name { color: #e2e8f0; font-size: 16px; font-weight: 600; }

.directory-list-meta { color: #a8b6c6; font-size: 14px; }

.directory-list-empty { max-width: 720px; color: #a8b6c6; }

/* ── narrow ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .directory-main { grid-template-columns: 1fr; gap: 32px; }
  .directory-sidebar { max-width: 560px; }
}

@media (max-width: 640px) {
  /* The radar must not overflow the viewport at 375px. */
  .directory-chart-panel { padding: 4px 4px 16px; }
  .directory-entry h1 { font-size: 26px; letter-spacing: -0.4px; }
  .directory-entry { padding: 24px 18px 0; }
  .directory-cta { margin-top: 56px; }
}