/* PT24 ads: the sold unit's shape on every screen, the words under it, the
   anchor bar, the between-pages card and the call-back form. Loaded beside
   pt24.css by the base template; `ads.js` draws most of what is styled here.
   The paper's tokens only, and the rule pt24.css states for this family:
   disclosure is never optional, a commercial unit always carries its label
   and the label reads before the creative does. */

/* The box a sold slot is drawn at, before and after the script fills it.
   Both sizes come from the slot row as custom properties on the unit, so the
   page holds the space (no layout shift) at the phone size on a phone and
   the desktop size elsewhere. A rail unit fills its rail; a unit in a wide
   column (the story's text, a stacked rail) is never drawn wider than a
   fifth again over the size it was sold at. */
.ad-unit.is-pending .ad-frame,
.ad-unit.is-sold .ad-frame {
  aspect-ratio: var(--ad-ratio, 300 / 250);
  max-width: calc(var(--ad-w, 300px) * 1.2);
  margin: 0 auto;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ad-unit.is-pending .ad-frame { cursor: default; background: var(--ad-wash); }
.ad-frame picture { display: block; width: 100%; height: 100%; }
.ad-unit.is-sold > .ad-copy,
.ad-unit.is-sold > .ad-disclosure { width: 100%; max-width: calc(var(--ad-w, 300px) * 1.2); margin: 0 auto; }

@media (max-width: 767px) {
  .ad-unit.is-pending .ad-frame,
  .ad-unit.is-sold .ad-frame {
    aspect-ratio: var(--ad-ratio-m, var(--ad-ratio, 300 / 250));
    max-width: min(100%, calc(var(--ad-w-m, 300px) * 1.25));
  }
  .ad-unit.is-sold > .ad-copy,
  .ad-unit.is-sold > .ad-disclosure { max-width: min(100%, calc(var(--ad-w-m, 300px) * 1.25)); }
}

/* The last unit of a rail grows into the rail's leftover height in pt24.css,
   which suits an unsold box and leaves a sold 300x250 floating in a tall band
   of wash. A sold unit keeps the shape it was sold at and travels instead: it
   stays sticky, so it rides beside the story the whole way down. */
.split > .rail > .ad-unit.is-sold:last-child,
.story-rail > .ad-unit.is-sold:last-child,
.split > .rail > .ad-unit.is-pending:last-child,
.story-rail > .ad-unit.is-pending:last-child { flex: 0 0 auto; max-height: none; }
.ad-unit.is-sold > .ad-frame,
.ad-unit.is-pending > .ad-frame { flex: 0 0 auto; }

/* Who the advertiser is, beside the label, so the reader knows whose ad it is
   before they click it. */
.ad-by { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-45); }
.ad-by::before { content: " | "; }

/* The words a creative may carry: a line, a sentence, a button. */
.ad-copy { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.ad-headline { font: 700 15px/1.3 var(--sans); color: var(--ink); margin: 0; }
.ad-body { font: 400 13px/1.45 var(--sans); color: var(--ink-60, var(--ink)); margin: 0; }
.ad-cta {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--paper); font: 600 14px var(--ui); text-decoration: none;
  cursor: pointer;
}
.ad-cta:hover { background: var(--paper); color: var(--ink); }
.ad-cta:disabled { opacity: .6; cursor: progress; }

/* The ad inside a story: a hairline above and below, so it reads as a break
   in the text and not as part of it. */
.ad-inline { margin: 28px 0; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ad-inline .ad-unit { max-width: 100%; }

/* ------------------------------------------------------------------ */
/* The anchor bar. Fixed at the foot of the screen, above the phone's tab */
/* bar; never taller than 100px of creative on a phone (the Better Ads    */
/* limit is 30% of the screen). The page keeps room for it.               */
/* ------------------------------------------------------------------ */
.ad-anchor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--paper); border-top: 1px solid var(--ink);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ad-anchor-inner {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 980px; margin: 0 auto; padding: 6px 52px 6px 12px;
}
.ad-anchor-label {
  position: absolute; left: 12px; top: 4px;
  font: 600 9px var(--sans); letter-spacing: calc(.12em * var(--track, 1)); text-transform: uppercase; color: var(--ink-45);
}
.ad-anchor-art {
  display: block; flex: 1 1 auto; width: 100%; max-height: 90px; overflow: hidden;
  background: var(--ad-wash); border: 0; padding: 0; cursor: pointer;
}
.ad-anchor-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ad-anchor .ad-close { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
html.has-ad-anchor body { padding-bottom: 104px; }

@media (max-width: 820px) {
  .ad-anchor { bottom: calc(var(--tabbar-h, 0px) + var(--safe-bottom, 0px)); padding-bottom: 0; }
  .ad-anchor-inner { padding: 14px 48px 4px 8px; }
  .ad-anchor-label { left: 8px; top: 2px; }
  .ad-anchor-art { max-height: 100px; }
  html.has-ad-anchor body { padding-bottom: calc(126px + var(--tabbar-h, 0px)); }
}

/* The close control, 44px square: the client's touch floor. */
.ad-close {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer;
}
.ad-close:hover { background: var(--wash); }
.ad-close:focus-visible, .ad-cta:focus-visible, .ad-continue:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* The dialogs: the between-pages card and the call-back form.         */
/* ------------------------------------------------------------------ */
.ad-dialog {
  position: fixed; inset: 0; margin: auto; box-sizing: border-box;
  width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 18px 18px 16px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
}
.ad-dialog::backdrop { background: rgba(20, 17, 14, .72); }
.ad-dialog > .ad-close { position: absolute; right: 6px; top: 6px; }
.ad-dialog-label {
  margin: 0 52px 10px 0; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
  font: 600 10px var(--sans); letter-spacing: calc(.12em * var(--track, 1)); text-transform: uppercase; color: var(--ink-45);
}
.ad-vignette { width: min(400px, calc(100vw - 32px)); }
.ad-vignette-art {
  display: block; width: 100%; max-height: 62vh; overflow: hidden; padding: 0; border: 0;
  background: var(--ad-wash); cursor: pointer;
}
.ad-vignette-art picture { display: block; width: 100%; height: 100%; }
.ad-vignette-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ad-vignette .ad-copy { margin-top: 10px; }
.ad-continue {
  display: block; width: 100%; min-height: 44px; margin-top: 12px;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 600 14px var(--ui); cursor: pointer;
}
.ad-continue:hover { background: var(--ink); color: var(--paper); }

@media (prefers-reduced-motion: no-preference) {
  .ad-dialog[open] { animation: ad-rise .18s ease-out; }
  @keyframes ad-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

.ad-lead-title { font: 700 19px/1.3 var(--sans); margin: 0 0 14px; }
.ad-lead-form { display: flex; flex-direction: column; gap: 12px; }
.ad-field { display: flex; flex-direction: column; gap: 4px; font: 600 13px var(--sans); }
.ad-field input, .ad-field textarea {
  font: 400 16px var(--sans); padding: 10px; border: 1px solid var(--ink-30, #999); border-radius: 0;
  background: var(--card, #fff); color: var(--ink); min-height: 44px;
}
.ad-field textarea { min-height: 72px; resize: vertical; }
.ad-consent { display: flex; gap: 10px; align-items: flex-start; font: 400 13px/1.45 var(--sans); }
.ad-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; }
.ad-lead-status { min-height: 1.4em; margin: 0; font: 600 13px var(--sans); color: var(--red-type, var(--ink)); }
.ad-lead-thanks { font: 600 16px/1.5 var(--sans); margin: 8px 0 4px; }
.ad-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ad-lead .ad-cta { align-self: stretch; }

/* A preview says so on the page, so a screenshot of it cannot pass for a live ad. */
.ad-preview-badge {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 60;
  padding: 8px 14px; background: var(--gold); color: var(--ink);
  font: 700 12px var(--sans); box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* ------------------------------------------------------------------ */
/* The advertiser's report (`/partner/<key>/`).                         */
/* ------------------------------------------------------------------ */
.partner { max-width: 1040px; margin: 0 auto; padding: 24px 16px 48px; font-family: var(--sans); color: var(--ink); }
.partner-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px;
  border-bottom: 1px solid var(--ink); padding-bottom: 14px; margin-bottom: 20px; }
.partner-head h1 { font: 700 26px/1.25 var(--sans); margin: 4px 0 0; }
.partner-kicker { font: 700 12px var(--sans); letter-spacing: calc(.08em * var(--track, 1)); text-transform: uppercase; color: var(--red-type, var(--red)); }
.partner-range { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; font-size: 13px; }
.partner-range label { display: flex; flex-direction: column; gap: 2px; }
.partner-range input, .partner-range button, .partner-range a {
  min-height: 40px; padding: 6px 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 600 13px var(--ui); text-decoration: none; display: inline-flex; align-items: center;
}
.partner-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); margin-bottom: 24px; }
.partner-kpi { background: var(--paper); padding: 14px; }
.partner-kpi strong { display: block; font: 700 26px/1.1 var(--sans); }
.partner-kpi span { font-size: 12px; color: var(--meta); }
.partner h2 { font: 700 17px var(--sans); margin: 26px 0 10px; }
.partner-chart { display: flex; align-items: flex-end; gap: 2px; height: 140px; border-bottom: 1px solid var(--ink);
  padding-top: 8px; overflow-x: auto; }
.partner-bar { flex: 1 0 8px; min-width: 8px; background: var(--ink); position: relative; }
.partner-bar:hover { background: var(--red); }
.partner-table-wrap { overflow-x: auto; }
.partner-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.partner-table th, .partner-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.partner-table th { font-weight: 700; border-bottom-color: var(--ink); }
.partner-table td.num, .partner-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.partner-state { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: calc(.06em * var(--track, 1)); color: var(--meta); }
.partner-state.is-live { color: var(--verified, #1E7A46); }
.partner-note { font-size: 12.5px; line-height: 1.55; color: var(--meta); max-width: 70ch; }
.partner-langs { display: flex; gap: 10px; font-size: 13px; }
.partner-langs a { color: var(--ink); }