/* ---------------------------------------------------------------------------
   PM API Report Card - per-vendor detail pages (api-grader-<vendor>.html)

   Loaded AFTER styles.css, so it may lean on the site's tokens: --primary,
   --navy, --wash, --wash-soft, --line, --muted, --card, --radius, --shadow.
   Nothing here is used by the main grid page except the preview banner and the
   correction callout, which both pages share.
   --------------------------------------------------------------------------- */

/* ---- Preview banner + correction callout (shared with the index) ---------- */
/* Pinned under the nav so the pre-release framing never scrolls away. --nav-h
   is measured by a script at the foot of the page, because the nav's height
   changes with the viewport and a hardcoded offset would leave a gap or an
   overlap at some widths. */
.pre-bar{ position:sticky; top:var(--nav-h, 59px); z-index:99;
          background:var(--navy); color:#dbe6ee; font-size:14.5px; line-height:1.55; }
/* Block, not flex: as flex items the pill and the sentence were separate boxes
   and the sentence wrapped away onto its own line. Inline, the pill sits in the
   first line of the text and the whole thing runs to two lines. */
.pre-bar .wrap{ padding-top:11px; padding-bottom:11px; }   /* sides come from .wrap, so the text lines up with the page */
/* The site's base p carries a 14.5px bottom margin, which was landing inside
   the bar and pushing the text off centre: 10px of space above it against 24.5
   below. Reset so the wrap's own padding is the only vertical space. */
.pre-bar p{ margin:0; }
.pre-bar b{ color:#fff; font-weight:800; letter-spacing:.02em; }
.pre-bar .pre-tag{ display:inline-flex; align-items:center; margin-right:11px;
                   line-height:1; vertical-align:1px;
                   background:rgba(255,255,255,.13); color:#fff; border-radius:999px;
                   padding:3px 11px; font-size:12px; font-weight:800;
                   letter-spacing:.09em; text-transform:uppercase;
                   white-space:nowrap; }
.pre-bar a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.pre-bar a:hover{ color:var(--wash); }

/* The full correction block. Orange rail so it reads as an action, not a note. */
.fix-note{ border:1px solid var(--line); border-left:4px solid var(--orange);
           border-radius:var(--radius); background:var(--card);
           box-shadow:var(--shadow); padding:26px 28px; }
.fix-note h3{ margin:0 0 8px; font-size:20px; color:var(--navy); }
.fix-note p{ margin:0 0 12px; color:var(--muted); font-size:16.5px; line-height:1.62; }
.fix-note p:last-of-type{ margin-bottom:18px; }

/* ---- Vendor page hero ---------------------------------------------------- */
.rc-back{ display:inline-flex; align-items:center; gap:7px; font-size:14.5px;
          font-weight:700; color:var(--primary); }
.rc-back:hover{ text-decoration:underline; }
.rc-eyebrow{ font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
             font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
             color:var(--primary); margin:20px 0 10px; }
.rc-title{ margin:0; font-size:clamp(32px,5vw,52px); line-height:1.08; color:var(--navy); }
.rc-stand{ margin:14px 0 0; max-width:60ch; font-size:clamp(17px,2vw,20px);
           color:var(--muted); line-height:1.55; }

/* Score slab: the letter leads, the number sits beside it, the raw total under
   both. The letter is the thing people compare, so it gets the size. */
/* auto, not a fixed track: the tinted panel was running wider than the grade it
   holds, leaving dead space to the right of the number. */
.rc-slab{ display:grid; grid-template-columns:auto 1fr; gap:0;
          margin-top:34px; border:1px solid var(--line); border-radius:var(--radius);
          overflow:hidden; background:var(--card); box-shadow:var(--shadow); }
.rc-score{ padding:26px 30px; display:flex; flex-direction:column;
           justify-content:center; gap:2px; }
.rc-score .lab{ font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
                font-size:11px; font-weight:700; letter-spacing:.13em;
                text-transform:uppercase; opacity:.72; margin-bottom:12px; }
.rc-gnum{ display:flex; align-items:center; gap:22px; }
.rc-gnum .letter{ font-size:74px; font-weight:900; line-height:.86; letter-spacing:-.02em; }
/* Faint box, tinted from the panel's own colour so it works on all five bands. */
.rc-gnum .num{ font-size:34px; font-weight:800; line-height:1;
               font-variant-numeric:tabular-nums;
               background:rgba(255,255,255,.62); border:1px solid currentColor;
               border-radius:10px; padding:9px 14px; white-space:nowrap; }
.rc-gnum .num i{ font-style:normal; font-size:17px; font-weight:700; opacity:.6; }
.rc-score .raw{ margin-top:14px; font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
                font-size:13px; font-weight:700; letter-spacing:.03em; opacity:.8; }
/* Grade colours reuse the table's bands so a vendor reads the same in both places. */
.rc-score.g-a{ background:#e7f5ee; color:#1c6b47; }
.rc-score.g-b{ background:var(--wash); color:var(--primary-dark); }
.rc-score.g-c{ background:#fdf3e0; color:#8a5e18; }
.rc-score.g-d{ background:#fdeade; color:#a95a24; }
.rc-score.g-f{ background:#fdeaea; color:#a63b3b; }

/* Six fields on a fixed 3x2 grid, ruled so each reads as its own cell rather
   than as one loose block of labels. */
.rc-meta{ padding:0; display:grid; grid-template-columns:repeat(3,1fr);
          align-content:start; }
.rc-meta > div{ padding:20px 24px; border-left:1px solid var(--line);
                border-top:1px solid var(--line); }
.rc-meta > div:nth-child(-n+3){ border-top:0; }
.rc-meta .k{ font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
             font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
             color:var(--muted); margin-bottom:5px; }
.rc-meta .v{ font-size:15.5px; font-weight:700; color:var(--navy); line-height:1.4; }

/* ---- Category cards ------------------------------------------------------ */
/* Two columns: the five categories stacked on the left, the grade scale right. */
/* A hairline gutter between the two halves. The rule is the middle column of
   the grid, not a border, so it stays centred whatever the two sides do. */
.rc-where{ display:grid; gap:26px 0; align-items:start;
           grid-template-columns:minmax(0,1fr) 1px minmax(270px,0.82fr); }
.rc-where > .rc-cats{ padding-right:40px; }
.rc-where > .rc-rule{ background:var(--line); align-self:stretch; }
.rc-where > .rc-scale{ padding-left:40px; }
.rc-scale h3{ margin:0 0 6px; font-family:var(--sans); font-weight:800;
              font-size:18px; color:var(--navy); }
.rc-scale p{ margin:0 0 16px; color:var(--muted); font-size:15.5px; line-height:1.55; }

.rc-cats{ display:grid; gap:11px; grid-template-columns:1fr; }
.rc-cat{ display:block; border:1px solid var(--line); border-radius:var(--radius);
         background:var(--card); padding:15px 18px 14px; box-shadow:var(--shadow);
         transition:border-color .13s ease, transform .13s ease, box-shadow .13s ease; }
.rc-cat, .rc-cat:hover{ text-decoration:none; }
.rc-cat:hover{ border-color:var(--primary); transform:translateY(-1px);
               box-shadow:0 10px 26px rgba(31,58,77,.10); }
/* Only the category name takes the underline: not the "Category 5" eyebrow,
   not the score, not the arrow. */
.rc-cat:hover h3{ text-decoration:underline; text-underline-offset:3px; }
.rc-cat:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.rc-cat .go{ margin-left:9px; font-size:17px; font-weight:700; color:var(--primary);
             opacity:0; transition:opacity .13s ease, transform .13s ease;
             display:inline-block; }
.rc-cat:hover .go{ opacity:1; transform:translateX(2px); }
/* Landing from a category link, so the group is not hidden under the nav. */
.rc-checks{ scroll-margin-top:90px; }
.rc-cat-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.rc-cat .n{ font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
            font-size:11.5px; letter-spacing:.1em; color:var(--muted); }
.rc-cat h3{ margin:3px 0 0; font-family:var(--sans); font-weight:700;
           font-size:16.5px; line-height:1.3; color:var(--navy); }
.rc-cat .p{ flex:none; display:flex; align-items:center; font-size:27px; font-weight:900; color:var(--navy); line-height:1;
            font-variant-numeric:tabular-nums; white-space:nowrap; }
.rc-cat .p i{ font-style:normal; font-size:15px; font-weight:700; color:var(--muted);
              margin-left:5px; }
.rc-bar{ height:6px; border-radius:999px; background:var(--wash); margin-top:11px;
         overflow:hidden; }
.rc-bar span{ display:block; height:100%; border-radius:999px; }
.rc-bar .hi{ background:var(--primary); }
.rc-bar .mid{ background:var(--orange); }
.rc-bar .lo{ background:#d9534f; }

/* ---- Per-category prose -------------------------------------------------- */
.rc-read{ border-top:1px solid var(--line); padding-top:22px; margin-top:26px; }
.rc-read:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.rc-read h3{ margin:0 0 4px; font-family:var(--sans); font-weight:800;
            font-size:19px; color:var(--navy); }
.rc-read .pts{ font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
               font-size:13px; color:var(--muted); }
.rc-read p{ margin:10px 0 0; color:var(--muted); font-size:17px; line-height:1.65; }

/* ---- The 27-check breakdown --------------------------------------------- */
.rc-checks{ border:1px solid var(--line); border-radius:var(--radius);
            background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
.rc-chead{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px;
           padding:15px 20px; background:var(--wash-soft);
           border-bottom:1px solid var(--line); }
.rc-chead .sq{ width:11px; height:11px; border-radius:3px; flex:none; }
.rc-chead h3{ margin:0; font-family:var(--sans); font-weight:800;
             font-size:17.5px; color:var(--navy); flex:1; }
.rc-chead .pts{ font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
                font-size:13.5px; font-weight:700; color:var(--muted); white-space:nowrap; }
.rc-chk{ display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:8px 16px;   /* minmax: long endpoint names wrap instead of widening the row */
         padding:16px 20px; border-top:1px solid var(--line); align-items:start; }
.rc-chk:first-of-type{ border-top:0; }
.rc-chk .id{ font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
             font-size:13px; font-weight:700; color:var(--primary); padding-top:2px; }
.rc-chk h4{ margin:0 0 6px; font-family:var(--sans); font-weight:700;
           font-size:18px; color:var(--navy); }
.rc-chk p{ margin:0; color:var(--muted); font-size:17px; line-height:1.62; }
.rc-chk p, .rc-chk h4, .rc-chk code{ overflow-wrap:anywhere; }
.rc-chk code{ font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
              font-size:14px; background:var(--wash-soft); border-radius:4px;
              padding:1px 5px; color:var(--navy); }
.mark{ display:inline-flex; align-items:center; justify-content:center; flex:none;
       min-width:62px; padding:4px 9px; border-radius:6px; font-size:11.5px;
       font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.m-yes{ background:#e7f5ee; color:#1c6b47; }
.m-partial{ background:#fdf3e0; color:#9a6a1c; }
.m-no{ background:#fdeaea; color:#a63b3b; }
.m-na,.m-unverified{ background:var(--wash); color:var(--muted); }

/* ---- Vendor switcher ----------------------------------------------------- */
.rc-switch{ display:flex; gap:9px; overflow-x:auto; padding:4px 0 12px;
            scrollbar-width:thin; }
.rc-switch a{ flex:none; display:flex; align-items:center; gap:9px;
              border:1px solid var(--line); border-radius:999px; background:var(--card);
              padding:7px 14px 7px 10px; font-size:15.5px; font-weight:700;
              color:var(--navy); white-space:nowrap; transition:border-color .13s ease; }
.rc-switch a:hover{ border-color:var(--primary); }
.rc-switch a[aria-current="page"]{ border-color:var(--primary);
                                   background:var(--wash-soft); }
.rc-switch .grade{ min-width:34px; padding:3px 7px; font-size:12px; }
.rc-nextprev{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
              margin-top:20px; }
.rc-nextprev a{ font-size:15px; font-weight:700; color:var(--primary); }
.rc-nextprev a:hover{ text-decoration:underline; }

/* ---- Download row -------------------------------------------------------- */
.rc-dl{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }
.rc-dl .card{ border:1px solid var(--line); border-radius:var(--radius);
              background:var(--card); box-shadow:var(--shadow); padding:24px; }
.rc-dl h3{ margin:0 0 7px; font-size:18px; color:var(--navy); }
.rc-dl p{ margin:0 0 16px; color:var(--muted); font-size:16.5px; line-height:1.55; }

@media (max-width:720px){
  /* minmax(0,1fr), not 1fr: a plain 1fr track grows to fit its longest word, which
     pushed the score panel and long endpoint names past the right edge on phones. */
  .rc-slab{ grid-template-columns:minmax(0,1fr); }
  .rc-meta{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rc-meta > div{ padding:14px 16px; border-top:1px solid var(--line); }
  .rc-meta > div:nth-child(odd){ border-left:0; }
  .rc-meta > div:nth-child(-n+2){ border-top:0; }
  .rc-meta .k{ font-size:10.5px; letter-spacing:.06em; }
  .rc-meta .v{ font-size:15px; }
  .rc-score{ padding:22px 20px; border-bottom:1px solid var(--line); }
  .rc-chk{ grid-template-columns:minmax(0,1fr); padding:14px 16px; }
  .rc-chk p, .rc-chk h4, .rc-chk code, .rc-read p{ overflow-wrap:anywhere; }
  .rc-chead{ padding:13px 16px; }
  /* The preview bar scrolls away on phones: pinned, its four lines covered a
     quarter of the screen the whole way down the page. */
  .pre-bar{ position:static; font-size:13.5px; }
  .rc-dl{ grid-template-columns:minmax(0,1fr); }
  #main .btn{ white-space:normal; text-align:center; max-width:100%; }   /* long labels, e.g. "Download the QuickBooks Online report", wrap instead of overflowing */
  .rc-chk .id{ padding-top:0; }
  .rc-chk .mark{ justify-self:start; }
}

/* ---- Letter-grade bands (absolute, never curved) -------------------------
   Three across so each letter family shares a row: A+ A A-, then B, C, D.
   F is the whole bottom row because it is a single open-ended band. */
.rc-bands{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.rc-band{ border-radius:10px; padding:11px 8px; text-align:center; }
.rc-band .g{ display:block; font-size:19px; font-weight:900; line-height:1.1; }
.rc-band .r{ display:block; margin-top:3px;
             font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
             font-size:12px; font-weight:700; opacity:.8; }
.rc-band.f{ grid-column:1 / -1; }
.rc-band.b-a{ background:#e7f5ee; color:#1c6b47; }
.rc-band.b-b{ background:var(--wash); color:var(--primary-dark); }
.rc-band.b-c{ background:#fdf3e0; color:#8a5e18; }
.rc-band.b-d{ background:#fdeade; color:#a95a24; }
.rc-band.b-f{ background:#fdeaea; color:#a63b3b; }
/* The one currently earned, so the reader can place this vendor on the scale. */
.rc-band[data-now]{ outline:2.5px solid currentColor; outline-offset:2px; }

/* Closing pair: the run's provenance beside the verdict, equal weight. */
/* Two equal columns, not auto-fit: auto-fit was laying out a phantom third
   track. A vendor with no run note renders one panel, which fills the row. */
.rc-pair{ display:grid; gap:18px; grid-template-columns:1fr 1fr; align-items:stretch; }
.rc-pair:has(> :only-child){ grid-template-columns:1fr; }
@media (max-width:760px){ .rc-pair{ grid-template-columns:minmax(0,1fr); } }
.rc-pair .panel{ height:100%; }
/* Tinted rather than rail-and-white, and scoped to the panel itself rather than
   to .rc-pair. The bottom-line panel stopped being half of a pair when "About
   this run" was dropped, which silently took its spacing and typography with it:
   the heading sat flush against its own text at a 0px gap. Keyed to .panel now,
   so these hold wherever the panel is used. */
.panel.t-blue{ background:var(--wash-soft); border-color:#cfe0ed; }
.panel.t-orange{ background:#fdf6ef; border-color:#f0dcc6; }
.band.wash .panel.t-blue{ background:var(--wash-soft); }
.band.wash .panel.t-orange{ background:#fdf6ef; }
.panel.t-blue > h2, .panel.t-orange > h2{ margin-bottom:14px; }
.panel.t-blue > h2 + p, .panel.t-orange > h2 + p{ margin-top:0; }
.rc-pair h2{ font-family:var(--sans); font-weight:800;
             font-size:clamp(20px,2.4vw,24px); margin:0; }
/* Same size as the per-category copy. These two blocks are the longest prose on
   the page and were running to 20px against .sub's clamp. */
.rc-pair .panel > p{ margin-top:12px; color:var(--muted);
                     font-size:17px; line-height:1.62; }

@media (max-width:860px){
  .rc-where{ grid-template-columns:1fr; }
}

/* Strengths and watch-outs. Sized to the per-category copy rather than .sub,
   which clamps up to 20px and made these read louder than the checks above. */
.rc-list{ margin:14px 0 0; padding-left:20px; }
.rc-list li{ color:var(--muted); font-size:17px; line-height:1.6; margin-bottom:9px; }
.rc-list li:last-child{ margin-bottom:0; }

/* ---- Not-yet-graded states ----------------------------------------------
   A pending platform is not a missing one. Both states below say "the run has
   not happened" rather than showing an empty score, which read as no data. */
.rc-score.is-pending{ background:var(--wash-soft); color:var(--muted); }
.rc-score.is-pending .rc-gnum{ align-items:center; gap:14px; }
.pend-word{ font-size:26px; font-weight:800; line-height:1.15; color:var(--navy); }
.pend-dot{ flex:none; width:13px; height:13px; border-radius:50%;
           background:var(--orange); box-shadow:0 0 0 5px rgba(224,112,60,.18); }
.rc-cat.is-pending{ opacity:.72; }
.rc-cat.is-pending .pend-pts{ color:#aab6c0; }
.rc-bands .rc-band{ opacity:1; }

/* Switcher entry for a platform with no grade yet. */
.rc-switch a.is-pending{ color:var(--muted); }
.rc-switch a.is-pending .grade{ background:var(--wash-soft); color:#9aa8b4;
                                letter-spacing:.06em; }

@media (prefers-reduced-motion:no-preference){
  .pend-dot{ animation:pend-pulse 2.4s ease-in-out infinite; }
  @keyframes pend-pulse{
    0%,100%{ box-shadow:0 0 0 5px rgba(224,112,60,.18); }
    50%    { box-shadow:0 0 0 9px rgba(224,112,60,.07); }
  }
}