/*
 * The report page, from Figma node 7617:1697.
 *
 * Values are the frame's own: Mulish, 24px gaps, 20px card radius, and the
 * palette already declared as tokens in panel.css - Brand/Primary #326295,
 * Brand/Secondary #041E42, Text/Gray #58585A.
 *
 * The band colours are new. They are three pairs the design introduces for the
 * score pills, and they drive the dots as well so a row recolours from one
 * place rather than two.
 */

.aisa-rp {
  --rp-navy:   #041e42;   /* Brand/Secondary */
  --rp-blue:   #326295;   /* Brand/Primary   */
  --rp-ink:    #23201f;   /* Text/Black      */
  --rp-grey:   #58585a;   /* Text/Gray       */
  --rp-grey-2: #545454;   /* Grey 700        */
  --rp-rule:   #e3e6ea;
  --rp-accent: #b5bcd6;   /* Brand/Accent    */
  --rp-cream:  #fff6e5;

  --rp-good-bg:  #e8eee9;  --rp-good-fg:  #4d7951;
  --rp-fair-bg:  #f3eee3;  --rp-fair-fg:  #a98b40;
  --rp-attn-bg:  #f3e7e4;  --rp-attn-fg:  #a85944;

  /* The treatment thumbnail's footprint, named so the space a missing one
     has to reserve is derived from it rather than typed out again. */
  --rp-thumb:         120px;
  --rp-thumb-overlap: 40px;

  --rp-card-shadow: 2px 5px 10px rgba(140, 158, 194, .25);
  --rp-lift-shadow: 5px 5px 20px rgba(140, 158, 194, .4);

  /* Declared here too: the page does not load panel.css, where the token lives. */
  --aisa-font: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--aisa-font);
  max-width: 1200px;
  margin-inline: auto;

  padding: 50px 60px 60px;
  background: #fff;
  color: var(--rp-grey);
}

.aisa-rp *, .aisa-rp *::before, .aisa-rp *::after { box-sizing: border-box; }
.aisa-rp [hidden] { display: none !important; }

.aisa-rp__loading,
.aisa-rp__empty { text-align: center; padding: 60px 20px; }
.aisa-rp__empty { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.aisa-rp__note { margin: 0; font-size: 18px; line-height: 26px; max-width: 46ch; }

.aisa-rp__report { display: flex; flex-direction: column; gap: 40px; }

.aisa-rp__rule { height: 0; margin: 0; border: 0; border-top: 1px solid var(--rp-rule); }

/* ---------- header ---------- */

.aisa-rp__head {
  display: flex;
  gap: 50px;
  align-items: center;
  justify-content: center;
  padding-inline: 100px;
}

/*
 * A circle on a dark ground, as drawn. The portrait is a phone selfie of any
 * ratio, so it fills the circle by cover rather than being letterboxed inside
 * it - the frame's own image is a 220x300 crop doing exactly that.
 */
.aisa-rp__portrait {
  flex: none;
  width: 300px;
  height: 300px;
  margin: 0;
  border-radius: 600px;
  overflow: hidden;
  background: var(--rp-ink);
}
.aisa-rp__portrait img { width: 100%; height: 100%; display: block; object-fit: cover; }

.aisa-rp__headtext { width: 400px; display: flex; flex-direction: column; gap: 32px; }

.aisa-rp__eyebrow {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .72px;
  text-transform: uppercase;
  color: var(--rp-ink);
}

.aisa-rp__h1 {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--rp-navy);
}

.aisa-rp__headactions { display: flex; flex-direction: column; gap: 12px; }

/* ---------- buttons ---------- */

.aisa-rp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
  border: 1px solid transparent;
  border-radius: 0;           /* Square, as drawn. */
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.aisa-rp__btn--solid   { background: var(--rp-blue); color: #fff; }
.aisa-rp__btn--solid:hover { background: #2a5480; }
.aisa-rp__btn--outline { background: transparent; color: var(--rp-blue); border-color: var(--rp-blue); }
.aisa-rp__btn--outline:hover { background: rgba(50, 98, 149, .06); }
.aisa-rp__btn--accent  {
  background: var(--rp-accent);
  color: var(--rp-navy);
  padding: 24px 40px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 2.1px;
}
.aisa-rp__btnicon { width: 20px; height: 20px; flex: none; }

.aisa-rp__headactions .aisa-rp__btn { width: 100%; }

/* ---------- category cards ---------- */

.aisa-rp__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.aisa-rp__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
  padding: 16px 20px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--rp-card-shadow);
}

/*
 * Title and verdict on one line. flex-start rather than centre so a title
 * that wraps to two lines keeps the pill level with its first line instead
 * of floating to the middle of the block.
 */
.aisa-rp__cardhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.aisa-rp__cardtitle {
  margin: 0;
  min-width: 0;            /* let a long title wrap rather than shove the pill out */
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--rp-navy);
}

.aisa-rp__meter { display: flex; align-items: center; gap: 6px; }

/*
 * Five dots, filled to the score. Drawn in CSS rather than shipped as five
 * SVGs: they are plain circles whose only variable is colour, and the colour
 * comes from the band - so one token change recolours the dots and the pill
 * together.
 */
.aisa-rp__dots { display: flex; gap: 5px; }
.aisa-rp__dot { width: 10px; height: 10px; border-radius: 50%; background: #d9d9d9; }
.aisa-rp__dot.is-on { background: var(--rp-band-fg, #999); }

.aisa-rp__band {
  flex: none;
  height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 2px 16px;
  border-radius: 600px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: .48px;
  white-space: nowrap;
  background: var(--rp-band-bg, #eee);
  color: var(--rp-band-fg, #555);
}

.aisa-rp__card--good { --rp-band-bg: var(--rp-good-bg); --rp-band-fg: var(--rp-good-fg); }
.aisa-rp__card--fair { --rp-band-bg: var(--rp-fair-bg); --rp-band-fg: var(--rp-fair-fg); }
.aisa-rp__card--attn { --rp-band-bg: var(--rp-attn-bg); --rp-band-fg: var(--rp-attn-fg); }

.aisa-rp__cardnote { margin: 0; font-size: 16px; line-height: 24px; color: var(--rp-grey); }

/* ---------- summary ---------- */

.aisa-rp__summary {
  padding: 30px 50px;
  border: 1px solid rgba(50, 98, 149, .5);
  border-radius: 20px;
  background: var(--rp-cream);
}
.aisa-rp__summaryhead {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--rp-navy);
}
.aisa-rp__summarybody { margin: 0; font-size: 16px; line-height: 24px; color: var(--rp-grey); }

.aisa-rp__extra:empty { display: none; }

/* ---------- treatments ---------- */

.aisa-rp__h2 {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--rp-navy);
}
.aisa-rp__sub { margin: 16px 0 24px; font-size: 18px; line-height: 26px; color: var(--rp-grey); }

/*
 * stretch, not start: the cards carry descriptions of different lengths and
 * only some have a picture, so left to themselves they end at three different
 * heights and the blue buttons stagger across the row.
 */
.aisa-rp__tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }

/*
 * The thumbnail overlaps the card it belongs to. Achieved with a negative
 * margin and a stacking context, the way the frame builds it, so the card's
 * own shadow stays behind the picture rather than being cast over it.
 */
.aisa-rp__treatment { display: flex; flex-direction: column; isolation: isolate; }

.aisa-rp__tthumb {
  z-index: 2;
  margin: 0 0 calc(var(--rp-thumb-overlap) * -1) 24px;
  width: var(--rp-thumb);
  height: var(--rp-thumb);
  border-radius: 12px;
  overflow: hidden;
  display: block;
  background: var(--rp-cream);
}
.aisa-rp__tthumb img { width: 100%; height: 100%; display: block; object-fit: cover; }

.aisa-rp__tbody {
  z-index: 1;
  flex: 1;                 /* takes up the slack, so the CTA sits on the bottom edge */
  background: #fff;
  padding: 60px 24px 32px;
  filter: drop-shadow(var(--rp-lift-shadow));
}

/*
 * A card with no picture reserves the space one would have taken, so every
 * white panel in the row starts on the same line. Most catalogues are only
 * partly illustrated, so this is the common case rather than the exception -
 * and an empty placeholder tile would only advertise the gap.
 */
.aisa-rp__treatment--nothumb { padding-top: calc(var(--rp-thumb) - var(--rp-thumb-overlap)); }

.aisa-rp__tname {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  display: block;
}
a.aisa-rp__tname:hover { text-decoration: underline; }
.aisa-rp__tdesc { margin: 0; font-size: 16px; line-height: 24px; color: var(--rp-grey-2); }

.aisa-rp__tcta {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 40px;
  background: var(--rp-blue);
  color: #fff;
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.aisa-rp__tcta:hover { background: #2a5480; color: #fff; }
.aisa-rp__tcta img { width: 20px; flex: none; }

/* ---------- callout ---------- */

.aisa-rp__callout {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px;
  border-radius: 20px;
  background: var(--rp-navy);
  color: #fff;
  text-align: center;
}
.aisa-rp__calloutTitle {
  margin: 0;
  font-size: 36px;
  line-height: 48px;
  font-weight: 400;
  text-transform: capitalize;
  color: #fff;
  /* Sits over the box's top edge, as drawn. */
  position: relative;
  z-index: 1;
  background: var(--rp-navy);
  padding-inline: 32px;
  margin-bottom: -56px;
}
.aisa-rp__calloutBox {
  width: min(1000px, 100%);
  border: 1px solid #fff;
  padding: 56px 40px 40px;
}
.aisa-rp__calloutBody { margin: 0; font-size: 18px; line-height: 26px; color: #fff; }
.aisa-rp__callout .aisa-rp__btn--accent { margin-top: -52px; position: relative; z-index: 1; }

/* ---------- footer ---------- */

.aisa-rp__foot { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.aisa-rp__disclaimer {
  margin: 0;
  max-width: 90ch;
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  color: var(--rp-grey);
}
/*
 * Never shown. Retake already sits in the header beside Download, and the
 * enquiry button repeated the call to action immediately above it - so the
 * row was two more chances to leave the report, directly under the one that
 * matters. The markup stays so the configurable enquiry link can be put back
 * without rebuilding it.
 */
.aisa-rp__footactions { display: none; }

/*
 * The phone's replacement for it. By the time someone reaches the bottom of
 * the report the header actions are a long way up, so this is the one way out
 * offered there - see the mobile block below.
 */
.aisa-rp__restartmobile { display: none; }

/* ---------- narrower ---------- */

@media (max-width: 1100px) {
  .aisa-rp { padding: 32px 24px 48px; }
  .aisa-rp__head { padding-inline: 0; }
  .aisa-rp__cards,
  .aisa-rp__tgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .aisa-rp { padding: 24px 16px 40px; }
  .aisa-rp__head { flex-direction: column; gap: 24px; text-align: center; }
  .aisa-rp__headtext { width: 100%; align-items: stretch; }
  .aisa-rp__portrait { width: 220px; height: 220px; }
  .aisa-rp__cards,
  .aisa-rp__tgrid { grid-template-columns: 1fr; }
  /* One card per row: nothing to line up with, and the reserved space would
     read as a gap rather than as alignment. */
  .aisa-rp__treatment--nothumb { padding-top: 0; }
  .aisa-rp__treatment--nothumb .aisa-rp__tbody { padding-top: 32px; }
  .aisa-rp__summary { padding: 24px 20px; }
  .aisa-rp__h1, .aisa-rp__h2 { font-size: 26px; line-height: 34px; }
  .aisa-rp__calloutTitle { font-size: 26px; line-height: 34px; margin-bottom: -44px; padding-inline: 16px; }
  .aisa-rp__calloutBox { padding: 44px 20px 32px; }
  .aisa-rp__callout { padding: 24px 16px; }
  /*
   * Sized to its own text and centred, not stretched edge to edge - the frame
   * draws it at 240px in a 295px column, which is what the label plus its 24px
   * padding comes to. The foot centres it.
   */
  .aisa-rp__restartmobile { display: inline-flex; width: auto; }

  /* Mobile/P M, a step down from the 18/26 the desktop column uses. */
  .aisa-rp__disclaimer { font-size: 16px; line-height: 24px; }

  /* 32px under the small print, per the frame. */
  .aisa-rp__foot { gap: 32px; }
}

/* Print remains the fallback when the PDF library cannot load. */
@media print {
  .aisa-rp__headactions,
  .aisa-rp__footactions,
  .aisa-rp__restartmobile,
  .aisa-rp__callout { display: none !important; }
  .aisa-rp { padding: 0; max-width: none; }
  .aisa-rp__card,
  .aisa-rp__tbody { box-shadow: none; filter: none; border: 1px solid var(--rp-rule); }
}

/* ==========================================================================
   Sample report
   ========================================================================== */

/*
 * The eyebrow carries the warning, so it stops being a quiet label and starts
 * being the loudest thing above the heading. Same slot, same size - only the
 * colour and weight change, so nothing below it moves.
 */
.aisa-rp__eyebrow--sample {
  color: var(--rp-attn-fg);
  font-weight: 700;
}