/* Moved from websites/templates/websites/_competitor_detail_styles.html (redesign checklist: local CSS out of the
   templates). Loaded only by the pages that include that partial. */

.num { text-align: right; white-space: nowrap; }
/* Same card and chip rules as the competitor report, so a profile read
   here and there looks identical. */
.cmp-card { border: 1px solid var(--color-border, var(--border)); border-radius: 8px;
            padding: var(--space-3); margin-bottom: var(--space-3); }
.cmp-card > h4 { margin: 0 0 var(--space-1); font-size: 15px; }
.cmp-card details summary { cursor: pointer; color: var(--color-accent); }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-1);
             margin-top: var(--space-2); }

/* A section's lead line: its one figure, beside the help notes that say
   how to read the section (DOC_DESIGN_UI_KIT.md §4.15). */
.cd-lead { margin: 0; font-size: 14px; color: var(--color-neutral-700); }
.cd-lead b {
  display: block; font-family: var(--font-heading); font-weight: 800; font-size: 30px;
  line-height: 1.05; letter-spacing: -0.02em; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.hn-pair > .seo-data-title { margin: 0; }
.hn-pair + .cd-fig, .hn-pair + .seo-table-wrap, .hn-pair + .cmp-card,
.hn-pair + p { margin-top: var(--space-4); }

/* The working behind one similarity score: three groups of chips, in the
   order the reader needs them — what you both cover, what only they cover
   (the openings), what only you cover (your ground). The colours are the
   report's own verdict colours, so "their ground" reads as the warning it
   is without a legend. */
.cd-cmp { margin-top: var(--space-3); }
.cd-cmp-group { margin-bottom: var(--space-2); }
.cd-cmp-group > p { margin: 0 0 var(--space-1); font-size: 12px;
                    font-weight: 600; color: var(--color-neutral-700); }
.cd-cmp-group > p span { font-weight: 400; }
.cd-cmp .tag-theirs { background: var(--coral-bg); border-color: var(--coral); color: var(--coral-text); }
.cd-cmp .tag-yours { background: var(--mint-bg); border-color: var(--mint); color: var(--mint-text); }
/* The dossier-to-dossier navigation, above the Overview. */
.cmp-nav { display: flex; flex-wrap: wrap; align-items: center;
           gap: var(--space-2); margin: 0; }
.cmp-nav .cmp-nav-count { margin-left: auto; }
.cd-nav-pair { margin-bottom: var(--space-4); }
.cmp-url { overflow-wrap: anywhere; font-size: 12px; }

/* ── The figures ─────────────────────────────────────────────────────
   Report-local by the rule in DOC_Design/DOC_DESIGN_UI_KIT.md §1: a
   one-off look lives with the report that needs it, built from the
   tokens, never in akoore.css. The only hardcoded colours are the three
   the shared report stylesheet already fixes — good var(--mint), to improve
   var(--amber), critical var(--coral) — so a green bar here and a green badge two
   lines above it are the same green.

   Every drawing on this page is the same object: a title, the drawing,
   and one note under it saying what the drawing found; how to read it
   is a help note beside the section's lead line. Nothing is measured in
   CSS; the widths arrive already computed and tested from
   competitor_detail_visuals.py. */
.cd-fig { margin: var(--space-3) 0 var(--space-2); }
.cd-fig-title { margin: 0 0 var(--space-3); font-size: 14px; font-weight: 700; }
.cd-fig-note { margin: var(--space-2) 0 0; font-size: 12px;
               color: var(--color-neutral-700); max-width: 74ch; }
.cd-fig b, .cd-fig .cd-num { font-variant-numeric: tabular-nums; }

/* The shared bar. One rule, four figures — a hairline floor on the fill
   so a 0.3 % slice stays visible instead of reading as absent. */
.cd-bar { position: relative; height: 13px; border-radius: 3px;
          background: var(--color-neutral-200, var(--row-tint)); overflow: hidden; }
.cd-bar > span { display: block; height: 100%; border-radius: 3px; }
.cd-fill--good > span { background: var(--mint); }
.cd-fill--warn > span { background: var(--amber); }
.cd-fill--bad  > span { background: var(--coral); }
.cd-fill--info > span { background: var(--color-neutral-400, var(--slate)); }
.cd-fill--you  > span { background: var(--color-accent); }

/* ── Size and reach: the tale of the tape ─────────────────────────────
   One measure per row, drawn from the middle out: their bar grows to
   the left, yours to the right, both to the larger of the two, with the
   leader's multiple between them. Ink is them, the accent is you — the
   dossier's one rule about red (§4.7.4): it is spent on the reader's
   own domain. */
.cd-fill--ink > span { background: var(--color-text); }
.cd-ink-you { color: var(--color-accent); }
.cd-tape { --cd-tape-num: 92px; --cd-tape-mid: 200px; }
.cd-tape-head, .cd-tape-row {
  display: grid; align-items: center; gap: var(--space-2) var(--space-3);
  grid-template-columns: var(--cd-tape-num) minmax(0, 1fr) var(--cd-tape-mid) minmax(0, 1fr) var(--cd-tape-num);
}
.cd-tape-head { padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-text); }
.cd-tape-side { grid-column: span 2; min-width: 0; }
.cd-tape-side b { display: block; font-family: var(--font-heading); font-weight: 800;
                  font-size: 22px; line-height: 1.1; letter-spacing: -0.01em;
                  overflow-wrap: anywhere; }
.cd-tape-side span { display: block; font-size: 11px; letter-spacing: .12em;
                     text-transform: uppercase; color: var(--color-neutral-700); margin-top: 3px; }
.cd-tape-side--you { text-align: right; }
.cd-tape-side--you b { color: var(--color-accent); }
.cd-tape-vs { text-align: center; }
.cd-tape-vs span { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .18em;
                   text-transform: uppercase; padding: 4px 12px; border: 1px solid var(--color-text);
                   border-radius: 999px; }
.cd-tape-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border, var(--border)); }
.cd-tape-row:last-of-type { border-bottom: 0; }
.cd-tape-num { font-family: var(--font-heading); font-weight: 800; font-size: 20px;
               line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-tape-num--them { text-align: right; }
.cd-tape-num--you { color: var(--color-accent); }
.cd-tape-bar { position: relative; display: flex; height: 22px; border-radius: 3px;
               background: var(--color-neutral-200, var(--row-tint)); overflow: hidden; }
.cd-tape-bar > span { display: block; height: 100%; }
.cd-tape-bar--them { justify-content: flex-end; }
.cd-tape-bar--them > span { background: var(--color-text); border-radius: 3px 0 0 3px; }
.cd-tape-bar--you > span { background: var(--color-accent); border-radius: 0 3px 3px 0; }
.cd-tape-mid { text-align: center; min-width: 0; }
.cd-tape-label { display: block; font-size: 12.5px; font-weight: 700; }
.cd-tape-ratio { display: block; font-family: var(--font-heading); font-weight: 800;
                 font-size: 26px; line-height: 1.05; letter-spacing: -0.02em; margin-top: 2px;
                 font-variant-numeric: tabular-nums; }
.cd-tape-row.is-yours .cd-tape-ratio { color: var(--color-accent); }
.cd-tape-row.is-level .cd-tape-ratio { font-size: 16px; color: var(--color-neutral-700); }
.cd-tape-mid i { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--color-neutral-700); }
.cd-tape-mid small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35;
                     color: var(--color-neutral-700); }

/* ── The hundred dots ──────────────────────────────────────────────────
   The pair's total, one dot per percent, yours first so they sit in the
   top-left corner where the eye lands. */
.cd-waffle-pair { display: grid; gap: var(--space-4) var(--space-6);
                  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cd-waffle-card { display: grid; grid-template-columns: 150px minmax(0, 1fr);
                  gap: var(--space-3); align-items: center; }
.cd-waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; width: 150px; }
.cd-waffle i { display: block; aspect-ratio: 1 / 1; border-radius: 2px;
               background: var(--color-neutral-300); }
.cd-waffle i.is-you { background: var(--color-accent); }
.cd-waffle-cap { margin: 0; font-size: 13px; line-height: 1.45; }
.cd-waffle-cap b { font-family: var(--font-heading); font-weight: 800; font-size: 22px;
                   font-variant-numeric: tabular-nums; }
.cd-waffle-label { display: block; font-size: 10.5px; letter-spacing: .12em;
                   text-transform: uppercase; font-weight: 800; color: var(--color-neutral-700);
                   margin-bottom: 4px; }
.cd-waffle-cap small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--color-neutral-700); }

/* ── The field: the authority axis ─────────────────────────────────────
   The true 0-1000 rank, the field's range shaded between its weakest
   and its strongest, the median ticked, their diamond on the line, your
   flag above it. Same axis as the competitor report's power ladder. */
.cd-ladder { margin: var(--space-2) 0 var(--space-4); }
.cd-ladder-track { position: relative; height: 128px; }
.cd-ladder-line { position: absolute; left: 0; right: 0; top: 74px; height: 1px;
                  background: var(--color-neutral-400, var(--slate)); }
.cd-ladder-field { position: absolute; top: 60px; height: 29px; overflow: hidden;
                   background: color-mix(in srgb, var(--color-neutral-500, var(--slate)) 14%, transparent);
                   border-left: 1px solid var(--color-neutral-500, var(--slate));
                   border-right: 1px solid var(--color-neutral-500, var(--slate)); }
.cd-ladder-field b { position: absolute; bottom: 4px; left: 8px; font-size: 10px; letter-spacing: .12em;
                     text-transform: uppercase; font-weight: 800; white-space: nowrap;
                     color: var(--color-neutral-700); }
.cd-ladder-median { position: absolute; top: 56px; width: 2px; height: 37px;
                    background: var(--color-neutral-600); transform: translateX(-50%); }
.cd-ladder-median span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
                         margin-top: 3px; font-size: 10px; font-style: normal; white-space: nowrap;
                         color: var(--color-neutral-700); }
.cd-ladder-you { position: absolute; top: 0; transform: translateX(-50%); text-align: center; z-index: 3; }
.cd-ladder-flag { display: inline-block; background: var(--color-accent); color: var(--white); font-size: 10px;
                  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; }
.cd-ladder-you b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 26px;
                   line-height: 1; margin-top: 4px; font-variant-numeric: tabular-nums;
                   color: var(--color-accent); }
.cd-ladder-stem { display: block; width: 2px; height: 22px; background: var(--color-accent); margin: 3px auto 0; }
.cd-ladder-them { position: absolute; top: 68px; transform: translateX(-50%); text-align: center; z-index: 2; }
.cd-ladder-pin { display: block; width: 13px; height: 13px; background: var(--color-text);
                 margin: 0 auto; transform: rotate(45deg); }
.cd-ladder-them b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 26px;
                    line-height: 1; margin-top: 9px; font-variant-numeric: tabular-nums; }
.cd-ladder-them small { display: block; font-size: 10.5px; white-space: nowrap; color: var(--color-neutral-700); }
.cd-ladder-axis { position: relative; height: 18px; border-top: 1px solid var(--color-border, var(--border)); }
.cd-ladder-axis i { position: absolute; top: 4px; font-size: 10px; font-style: normal;
                    color: var(--color-neutral-700); transform: translateX(-50%); }
.cd-ladder-axis i:first-child { transform: none; }
.cd-ladder-axis i:last-child { transform: translateX(-100%); }
.cd-standings { display: grid; gap: var(--space-3) var(--space-4);
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cd-standing { padding: var(--space-2) 0 0; border-top: 2px solid var(--color-text); }
.cd-standing-label { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
                     font-weight: 800; color: var(--color-neutral-700); }
.cd-standing-place { margin: 2px 0 6px; font-size: 13px; color: var(--color-neutral-700); }
.cd-standing-place b { font-family: var(--font-heading); font-weight: 800; font-size: 26px;
                       line-height: 1; color: var(--color-text); font-variant-numeric: tabular-nums; }
/* .cd-bar is a span: blockified here, since these are not grid cells. */
.cd-standing .cd-bar, .cd-ground-card .cd-bar { display: block; height: 8px; }
.cd-standing small { display: block; margin-top: 5px; font-size: 11px; line-height: 1.35;
                     color: var(--color-neutral-700); }

/* ── The contested ground: four figures with no "you" side ──────────── */
.cd-ground { display: grid; gap: var(--space-3) var(--space-4);
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cd-ground-card { padding: var(--space-2) 0 0; border-top: 2px solid var(--color-text); min-width: 0; }
.cd-ground-label { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
                   font-weight: 800; color: var(--color-neutral-700); }
.cd-ground-num { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 30px;
                 line-height: 1.05; letter-spacing: -0.02em; margin: 2px 0 6px;
                 font-variant-numeric: tabular-nums; }
.cd-ground-num.is-none { color: var(--color-neutral-400, var(--slate)); font-weight: 400; }
.cd-ground-card small { display: block; margin-top: 5px; font-size: 11px; line-height: 1.35;
                        color: var(--color-neutral-700); }
/* The position dial: page one, page two, beyond — and the pin. */
.cd-dial { position: relative; margin-top: var(--space-3); padding-top: 14px; }
.cd-dial-zones { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 14px; border-radius: 3px; overflow: hidden; }
.cd-dial-zones i { font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
                   line-height: 14px; padding-left: 5px; white-space: nowrap; overflow: hidden; }
.cd-dial-z1 { background: var(--mint-bg); color: var(--mint-text); }
.cd-dial-z2 { background: var(--amber-bg); color: var(--amber-text); }
.cd-dial-z3 { background: var(--color-neutral-200, var(--row-tint)); color: var(--color-neutral-700); }
.cd-dial-pin { position: absolute; top: 12px; width: 2px; height: 18px; background: var(--color-text);
               transform: translateX(-50%); }
.cd-dial-pin b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
                 margin-bottom: 1px; font-size: 11px; font-weight: 800; white-space: nowrap;
                 font-variant-numeric: tabular-nums; }

/* One quantity cut into parts: one bar cut into parts. */
.cd-stack { display: flex; height: 24px; border-radius: 4px;
            overflow: hidden; background: var(--color-neutral-200, var(--row-tint)); }
.cd-stack > div { min-width: 3px; }
.cd-seg--good { background: var(--mint); }
.cd-seg--warn { background: var(--amber); }
.cd-seg--bad  { background: var(--coral); }
.cd-seg--info { background: var(--color-neutral-400, var(--slate)); }
.cd-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
          margin-top: var(--space-2); font-size: 12px; }
.cd-key > div { display: flex; align-items: baseline; gap: var(--space-1); }
.cd-swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.cd-key b { font-variant-numeric: tabular-nums; }
.cd-key i { font-style: normal; color: var(--color-neutral-700); }

/* Bands: a row of label, bar, figure — read top to bottom. */
.cd-band { display: grid; align-items: center; gap: var(--space-3);
           grid-template-columns: minmax(150px, 1fr) minmax(0, 2.4fr) auto;
           padding: var(--space-1) 0; }
.cd-band-name { font-size: 12.5px; }
.cd-band-val { text-align: right; font-size: 12.5px; white-space: nowrap;
               font-variant-numeric: tabular-nums; }
.cd-band-val b { font-size: 14px; }
.cd-band-val span { color: var(--color-neutral-700); }

@media (max-width: 720px) {
  .cd-band { grid-template-columns: 1fr; gap: var(--space-1); }
  .cd-band-val { text-align: left; }
  /* The tape folds: label and ratio on top, then their bar, then yours. */
  .cd-tape-row { grid-template-columns: minmax(64px, max-content) minmax(0, 1fr) minmax(64px, max-content); }
  .cd-tape-num { font-size: 17px; }
  .cd-tape-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cd-tape-head .cd-tape-side { grid-column: auto; }
  .cd-tape-head .cd-tape-vs { display: none; }
  .cd-tape-side b { font-size: 18px; }
  .cd-tape-mid { grid-column: 1 / -1; order: -1; text-align: left; }
  .cd-tape-mid small { display: none; }
  .cd-tape-num--them { grid-column: 1; }
  .cd-tape-bar--them { grid-column: 2 / 4; }
  .cd-tape-bar--you { grid-column: 1 / 3; }
  .cd-tape-num--you { grid-column: 3; text-align: right; }
  .cd-waffle-card { grid-template-columns: 1fr; }
  /* Too narrow for the median's label beside the domain's: the tick stays. */
  .cd-ladder-median span { display: none; }
}
@media print {
  /* Backgrounds are what these figures ARE — without them a bar is an
     empty outline and the page prints as a list of numbers. */
  .cd-bar > span, .cd-stack > div, .cd-swatch, .cd-tape-bar > span,
  .cd-waffle i, .cd-ladder-field, .cd-ladder-flag, .cd-dial-zones i {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}