/* Changes highlights: who gained ground, and where. The same white sheet as
     example-rapport-resume.html. Colours come only from kvasano-canvas.css, the role colours in
     __roller, and the win/lose chips the Changes page uses for good and bad. */
  main.rapport > .head{padding-bottom:8px}
  .tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 16px}
  .tools .btn{min-height:44px}
  .tools #print{margin-left:auto}

  .sheet{background:var(--white);border:1.5px solid var(--ink);border-radius:20px;padding:30px 34px 26px}
  /* The masthead: title, verdict and window on the left, the scoreline per role on the right. */
  .mast{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 36px;align-items:start}
  .sheet .eyebrow{margin:0 0 10px}
  .sheet h1{font-size:clamp(32px,5.2vw,42px);margin:0 0 12px}
  .verdict{margin:0;font-size:20px;line-height:1.45;color:var(--ink2);text-wrap:balance}
  .verdict b{color:var(--ink);font-weight:700}
  .dateline{margin:8px 0 0;font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:13px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
  .dateline .nb{white-space:nowrap}
  .alarm{margin:14px 0 0;padding:10px 14px;border-radius:10px;background:var(--loseBg);color:var(--loseFg);
    font-weight:700;font-size:15px;line-height:1.5}

  /* The Changes page's chips: green is good for the customer, clay is bad, grey has no verdict. */
  .chip{display:inline-block;padding:2px 7px;border-radius:6px;white-space:nowrap}
  .win{background:var(--winBg);color:var(--winFg);font-weight:700}
  .lose{background:var(--loseBg);color:var(--loseFg);font-weight:700}
  .tie{background:var(--tieBg);color:var(--tieFg);font-weight:500}

  /* Scoreline per role: eight roles in __roller order, good and bad for the customer. */
  .roles{margin:4px 0 0}
  .rtab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  .rtab th,.rtab td{padding:5px 0 5px 8px;text-align:right;white-space:nowrap}
  .rtab thead th{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:600;font-size:11.5px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);padding-top:0;padding-bottom:6px;
    border-bottom:1.5px solid var(--ink);vertical-align:bottom}
  .rtab thead th.bn{font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:700;line-height:1.2}
  .rtab thead th.bn span{display:block}
  .rtab th:first-child{text-align:left;padding-left:0;width:99%}
  .rtab tbody th{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:700;font-size:15px;
    color:var(--rc);white-space:normal}
  .rtab tbody th,.rtab td{border-bottom:1px solid var(--hair)}
  .rtab td{font-size:15px;min-width:48px}
  .rtab td.nw,.rtab td.z{color:var(--mute)}
  .rtab .chip{padding:1px 7px}

  /* The lists: one compact line per move. */
  .block{margin:30px 0 0}
  .block h2{margin:0;font-size:clamp(22px,3vw,26px)}
  .block .sub{margin:3px 0 10px;font-size:14.5px;line-height:1.5;color:var(--mute)}
  .lines{list-style:none;margin:0;padding:0}
  .lh,.ln{display:grid;grid-template-columns:minmax(0,1fr) 84px 84px 104px 64px;column-gap:10px;align-items:baseline}
  .lh{padding:0 0 6px;border-bottom:1.5px solid var(--ink);font-family:'Bricolage Grotesque',Helvetica,sans-serif;
    font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
  .lh span{text-align:right}
  .lh span:first-child{text-align:left}
  .ln{padding:6px 0;border-bottom:1px solid var(--hair)}
  .ln .m{display:flex;align-items:baseline;gap:9px;min-width:0;font-size:15.5px;line-height:1.35}
  .ln .dot{flex:none;width:9px;height:9px;border-radius:3px;background:var(--rc)}
  .ln .low{margin-left:3px;font-size:12px;color:var(--mute);white-space:nowrap}
  .ln .ctx{color:var(--mute)}
  .ln .v{text-align:right;font-size:14.5px;font-variant-numeric:tabular-nums}
  .ln .was,.ln .w,.ln .na{color:var(--mute)}
  .ln .now{color:var(--ink)}
  .ln .mv .chip{white-space:normal;display:inline-flex}

  .method{margin:26px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:14px;line-height:1.6;color:var(--mute)}
  .method b{color:var(--ink2)}
  .tail .back{display:flex;flex-wrap:wrap;gap:4px 28px}

  /* The site frame on a phone, as on the table pages: 44px targets, logo and button only.
     Screen only: on paper the page is about 700px wide and must keep the wide layout. */
  @media screen and (max-width:760px){
    nav.top a,.logo,footer a,.back a{min-height:44px;display:inline-flex;align-items:center}
    .mast{grid-template-columns:minmax(0,1fr)}
  }
  @media screen and (max-width:560px){
    .sheet{margin:0 calc(var(--pad) * -1);border-left:0;border-right:0;border-radius:0;padding:24px var(--pad) 22px}
    .verdict{font-size:18px}
    .lh,.ln{grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content minmax(0,1fr)}
    .ln .mv .chip{white-space:nowrap}
    .lh span:first-child{display:none}
    .ln{padding:9px 0}
    .ln .m{grid-column:1 / -1;margin-bottom:5px}
    .ln .v{font-size:14px}
  }
  @media screen and (max-width:374px){
    .rtab thead th{white-space:normal}
  }
  @media screen and (max-width:480px){
    nav.top a:not(.cta){display:none}
    /* Two rows of buttons, not three: Print beside the first link, the second link under them. */
    .tools #print{order:1}
    .tools #wins-top{order:2}
  }

  /* Paper: A4, the logo as letterhead, no nav, no buttons, no footer. */
  @page{size:A4;margin:11mm 12mm}
  @media print{
    body{background:var(--white)}
    header{padding:0 0 4mm}
    header .row{max-width:none;padding:0}
    .logo{font-size:21px}
    nav.top,footer,.tools,.tail{display:none !important}
    main.rapport > .head{max-width:none;padding:0}
    .sheet{border:0;border-radius:0;padding:0;margin:0}
    .sheet,.sheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .mast{gap:0 30px}
    .sheet .eyebrow{font-size:10.5px;margin-bottom:6px}
    .sheet h1{font-size:30px;margin-bottom:8px}
    .verdict{font-size:19px}
    .dateline{font-size:10.5px}
    .rtab thead th{font-size:9.5px;padding-bottom:4px}
    .rtab thead th.bn{font-size:12px}
    .rtab tbody th,.rtab td{font-size:12.5px;padding-top:2px;padding-bottom:2px}
    .block{margin-top:16px}
    .block h2{font-size:19px}
    .block .sub{font-size:11.5px;margin:1px 0 5px}
    .lh,.ln{grid-template-columns:minmax(0,1fr) 78px 78px 96px 58px}
    .lh{font-size:9.5px;padding-bottom:4px}
    .ln{padding:2px 0}
    .ln .m{font-size:12.5px;line-height:1.3;gap:7px}
    .ln .dot{width:8px;height:8px}
    .ln .low{font-size:10px}
    .ln .v{font-size:12px;line-height:1.3}
    .chip{padding:0 6px;line-height:1.35}
    .method{font-size:10.5px;line-height:1.5;margin-top:14px;padding-top:7px}
    .roles,.block,.method{break-inside:avoid}
  }