/* Round 39 (Nov 2 2026): layout that holds at every width. Loads after r35h.css, before r35m.css (which stays last).
   Source: review/round39/AGREED.md (L1 to L10); evidence review/layout-check-nov2/FINDINGS.md. The gate that watches this page is
   scripts/layout_check.py (one container width, no blank band, columns that end together, no lonely chip, even footer, slim fixed bars).
   No colour values here: every colour is a token from the layers before. No shadows (r3206). */

/* ---- L4: the photo caption and its credit are ONE small line right under the photo (no 104 px minimum, no blank band) ---- */
.cards.dcards>.dcard>.dcard-foot,.wz-cards>.dcard>.dcard-foot,#top3>.dcard>.dcard-foot{min-height:0}
.dcard>.dcard-foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp2);margin:var(--sp1) 0 0;padding:0;font-size:var(--t1);line-height:1.35;color:var(--quiet)}
.dcard-foot .pc-note{display:block;min-height:0}
.dcard-foot .pc-credit{overflow-wrap:anywhere}
.dcard>.dcard-img figcaption{min-height:0}
/* L4: the Compare control leaves the photo and sits in the card's footer row */
.dcard>.dcard-cmp,.dcard-extra>.dcard-cmp{position:static;margin:var(--sp3) 0 0;text-align:left;order:30;grid-row:auto}
.dcard>.dcard-cmp .cmp-tick{min-height:44px}

/* ---- L7: Power chips and Luxury brands are one flowing row group with one even gap ---- */
.wz-chips.wz-powers{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.wz-chips.wz-powers .wz-pw{margin:0}

/* ---- L8: the example card. The tag has its own row; no band above "How it adds up" ---- */
.r35-rcpt-tag{display:block;width:max-content;max-width:100%}
@media (max-width:599px) and (scripting:enabled){
  .r35-rcpt{padding:var(--sp3) var(--sp4)}
  .r35-rcpt-one{margin:0}
  .r35-rcpt-tog{min-height:44px;margin:0}
  .r35-rcpt[data-open] .r35-rcpt-tog{margin:0 0 var(--sp1)}
}

/* ---- L10: the Real Lease Check card closes tight under "The math behind this" ---- */
.chk{padding-bottom:var(--sp3)}
.chk .chk-fold{margin-bottom:0}
.chk .chk-fold>summary{min-height:44px;display:flex;align-items:center}
.chk .chk-fold:not([open])>summary{margin-bottom:0}

/* ---- L6: the footer. Phones: Use it as one row, Trust and Help side by side, Legal in two even columns; no gaps between rows ---- */
.foot .footnav{gap:0}
.foot .footnav a{min-height:44px;padding:0}
.foot .foot-cols{gap:var(--sp3) var(--sp5)}
@media (max-width:719px){
  .foot .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .foot-use-it{grid-column:1 / -1}
  .foot .foot-use-it .footnav{flex-direction:row;flex-wrap:wrap;gap:0 var(--sp4)}
  .foot .foot-help{grid-column:auto}
  .foot .foot-help .footnav{display:flex;flex-direction:column}
  .foot .foot-legalrow .footnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp5)}
}
@media (min-width:720px){
  .foot .foot-legalrow .footnav{gap:0 var(--sp5)}
  .foot .foot-legalrow{margin-top:var(--sp2);padding-top:var(--sp1)}
}

/* ---- L9: on a deal page the Back control sits INSIDE the header row; the header is the one fixed row ---- */
.r35-topbar{display:none}
@media (max-width:719px){
  .top:has(.r35-topbar){position:sticky;top:0;z-index:20}
  .top .brandrow>.r35-topbar{display:block;position:static;flex:none;background:none;border:0;z-index:auto}
  .top .r35-topback{min-height:44px;padding:0 var(--sp2) 0 0;font-size:var(--t3)}
  .top .brandrow:has(.r35-topbar){justify-content:flex-start}
  .top .brandrow:has(.r35-topbar) .nav{margin-left:auto}
  /* the Back control takes the mark's place on a phone deal page (Deals, the first link, goes home); the row never overflows */
  .top .brandrow:has(.r35-topbar) .brand{display:none}
  .top .brandrow:has(.r35-topbar) .navlink{padding:0 var(--sp2);font-size:13px}
}

/* ---- desktop: ONE container (the 1180 px inside .wrap) for every main block ---- */
@media (min-width:1000px){
  .wz,.wz:has(.wz-card>.wz-cards){max-width:none;margin-left:0;margin-right:0}
  .tipw{max-width:none}
  .nl-inner{max-width:none}
  .deal-wrap,main.wrap.deal-wrap{max-width:1220px}
  .chk,.takeover-means{max-width:none}
  main.has-rail{max-width:1220px}
  .rail-grid{margin-left:0;margin-right:0;padding-left:0;padding-right:0}

  /* L2: the hero holds two even columns. The example is the only thing on the right; "Another low deal" is gone. */
  .r35-hero .r26-pv{display:none}
  .hello.r35-hero{align-items:start}
  .r35-hero .r26-main{grid-row:1}
  .r35-hero .r35-rcpt{grid-row:1;margin:0;align-self:center}
  .r35-rcpt-line{font-size:var(--t3)}
  .r35-rcpt-total .r35-rl{font-size:var(--t4)}
  .r35-rcpt .r26-real{font-size:32px;padding:2px var(--sp3) 4px}

  /* L3: results. The cheapest car is large on the left (a float); "See 2 more", the left-out note and the small print stack beside it on
     the right. Once opened, cars 2 and 3 are a compact column beside the large first car. */
  .wz .wz-card:has(>.wz-cards),.results{display:flow-root}
  .wz .wz-card>.wz-cards.r35-one,.results>#top3.r35-one{float:left;width:58%;grid-template-columns:minmax(0,1fr);margin:0 0 var(--sp3)}
  .wz .wz-card>.wz-cards.r35-one~.wz-more1,.wz .wz-card>.wz-cards.r35-one~.wz-refine,.wz .wz-card>.wz-cards.r35-one~.cheaper-unv,.wz .wz-card>.wz-cards.r35-one~.wz-foot,
  .results>#top3.r35-one~.r35-more1,.results>#top3.r35-one~.cheaper-unv{margin-left:62%}
  .wz .wz-card>.wz-cards.r35-one~.wz-more1,.results>#top3.r35-one~.r35-more1{margin-top:0;margin-bottom:var(--sp3)}
  .wz .wz-card>.wz-cards.r35-one~.wz-more1 .btn,.results>#top3.r35-one~.r35-more1 .btn{width:100%;max-width:none}
  .wz .wz-card>.wz-cards.r35-one~.cheaper-unv,.results>#top3.r35-one~.cheaper-unv{margin-top:var(--sp3);margin-bottom:0}
  .wz .wz-card>.wz-cards.r35-one~.wz-refine{margin-bottom:var(--sp3)}
  .wz .wz-card>.wz-cards.r35-one~:not(.wz-more1):not(.wz-refine):not(.cheaper-unv):not(.wz-foot),
  .results>#top3.r35-one~:not(.r35-more1):not(.cheaper-unv){clear:both;margin-left:0}
  .wz .wz-card>.wz-cards:not(.r35-one),.results>#top3:not(.r35-one){clear:both}
  .results-h,.results>.allin-gloss,.results>.priced-line{text-align:left}
  /* opened: the first car stays large, cars 2 and 3 stack beside it as compact cards */
  .wz-cards:not(.r35-one),#top3:not(.r35-one){grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:var(--sp5);row-gap:var(--sp4);align-items:start;grid-auto-rows:auto}
  .wz-cards:not(.r35-one)>.dcard:first-child,#top3:not(.r35-one)>.dcard:first-child{grid-column:1;grid-row:1 / span 6}
  .wz-cards:not(.r35-one)>.dcard:not(:first-child),#top3:not(.r35-one)>.dcard:not(:first-child){grid-column:2;grid-row:auto}
  .wz-cards:not(.r35-one)>.dcard:not(:first-child)>.dcard-img,.wz-cards:not(.r35-one)>.dcard:not(:first-child)>.dcard-foot,
  #top3:not(.r35-one)>.dcard:not(:first-child)>.dcard-img,#top3:not(.r35-one)>.dcard:not(:first-child)>.dcard-foot{display:none}
  .wz-cards:not(.r35-one)>.dcard:not(:first-child) .dcard-name,#top3:not(.r35-one)>.dcard:not(:first-child) .dcard-name{font-size:var(--t4)}
  .wz-cards>.dcard,#top3>.dcard{display:flex;flex-direction:column;grid-template-rows:none;grid-row:auto}
  .wz-cards:not(.r35-one)>.dcard:first-child,#top3:not(.r35-one)>.dcard:first-child{grid-row:1 / span 6}
  .wz-cards:not(.r35-one)>.dcard:not(:first-child),#top3:not(.r35-one)>.dcard:not(:first-child){grid-row:auto}

  /* L5: the deal page is one grid. The receipt (right) is followed at once by "Your numbers"; the left column ends where the right ends. */
  .deal-grid{grid-template-rows:auto auto auto;row-gap:0}
  .deal-a{grid-row:1}
  .deal-grid>.receipt{grid-row:1 / span 2}
  .deal-c{grid-row:2 / span 2}
  #your-numbers-host{grid-row:3;margin:var(--sp3) 0 0}
  .deal-b{grid-template-columns:minmax(0,1fr);justify-content:stretch}
  #takeover-top{max-width:none}
  .deal-b>.takeover-means{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:var(--sp6);align-items:start}
  .deal-b>.takeover-means>h2,.deal-b>.takeover-means>p{grid-column:1}
  .deal-b>.takeover-means>ul{grid-column:2;grid-row:1 / span 3;margin:0}
  .chk{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:var(--sp6);align-items:start}
  .chk>.chk-name,.chk>h2,.chk>.chk-tier,.chk>#chk-sentence{grid-column:1}
  .chk>#chk-basis,.chk>.chk-nq{grid-column:2}
  .chk>#chk-basis{grid-row:3}
  .chk>.chk-nq{grid-row:4}
  .chk>.chk-fold{grid-column:1 / -1}

}

/* the results small print sits close under the car: no 49 to 66 px bands between the foot parts */
.wz .wz-card>.wz-foot,.wz .wz-card>.wz-after{margin-top:var(--sp3)}
.wz-foot>*{margin-top:var(--sp2);margin-bottom:0}
.wz-foot>details.yn,.wz-foot .yn{margin:var(--sp2) 0 0}