/* T13 partner pages (scripts/lib/templates/partner.mjs, ops/design/templates/partner/contract.md).
   The AddOns list: the coverage panel's rows read label, the vendor's answer with its quote,
   then the tier word and the dated source, with hairlines between rows. Below 72rem
   everything is one column in reading order (coverage, what it does, check before you buy);
   from 72rem coverage takes 7 of 12 columns beside the two short panels. Brand v2.1 tokens
   only; the red button is the page's one primary action. */

.pt { padding-bottom: var(--s-7); }
.pt-head .wfg-page-head { padding-bottom: var(--s-3); }

/* One grid, so the reading order on a phone is coverage, what it does, check before you buy,
   the body, then sources, and from 72rem the right column carries the two short panels and
   then the sources beside the coverage panel and the body, with no empty stretch. */
.pt-grid { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 72rem) {
  .pt-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "cov feat" "cov check" "cov src" "body src";
    gap: var(--s-4) var(--s-5);
  }
  .pt-grid > #coverage { grid-area: cov; }
  .pt-grid > #what-it-does { grid-area: feat; }
  .pt-grid > #check-before { grid-area: check; }
  .pt-grid > .pt-main { grid-area: body; }
  /* The right column runs the length of the body, so the table of contents under the
     Sources list can stick beside the long read. */
  .pt-grid > .pt-aside { grid-area: src; align-self: stretch; align-content: start; }
}
.pt-grid .wfg-panel-title { font-size: 1.15rem; }

/* ---------- Coverage ---------- */

.pt-stale { margin: 0 0 var(--s-3); padding-left: .6rem; border-left: 2px solid var(--line-strong); color: var(--ink); }

.pt-rows { margin: 0; padding: 0; list-style: none; }
.pt-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
}
.pt-row:first-child { border-top: 0; padding-top: 2px; }
.pt-row-label { font: 400 .76rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pt-row-value { min-width: 0; color: var(--ink); line-height: 1.45; }
.pt-row-quote { display: block; margin-top: 2px; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.pt-row-quote q { quotes: "\201C" "\201D"; }
.pt-row-tier { display: grid; justify-items: end; gap: 2px; text-align: right; }
.pt-row-tier small { font: 400 .76rem/1.35 var(--font-ui); color: var(--ink-3); }
.pt-row-tier time { white-space: nowrap; }
.pt-row-source { display: inline-flex; align-items: center; min-height: 1.75rem; color: var(--ink-3); text-decoration-color: var(--line-control); }
.pt-row-source:hover { color: var(--ink); }
/* The verdict reads first: the answer in the display face across the panel, the quote under
   it, then its tag and source on one line. */
.pt-row--verdict { grid-template-columns: 8.5rem minmax(0, 1fr); padding-top: 2px; border-top: 0; }
.pt-row--verdict .pt-row-value { font: 400 1.45rem/1.1 var(--font-display); letter-spacing: .01em; }
.pt-row--verdict .pt-row-quote { font-family: var(--font-body); letter-spacing: 0; }
.pt-row--verdict .pt-row-tier { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 10px; text-align: left; }
/* Our own check of the vendor's version list: the tag shape in plain ink, never a tier. */
.pt-observed { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid var(--line-strong); font: 400 .78rem/1.35 var(--font-ui); color: var(--ink-2); white-space: nowrap; }
.pt-rows-note { margin: 0 0 4px; font: 400 .78rem/1.45 var(--font-ui); color: var(--ink-3); }
.pt-rows-note a { color: var(--ink-3); text-decoration-color: var(--line-control); }
.pt-rows-note a:hover { color: var(--ink); }

/* /restedxp's buy-or-wait line between the answer and the button (components/buyer-verdict.mjs,
   restedxpVerdictLine): two lines at 390, the decisions in Inter 600. */
.pt-verdict { margin: var(--s-2) 0 0; font: 400 .92rem/1.4 var(--font-body); color: var(--ink-2); }
.pt-verdict b { font-weight: 600; color: var(--ink); }

.pt-action { display: grid; gap: .35rem; margin: var(--s-2) 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.pt-action .wfg-btn { width: 100%; }
.pt-action small { font: 400 .8rem/1.4 var(--font-ui); color: var(--ink-3); }
.pt-ghost { display: inline-flex; align-items: center; justify-self: start; min-height: 2.75rem; color: var(--ink); text-decoration-color: var(--line-control); }
.pt-ghost:hover { color: var(--accent-text); }
/* Faction buy links under the /restedxp button (templates/partner.mjs, factionLinks): plain
   text links like .pt-ghost, so the red button stays the one primary action. Each keeps the
   44px target height; the list wraps at 390px. */
.pt-factions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .75rem; }
.pt-factions-label { margin: 0; font: 400 .8rem/1.4 var(--font-ui); color: var(--ink-3); }
.pt-factions ul { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0; padding: 0; list-style: none; }
.pt-faction { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; color: var(--ink); text-decoration-color: var(--line-control); }
.pt-faction:hover { color: var(--accent-text); }
.pt-faction-price { color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (min-width: 40.01rem) {
  .pt-action { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
  .pt-action .wfg-btn { width: auto; }
  .pt-factions { flex-basis: 100%; }
}

/* ---------- What it does, check before you buy ---------- */

.pt-list { margin: 0; padding-left: 1.2em; }
.pt-list li + li { margin-top: .35rem; }
.pt-list li::marker { color: var(--ink-3); }
.pt-note { margin: var(--s-3) 0 0; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.pt-note .wfg-evidence { margin-right: .25rem; }

/* ---------- Below the answer ---------- */

.pt-main { margin-top: var(--s-5); }
.pt-main { position: relative; min-width: 0; }
/* From 72rem the sticky table of contents sits in the right column after the body in the
   source; this link (templates/partner.mjs) lets keyboard readers reach it first. It takes no
   space until it has focus, then shows over the top of the body like the shell's skip link.
   Below 72rem the disclosure at the top of the body is the table of contents, so it is off. */
.pt-toc-skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: .6em 1em;
  background: var(--classic-yellow);
  color: var(--bg);
  font-family: var(--font-ui);
  border-radius: var(--r-ctl);
  text-decoration: none;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pt-toc-skip:focus { clip-path: none; }
@media (max-width: 71.99rem) {
  .pt-toc-skip { display: none; }
}
.pt-prose.prose { max-width: none; min-width: 0; }
.pt-prose > :is(p, ul, ol) { max-width: var(--measure); }
.pt-prose > h2:first-child { margin-top: 0; }
/* The rail exists only beside the body (two columns from 72rem); below that the disclosure
   above the body is the table of contents at every container width. */
.pt-aside > .guide-aside { padding-block: 0; }
@media (max-width: 71.99rem) {
  .pt .guide-aside { display: none; }
  .pt .contents-collapsible { display: block; }
}
.pt-aside { display: grid; gap: var(--s-5); min-width: 0; }
.pt-aside .source-block { margin-top: 0; padding: var(--s-4) var(--s-5); }

/* Body tables keep a readable width on phones and scroll inside their wrapper. */
@media (max-width: 40rem) {
  .pt-main .table-scroll table { min-width: 34rem; }
}

/* Phones and tablets: the row stacks label, answer, then tier and source on one line. */
@media (max-width: 47.99rem) {
  .pt-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pt-row--verdict .pt-row-tier { grid-column: 1; }
  .pt-row-tier { display: flex; flex-wrap: wrap; align-items: center; justify-items: start; gap: 2px 10px; text-align: left; }
}