/* /ai-agents/approvals · page layout glue only, scoped under main.pg-apv.
   The two assets style themselves (.apv-named, .apv-meanwhile). Band order and reasons: build/pages/ai-agents-approvals/spec.md §0.
   Rhythm is v4.css only (--sec, .shead 64, .wrap 1280/24); nothing here adds section padding. */

/* ---------- hero (dark): left-aligned. The H1 runs across the wrap so each tone holds one line at 1440 (847 / 902px);
   below it the sub and CTAs sit left and apv-named sits right, bottom-aligned with the CTA row (assets.md §6 item 1) ---------- */
.pg-apv .apv-top{text-align:left}
.pg-apv .apv-top .h1{margin:0;max-width:none}
.pg-apv .apv-top-row{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);column-gap:72px;align-items:end;margin-top:40px}
.pg-apv .apv-top-row>*{min-width:0}
.pg-apv .apv-top .sub{margin:0;max-width:520px}
.pg-apv .apv-top .ctas{justify-content:flex-start}

/* visible breadcrumb in the eyebrow slot. The same rules as the shared .crumbs requested in shared-requests.md R-2; scoped here until it lands */
.pg-apv .apv-crumbs{margin-bottom:24px}
.pg-apv .apv-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:500;color:var(--w-60)}
.pg-apv .apv-crumbs li{display:inline-flex;align-items:center;gap:8px}
.pg-apv .apv-crumbs li+li::before{content:"›";content:"›"/"";color:var(--w-60)}
.pg-apv .apv-crumbs a{display:inline-block;padding:2px 0;color:var(--w-60);transition:color .15s var(--ease)}
.pg-apv .apv-crumbs a:hover{color:#fff}
.pg-apv .apv-crumbs a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
.pg-apv .apv-crumbs [aria-current="page"]{color:#fff}

/* A7 (gate 2): the shared .tlink box is 22px tall; 1px of block padding brings every standalone text link on this page to a 24px target */
.pg-apv .tlink{padding-block:1px}

/* body copy on the dark bands (v4.css has no .dark .body) */
.pg-apv .dark .body{color:var(--w-60)}

/* ---------- sensitive (white, type-only): the H2 stacks over the 49-word definition; the pull line is set apart,
   offset into the right two-thirds under a hairline, so it reads as a quoted line, not a third heading ---------- */
.pg-apv .apv-pull-row{margin-left:calc((100% - 64px) / 3 + 64px);padding-top:48px;border-top:1px solid var(--ink-15)}
.pg-apv .apv-pull{margin:0}
.pg-apv .apv-pull blockquote{margin:0}
.pg-apv .apv-pull blockquote p{max-width:760px;font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 72;font-size:40px;line-height:48px;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.pg-apv .apv-pull figcaption{margin-top:24px;font-size:14px;line-height:20px;color:var(--ink-60)}
.pg-apv .apv-pull figcaption a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-15);text-underline-offset:3px;transition:text-decoration-color .15s var(--ease)}
.pg-apv .apv-pull figcaption a:hover{text-decoration-color:var(--ink)}
.pg-apv .apv-pull-row .tlink{margin-top:40px}
.pg-apv .apv-nw{white-space:nowrap}

/* ---------- meanwhile (dark): a split header with the H2 column widened to 700px (665 / 669px lines), then apv-meanwhile across the wrap ---------- */
.pg-apv #meanwhile .shead{grid-template-columns:minmax(0,700px) minmax(0,1fr);column-gap:64px}

/* ---------- approver (white, type-only): four fields of one request, one row of four at >1100, read left to right.
   Gate 2: the four cells hang from ONE unbroken hairline (no column gap; spacing is each cell's right padding), so the row reads
   as the fields of a single request on its line, not as the separate-hairline 2×2 grid /ai-agents/authorization uses for its outcomes.
   No boxes, icons, demo values or status colour ---------- */
.pg-apv .apv-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;row-gap:40px;margin:0}
.pg-apv .apv-four>div{min-width:0;padding:24px 40px 0 0;border-top:1px solid var(--ink-15)}
.pg-apv .apv-four dt{font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.pg-apv .apv-four dd{margin:8px 0 0;max-width:280px;font-size:17px;line-height:28px;color:var(--ink-60)}
.pg-apv .apv-four-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 32px;margin-top:64px}
.pg-apv .apv-note{font-size:17px;line-height:28px;color:var(--ink-60)}
.pg-apv .apv-four-foot .tlink{margin-top:0}

/* ---------- faq (white after white, .sec.rule): the H2 and the text-only Before this / After this pair run full width, the list below ---------- */
.pg-apv .apv-pair{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:20px;font-size:15px;line-height:24px;color:var(--ink-60)}
.pg-apv .apv-pair a{font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-15);text-underline-offset:3px;transition:text-decoration-color .15s var(--ease)}
.pg-apv .apv-pair a:hover{text-decoration-color:var(--ink)}
.pg-apv .apv-pair-sep{margin:0 12px;color:var(--ink-40)}
.pg-apv #faq .faq{max-width:880px;margin-top:56px}

/* ---------- close (dark, type-only): the two-line statement left, the pill pair right on its last line, the up-link below ---------- */
.pg-apv .apv-close{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:end}
.pg-apv .apv-close .h2{grid-column:1;grid-row:1}
.pg-apv .apv-close .ctas{grid-column:2;grid-row:1;display:flex;gap:10px;flex-wrap:wrap}
.pg-apv .apv-close .tlink{grid-column:1;grid-row:2;justify-self:start;margin-top:32px}

/* ---------- responsive ---------- */
@media (max-width:1199px){
  /* below 1200 the asset's stage would drop under its 560px minimum beside a 520px text column: stack (assets.md §3.3) */
  .pg-apv .apv-top-row{grid-template-columns:minmax(0,1fr);row-gap:56px}
  .pg-apv .apv-top-row>.apv-named{max-width:720px}
}
@media (max-width:1100px){
  .pg-apv #meanwhile .shead{grid-template-columns:minmax(0,1fr)}
  .pg-apv .apv-pull-row{margin-left:0}
  .pg-apv .apv-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-apv .apv-four>div{padding-right:48px}
  .pg-apv .apv-four dd{max-width:440px}
}
@media (max-width:900px){
  .pg-apv .apv-close{grid-template-columns:minmax(0,1fr)}
  .pg-apv .apv-close .ctas{grid-column:1;grid-row:2;margin-top:36px}
  .pg-apv .apv-close .tlink{grid-row:3}
}
@media (max-width:760px){
  .pg-apv .apv-top-row{margin-top:24px;row-gap:40px}
  .pg-apv .apv-pull-row{padding-top:40px}
  .pg-apv .apv-pull blockquote p{font-size:30px;line-height:37px}
  .pg-apv .apv-four{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .pg-apv .apv-four>div{padding:20px 0 0}
  .pg-apv .apv-four dt{font-size:18px;line-height:26px}
  .pg-apv .apv-four dd{font-size:16px;line-height:26px}
  .pg-apv .apv-four-foot{flex-direction:column;align-items:flex-start;margin-top:48px}
  .pg-apv .apv-note{font-size:16px;line-height:26px}
  .pg-apv .apv-pair{flex-direction:column;align-items:flex-start;gap:0}
  .pg-apv .apv-pair-sep{display:none}
  .pg-apv .apv-pair-l{margin-top:8px}
  .pg-apv .apv-pair-l:first-child{margin-top:0}
  .pg-apv #faq .faq{margin-top:40px}
}
@media (max-width:400px){
  /* a tlink that wraps keeps its › after the last word, instead of pushed to the far edge of the flex box */
  .pg-apv .tlink{display:inline-block;text-wrap:balance}
  .pg-apv .tlink span{display:inline-block;margin-left:6px}
}