/* linkedin-company-page-benchmark.html
 *
 * The benchmark tool and what it draws. .page-head, .section, .sec-head,
 * .feat-pair/.feat-tile, .card, .tag, .compare-wrap/.compare-table, .cta-card
 * and .btn all come from styles.css and need nothing here.
 *
 * What the site had no component for: a file drop zone, verdict chips on the
 * scorecard, chart figures with a legend and a table twin, and a grid for the
 * research cards. The FAQ accordion is here too, for the reason in the note
 * above its rules.
 *
 * Sizes are the ones the site already sets for the same jobs (15px for copy
 * in a card, 13px for dense UI, 12px for micro labels, --r-md for a control),
 * so the file adds no primitive of its own. check-design.py E3 holds a new
 * stylesheet to zero.
 */

/* ── Surfaces ────────────────────────────────────────────────────────────── */

/* The tool is the point of the page, so it gets the one ink band, the same as
   the formatter's editor. The results and the method sit on paper so the
   cream and paper alternate down the page. */
.bm-band { background: var(--ink); }
.bm-results,
.bm-method { background: var(--paper); }

/* Above or below the tier median in the "pages that post like you" chart.
   Green is the brand's colour for positive deltas, which the site had no
   token for. Red is --punch-red rather than --punch-orange, because orange
   and this green blur together for protanopes (dataviz validator, ΔE 1.4). */
.bm-results { --bm-up: #1f8a4c; }

/* Hero action row. Same values as .ltf-jump on the formatter: .page-head has
   no action row of its own. */
.bm-jump {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── The tool card ───────────────────────────────────────────────────────── */

/* Held to the FAQ's measure and centred, like the formatter's composer. */
.bm-shell {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bm-shell h2 {
  font-size: 28px;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

.bm-note {
  font-size: 15px;
  color: var(--ink-3);
}

.bm-note a { color: var(--blue); }

.bm-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* A label wraps each input, so the whole zone is the click target and a
   screen reader reads the field name with the control. */
.bm-drop,
.bm-number {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.bm-drop { cursor: pointer; }
.bm-drop:hover,
.bm-drop.is-over { border-color: var(--blue); background: var(--blue-soft); }
.bm-drop.is-set { border-color: var(--blue-mid); background: var(--white); }

/* The native file button is hidden but stays focusable; the zone shows the
   focus ring instead. */
.bm-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bm-drop:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }

.bm-field-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.bm-optional {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-4);
}

.bm-field-hint {
  font-size: 13px;
  color: var(--ink-4);
  overflow-wrap: anywhere;
}

.bm-drop.is-set .bm-field-hint { color: var(--ink-2); }

.bm-number input,
.bm-name input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.bm-number input:focus-visible,
.bm-name input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.bm-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bm-status {
  min-height: 22px;
  font-size: 14px;
  color: var(--ink-3);
}

/* Errors keep body-ink text and carry the colour in a dot: punch red is too
   light for 14px copy on white. */
.bm-status.is-error { color: var(--ink); }
.bm-status.is-error::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--punch-red);
}

/* ── Results ─────────────────────────────────────────────────────────────── */

.bm-flag {
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--blue-soft);
  font-size: 14px;
  color: var(--ink-2);
}

/* The notes bar carries the PDF export as its second column: the name that
   heads the PDF, and a secondary button, since the section's one primary
   action is the demo card under the charts. */
.bm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.bm-bar-text { flex: 1 1 20em; }

.bm-bar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.bm-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bm-name input { width: 14em; }
.bm-bar .btn-ghost { background: var(--white); }

/* Scorecard deltas on .compare-table: the value column carries the number
   at the size the site uses for a figure in a table, and each measure has a
   one-line qualifier underneath. */
.bm-score td.bm-value {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bm-score small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-4);
  letter-spacing: 0;
  white-space: normal;
}

.bm-score td.bm-bench { color: var(--ink-3); }

/* Verdict chips extend the global .tag. Colour is never the only signal: each
   chip carries a word and a shape. */
/* A chip never wraps onto a second line. */
.bm-v { white-space: nowrap; }
.bm-v svg { width: 8px; height: 8px; }
.bm-v.is-ahead  { background: var(--blue-soft); color: var(--blue); }
.bm-v.is-ahead svg { fill: var(--blue); }
.bm-v.is-par    { background: var(--cream-2); color: var(--ink-3); }
.bm-v.is-par svg { fill: var(--ink-4); }
.bm-v.is-behind { background: var(--cream-2); color: var(--ink); }
.bm-v.is-behind svg { fill: var(--punch-orange); }
.bm-v.is-na     { background: transparent; border: 1px solid var(--rule); color: var(--ink-4); }
.bm-v.is-na svg { fill: var(--ink-4); }

.bm-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.bm-fig {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.bm-fig-wide { grid-column: 1 / -1; }

.bm-fig figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bm-fig-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.bm-fig-sub {
  max-width: 72ch;
  font-size: 14px;
  color: var(--ink-4);
}

.bm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-3);
}

.bm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bm-key-line { width: 18px; height: 2px; border-radius: 2px; background: var(--blue); }
.bm-key-dot  { width: 10px; height: 10px; border-radius: 50%; background: var(--punch-orange); }
.bm-key-band { width: 18px; height: 10px; border-radius: 2px; background: var(--blue-mid); opacity: 0.45; }
.bm-key-band.bm-soft { opacity: 0.15; }
.bm-key-bar  { width: 12px; height: 10px; border-radius: 2px; background: var(--punch-orange); }
.bm-key-line.bm-dim,
.bm-key-bar.bm-dim { background: var(--ink-4); }

/* Charts are drawn at the container's real width, so text keeps its size. */
.bm-chart {
  position: relative;
  width: 100%;
}

.bm-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Every label sits on a white halo, so a line passing behind it never cuts
   through the text. */
.bm-chart text {
  font-family: var(--sans);
  font-size: 12px;
  fill: var(--ink-4);
  paint-order: stroke;
  stroke: var(--white);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.bm-chart .bm-t-ink {
  font-size: 13px;
  font-weight: 500;
  fill: var(--ink);
}

.bm-chart svg:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }

.bm-empty {
  font-size: 14px;
  color: var(--ink-4);
}

.bm-data summary {
  cursor: pointer;
  width: fit-content;
  font-size: 13px;
  color: var(--ink-3);
}

.bm-data[open] summary { margin-bottom: 12px; }
.bm-data .compare-table { margin-top: 0; }

/* The results end on the page's ask, next to the numbers that prompt it. A
   blue card rather than a second .cta-card: a page keeps one of those, at its
   end (build-standard-page.md §3). */
.bm-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin-top: 16px;
}

.bm-cta > div:first-child { flex: 1 1 auto; }

.bm-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The secondary button on the blue card, in white. */
.bm-cta .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.bm-cta .btn-ghost:hover { border-color: var(--white); }

.bm-cta h3 {
  font-size: 28px;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

.bm-cta p {
  margin-top: 12px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--blue-soft);
}

.bm-tip {
  position: fixed;
  z-index: 30;
  max-width: 280px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--on-dark);
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}

.bm-tip b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

/* ── The research ────────────────────────────────────────────────────────── */

/* Six columns so the three Willow studies share one row and the two outside
   studies the next, rather than five cards leaving a hole. The last two cards
   are the outside studies. */
.bm-sources {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.bm-source {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.bm-source:nth-child(n + 4) { grid-column: span 3; }

.bm-source h3 {
  font-size: 22px;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.bm-source p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}

.bm-source-links {
  display: flex;
  gap: 16px;
  margin-top: auto;
  font-size: 14px;
}

.bm-source-links a { color: var(--blue); }

/* ── FAQ accordion ───────────────────────────────────────────────────────── */

/* components.md lists .faq-q / .faq-a as global. They are not: the rules live
 * byte-identical in page-pricing.css, comparison.css and
 * page-linkedin-text-formatter.css, and this makes a fourth copy. Copied
 * rather than promoted for the reason the formatter gives: hoisting a
 * component 60 pages render is its own change with its own review. Logged in
 * TODO.md §20c. Kept identical to the others, without their `.faq` padding
 * line, so the consolidation stays a straight move.
 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 40px;
  max-width: 880px;
}

.faq-item {
  border-top: 1px solid var(--rule);
  padding: 20px 0;
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.012em;
  gap: 32px;
}

.faq-q .indic {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  padding-top: calc(2 * var(--optical-plus));
  line-height: 1;
  letter-spacing: 0;
  transition: transform 0.2s;
}

.faq-item.open .indic { background: var(--blue); color: var(--white); transform: rotate(45deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, margin-top 0.2s;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
}

.faq-item.open .faq-a { max-height: 400px; margin-top: 16px; }

/* ── Narrower screens ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .bm-fields,
  .bm-figs,
  .bm-sources { grid-template-columns: minmax(0, 1fr); }

  .bm-source,
  .bm-source:nth-child(n + 4) { grid-column: auto; }
}

@media (max-width: 720px) {
  .bm-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* The scorecard is the summary, so on a phone it stacks instead of
     scrolling sideways: measure and number on one line, the benchmark under
     them, the verdict last. */
  .bm-score { min-width: 0; }
  .bm-score thead { display: none; }
  .bm-score tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rule);
  }
  .bm-score tr:last-child { border-bottom: 0; }
  .bm-score td {
    display: block;
    padding: 0;
    border: 0;
  }
  .bm-score td.feat { width: auto; }
  .bm-score td.bm-value { text-align: right; }
  .bm-score td.bm-bench { grid-column: 1 / -1; font-size: 13px; }
  .bm-score td:last-child { grid-column: 1 / -1; }

  /* The export controls take the full width, the label above its field. */
  .bm-bar-actions { flex: 1 1 100%; }
  .bm-name { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 6px; }
  .bm-name input { width: 100%; }
  .bm-bar-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── The PDF ─────────────────────────────────────────────────────────────── */

/* The opening band and the closing cards exist only on paper. */
.bm-print-only { display: none !important; }

/* The PDF's running footer, per language, so the Dutch twin gets its own
   spelling without a change to its markup. */
:root { --bm-footer: "Willow LinkedIn benchmark"; }
:root:lang(nl) { --bm-footer: "Willow LinkedIn-benchmark"; }

/* "Export as PDF" opens the browser's print window. Before the page is laid
   out for paper, the script puts .bm-printing on <html> and redraws the
   charts, so they are drawn at the width they print at instead of shrinking
   with their text. These rules set that width, an A4 page less its margins,
   and stack the charts one under the other. They hold on screen for that
   moment too. Block flow, not the grid, because charts in a grid can overlap
   the text above them where the grid breaks across pages. */
.bm-printing .bm-results .wrap {
  width: 186mm;
  max-width: none;
  margin: 0;
  padding: 0;
}

.bm-printing .bm-figs { display: block; }
.bm-printing .bm-fig { margin-top: 16px; }

/* The paper: A4, with room at the foot for the running footer. Chrome and
   Edge draw @page margin boxes on every page; a browser without them prints
   the same report without the footer. @page only ever applies on paper, so it
   sits outside the print block. */
@page {
  size: A4;
  margin: 12mm 12mm 20mm;
  background: var(--cream);
  @bottom-left { content: url("willow-wordmark.svg"); }
  @bottom-right {
    content: var(--bm-footer);
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-4);
  }
}

@media print {
  /* Only the results go on paper, on the brand's cream, where the white
     cards read the way the brand intends. */
  html,
  body {
    background: var(--cream) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* site.js wraps the page in <main class="site-main"> after load, with
     the nav and footer beside it, so both levels are cleared. */
  body > *:not(#results):not(.site-main),
  .site-main > *:not(#results) { display: none !important; }
  .site-main { margin: 0; padding: 0; }
  .section.bm-results { padding: 0; border-top: 0; background: transparent; }
  .bm-results .sec-head,
  .bm-results noscript,
  .bm-bar-actions,
  .bm-bar:not(.has-notes),
  .bm-cta,
  .bm-data,
  .bm-fig-sub { display: none !important; }
  .bm-bar { margin-top: 0; }
  .bm-print-only { display: block !important; }

  /* Browsers leave background colours out of a printout unless told not to. */
  .bm-results,
  .bm-results * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .bm-score tr,
  .bm-fig,
  .bm-close { break-inside: avoid; }

  /* The scorecard at paper width. The measure column gives up the 40% the
     site's comparison tables reserve for it, so the benchmark text has room,
     and the table's own top margin moves outside its frame. */
  .bm-results .compare-wrap { margin-top: 16px; }
  .bm-results .compare-table { margin-top: 0; }
  .bm-score td.feat { width: 30%; }
  .bm-score td.bm-bench { width: 40%; }

  /* The opening band: the title big, on brand blue, with the company's name
     in the soft blue the brand allows on a blue fill. */
  .bm-print-head.bm-print-only {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding: 28px 32px;
  }
  .bm-print-title {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.05;
    color: var(--white);
    margin-bottom: 12px;
  }
  .bm-print-name { color: var(--blue-mid); }
  .bm-print-head p:not(.bm-print-title) { font-size: 15px; color: var(--blue-soft); }

  /* The close: what Willow is, beside two small cards with the ways on. Two
     equal columns, so the small cards' titles and addresses sit on one line
     and the block stays short enough to share the last page with the charts.
     A small grid that never breaks across pages, so none of the fragmentation
     trouble the charts had. */
  .bm-close.bm-print-only {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
  }
  .bm-close-main {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    padding: 20px 28px;
  }
  .bm-close-main .bm-close-url { margin-top: auto; padding-top: 12px; color: var(--white); }
  .bm-close-title { display: block; font-size: 17px; font-weight: 600; color: var(--blue); }
  .bm-close-main .bm-close-title { font-size: 22px; color: var(--white); }
  .bm-close-main p + p { margin-top: 8px; font-size: 14px; color: var(--blue-soft); }
  .bm-close-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 20px;
    background: var(--white);
    font-size: 13px;
    color: var(--ink-2);
    text-decoration: none;
  }
  .bm-close-url { color: var(--blue); font-weight: 500; overflow-wrap: anywhere; }
  /* One size down, so the longest address, the Dutch benchmark's, stays on
     one line and the cards keep to the last page. */
  .bm-close-link .bm-close-url { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-drop,
  .faq-q .indic,
  .faq-a { transition: none; }
}