/* Article "Advertising wins and flops" (/articles/advertising-wins-and-flops/),
   on top of style.css and articles.css. Classes start with .ad-. One color
   language for the living data: blue (--s1) for advertising, darker the larger
   its share of revenue (bands ad-b0 … ad-b3; ad-bx: revenue unknown). Case
   files: losses --bad, gains --good, the "before" bar gray. */

.ad { --ad-o0: 0.3; --ad-o1: 0.52; --ad-o2: 0.76; --ad-o3: 1; --ad-dark-ink: #fff; }
:root[data-theme="dark"] .ad, :root[data-theme="black"] .ad { --ad-dark-ink: #1d1d1f; }

/* band swatches (legend, tables, tooltips) */
.sw-sq.ad-b0, .sw-sq.ad-b1, .sw-sq.ad-b2, .sw-sq.ad-b3, .sw-sq.ad-bx, .sw-sq.ad-minisw { background: var(--s1); }
.sw-sq.ad-b0 { opacity: var(--ad-o0); } .sw-sq.ad-b1 { opacity: var(--ad-o1); }
.sw-sq.ad-b2 { opacity: var(--ad-o2); } .sw-sq.ad-b3 { opacity: var(--ad-o3); }
.sw-sq.ad-bx { background: var(--line-gray); opacity: 0.5; }
.sw-sq.ad-medsw { background: var(--ink); height: 3px; border-radius: 2px; }
.ad .tip { min-width: 240px; }
.ad-tip-t { font: 500 11px var(--mono); color: var(--muted); margin-left: 4px; }
.ad-tip-sub { margin: -3px 0 5px; font-size: 11.5px; color: var(--muted); }
.ad-tip-note { margin-top: 4px; font-size: 11px; color: var(--muted); }

/* treemap (js/treemap.js) */
.ad-map { min-height: 440px; }
.ad-map .tm-c { fill: var(--s1); stroke: var(--surface); stroke-width: 1; cursor: pointer; }
.ad-map .tm-c.ad-b0 { fill-opacity: var(--ad-o0); } .ad-map .tm-c.ad-b1 { fill-opacity: var(--ad-o1); }
.ad-map .tm-c.ad-b2 { fill-opacity: var(--ad-o2); } .ad-map .tm-c.ad-b3 { fill-opacity: var(--ad-o3); }
.ad-map .tm-c.ad-bx { fill: var(--line-gray); fill-opacity: 0.4; }
.ad-map .tm-c.tm-off { fill-opacity: 0.08; }
.ad-map .tm-frames rect { fill: none; stroke: var(--surface); stroke-width: 3; }
.ad-map .tm-frames, .ad-map .tm-labels, .ad-map .tm-hi { pointer-events: none; }
.ad-map .tm-t, .ad-map .tm-s { text-anchor: middle; fill: var(--ink); }
.ad-map .tm-t { font-family: var(--font); font-weight: 700; letter-spacing: 0.01em; }
.ad-map .tm-s { font-family: var(--mono); font-weight: 500; opacity: 0.9; }
.ad-map .tm-t.ad-b2, .ad-map .tm-s.ad-b2, .ad-map .tm-t.ad-b3, .ad-map .tm-s.ad-b3 { fill: var(--ad-dark-ink); }
.ad-map .tm-tag rect { fill: var(--surface); opacity: 0.92; }
.ad-map .tm-tag text { fill: var(--ink); font-family: var(--font); font-weight: 650; }
.ad-map .tm-tag:hover rect { opacity: 1; }
.ad-map .tm-hi { fill: none; stroke: var(--ink); stroke-width: 2; }
.ad-map .tm-tap { color: var(--accent-ink); font-weight: 600; margin-top: 6px; }

/* tables */
.ad-table td.ad-sec-cell, .ad-table th.ad-sec-cell { text-align: left; color: var(--ink-2); white-space: nowrap; }
.ad-table td.ad-share { white-space: nowrap; }
.ad-table td.ad-share .sw-sq { margin-right: 6px; vertical-align: 0; }
.ad-table td.ad-left, .ad-table th.ad-left { text-align: left; }
.ad-table thead th:nth-child(2) { text-align: left; }
.ad-table th[scope="row"] a { color: var(--ink); text-decoration: none; }
.ad-table th[scope="row"] a:hover { color: var(--accent-ink); }
.ad-mark { margin-left: 2px; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) { .ad-table .ad-sec-cell { display: none; } }
@media (max-width: 480px) { .ad-table .ad-fy-cell, .ad-table .ad-sm-hide { display: none; } .ad-table td.ad-share .sw-sq { display: none; } .ad-table thead th { white-space: normal; } }

/* strip plot and scatter */
.ad-strip { min-height: 360px; }
.ad-scatter { min-height: 380px; }
.ad-dot { fill: var(--s1); stroke: var(--surface); stroke-width: 1.2; transition: fill-opacity 0.15s; }
.ad-dot.ad-b0 { fill-opacity: var(--ad-o0); } .ad-dot.ad-b1 { fill-opacity: var(--ad-o1); }
.ad-dot.ad-b2 { fill-opacity: var(--ad-o2); } .ad-dot.ad-b3 { fill-opacity: var(--ad-o3); }
.ad-dot.ad-bx { fill: var(--line-gray); }
.ad-dot.on { stroke: var(--ink); stroke-width: 2; fill-opacity: 1; }
.ad-dot.ad-off { fill: var(--line-gray); fill-opacity: 0.18; stroke-opacity: 0.4; }
.ad-strip-lab { fill: var(--ink); font: 600 12px var(--font); }
.ad-strip-n { fill: var(--muted); font-weight: 500; }
.ad-strip-axis { stroke: var(--grid); stroke-width: 1; }
.ad-strip-med { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.ad-log, .ad-axis { fill: var(--muted); font-size: 11px; }
.ad-guide { stroke: var(--ink); stroke-opacity: 0.28; stroke-width: 1.2; stroke-dasharray: 5 5; }
.ad-guide-l { fill: var(--muted); font: 500 11px var(--font); }
.ad-sc-lab { fill: var(--ink-2); font: 600 11px var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.ad-chips { margin-top: 4px; }

/* small multiples */
.ad-multi-fig { padding: 14px 14px 6px; }
.ad-multi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 960px) { .ad-multi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ad-multi-fig > .legend { margin: 0 0 10px; }
.ad-mini { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 12px 10px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.ad-mini-h { font: 650 14px/1.25 var(--font); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-mini-h a { color: var(--ink); text-decoration: none; }
.ad-mini-h a:hover { color: var(--accent-ink); }
.ad-mini-v { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ad-mini-v b { font: 600 20px/1.1 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.ad-mini-v span { font-size: 11.5px; color: var(--muted); }
.ad-mini-plot { position: relative; margin-top: 4px; }
.ad-mini-plot svg { display: block; width: 100%; overflow: visible; }
.ad-mini-plot .tip { min-width: 190px; }
.ad-mini-bar { fill: var(--s1); fill-opacity: 0.78; }
.ad-mini-bar.on { fill-opacity: 1; }
.ad-mini-base { stroke: var(--axis); stroke-width: 1; }
.ad-mini-line { fill: none; stroke: var(--s2); stroke-width: 1.6; stroke-linejoin: round; }
.ad-mini-dot { fill: var(--s2); }
.ad-mini-s { font-size: 12px; color: var(--ink-2); }
.ad-mini-s::before { content: ""; display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: 3px; background: var(--s2); border-radius: 1px; }
.ad-mini .tick { font-size: 10px; }
@media (max-width: 560px) {
  .ad-multi-fig { padding: 10px 8px 6px; }
  .ad-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ad-mini { padding: 10px 9px 8px; border-radius: 14px; }
  .ad-mini-v b { font-size: 17px; }
}

/* case files */
.ad-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px !important; }
@media (max-width: 860px) { .ad-cases { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 861px) {
  .ad-case.ad-v-seller { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px 32px; align-content: start; }
  .ad-v-seller > :nth-child(-n+4) { grid-column: 1; }
  .ad-v-seller > :nth-child(n+5) { grid-column: 2; }
  .ad-v-seller .ad-quip { margin-top: 0; }
}
.ad-case { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; scroll-margin-top: 80px; }
.ad-case-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ad-case-no { font: 600 11.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ad-verdict { font: 650 11px/1 var(--font); letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px;
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); }
.ad-v-loss .ad-verdict { color: var(--bad); background: var(--bad-soft); box-shadow: none; }
.ad-v-after .ad-verdict { color: var(--good); background: var(--good-soft); box-shadow: none; }
.ad-v-notthead .ad-verdict, .ad-v-seller .ad-verdict { color: var(--accent-ink); background: var(--accent-soft); box-shadow: none; }
.ad-v-undisclosed .ad-verdict { box-shadow: none; outline: 1px dashed var(--axis); outline-offset: -1px; }
.ad-case-h { margin: 0; font: 700 22px/1.15 var(--display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.ad-case-what { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.ad-case-big { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding-top: 2px; }
.ad-case-big .mid { color: var(--ink); }
.ad-case-big .mid.ad-word { font-family: var(--display); letter-spacing: -0.03em; }
.ad-v-loss .ad-case-big .mid { color: var(--cash-ink); }
.ad-case-big .label { flex: 1 1 180px; margin: 0; line-height: 1.35; }
.ad-bars { display: grid; gap: 7px; }
.ad-bar { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) auto; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.ad-bar-l { line-height: 1.3; }
.ad-bar-t { display: block; height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.ad-bar-f { display: block; height: 100%; border-radius: 5px; background: var(--line-gray); }
.ad-bar-f.ad-f1 { background: var(--ink-2); opacity: 0.6; }
.ad-bar-f.ad-fbad { background: var(--bad); }
.ad-bar-f.ad-fgood { background: var(--good); }
.ad-bar-v { font: 600 12.5px var(--mono); color: var(--ink); text-align: right; min-width: 64px; }
@media (max-width: 560px) {
  .ad-case { padding: 18px 16px; }
  .ad-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; gap: 3px 10px; }
  .ad-bar-l { grid-area: l; } .ad-bar-v { grid-area: v; } .ad-bar-t { grid-area: t; }
}
.ad-case-extra { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ad-quote { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 3px 0 0 var(--axis); }
.ad-quote p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.ad-quote footer { font-size: 12px; line-height: 1.4; color: var(--muted); }
.ad-quote footer a { color: var(--accent-ink); }
.ad-quip { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 14px; line-height: 1.45; font-weight: 550; color: var(--ink); }
.ad-quip::before { content: "↳ "; color: var(--muted); font-weight: 500; }

/* timeline */
.ad-tl-chips { margin-top: 4px; }
.ad-tl-wrap { margin-top: 10px !important; }
.ad-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.ad-tl-i { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 15px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow), inset 3px 0 0 var(--line-gray); }
.ad-tl-i[hidden] { display: none; }
.ad-k-media { box-shadow: var(--shadow), inset 3px 0 0 var(--s1); }
.ad-k-classic { box-shadow: var(--shadow), inset 3px 0 0 var(--s4); }
.ad-k-backlash { box-shadow: var(--shadow), inset 3px 0 0 var(--s2); }
.ad-k-flop { box-shadow: var(--shadow), inset 3px 0 0 var(--bad); }
.ad-tl-y { font: 600 22px/1 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.ad-tl-b { display: flex; flex-direction: column; gap: 3px; }
.ad-tl-kind { font: 650 10.5px/1.2 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ad-tl-h { margin: 0; font: 650 15.5px/1.3 var(--font); letter-spacing: -0.01em; color: var(--ink); }
.ad-tl-b p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ad-tl-case { font-weight: 600; color: var(--accent-ink); white-space: nowrap; text-decoration: none; }
.ad-tl-case:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .ad-tl { gap: 8px; }
  .ad-tl-i { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 0 10px; padding: 11px 13px 12px 12px; border-radius: 14px; }
  .ad-tl-y { font-size: 16px; padding-top: 1px; }
  .ad-tl-h { font-size: 15px; }
  .ad-tl-b p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) { .ad-dot { transition: none; } }