/* =========================================================================
   THE REPORT
   =========================================================================
   Loaded after app.css for assetGroup "analysis" and on the landing page,
   which shows a sample of it.

   Rewritten in October 2026. The file this replaces had grown by correction:
   twelve passes of overrides on top of the first build, here and in app.css,
   until a chapter's look was the sum of rules written for three earlier
   designs. The report looked like it. This is one system, written once.

   THE BRAND, APPLIED. Plus Jakarta Sans and the app.css tokens, nothing
   imported: hierarchy is weight and scale, and Plus Jakarta Sans 800 at a
   quarter of the card's width is a strong number. Three grounds, all from
   the kit, take turns so the story has a rhythm: cobalt for the answer and
   for the move that changes it, ink for the two cards about the student,
   paper for the working. One accent per ground, on the one thing that card
   is about.

   A CARD IS A POSTER, NOT A PANEL. One statement, one figure, one drawing,
   set large, with the top of the card and the bottom of it both anchored and
   the slack between them. No boxes inside the box: rows are separated by a
   rule, lists are type. Whatever else belongs to a card is in its sheet.

   EVERYTHING IS A SHARE OF THE CARD. The stage is a container and every
   length inside it is in cqw, so a card is the same picture at 300px and at
   400px and nothing has to be re-fitted per breakpoint. (The stage's own
   radius and shadow are in px: an element cannot be measured against itself.)

   MOTION SAYS WHAT CHANGED. A card's parts arrive in reading order when it
   opens; figures count up to the number printed; the crowd fills in, because
   the crowd is the point. Transform and opacity only, each animation ends
   (fill-mode backwards, never both), none runs on a card that is not on
   screen, and all of it is off under reduced motion and on .pk-lite phones.
   ========================================================================= */

:root {
  /* Aliases kept for the panels under the story, which were written with them. */
  --rp-ink: var(--ink);
  --rp-ink-2: var(--ink-2);
  --rp-mute: var(--muted);
  --rp-line: var(--line);
  --rp-surface: var(--surface);
  --rp-bg: var(--bg);
  --rp-blue: var(--accent-ink);
  --rp-blue-soft: var(--primary-soft);
  --rp-red-ink: var(--bad-ink);
}

/* ---- the frame ---------------------------------------------------------
   The largest 9:16 box that fits the width and what is left of the height:
   --rs-chrome is everything on screen that is not the card (the tab bar on a
   phone, the top bar on a desktop, a little air). Without the viewer script
   the same markup is a plain column of cards. */
.rs {
  --rs-chrome: 10rem;
  --rs-w: max(260px, min(100%, 400px, (100svh - var(--rs-chrome)) * 9 / 16));
  display: flex; flex-direction: column; align-items: center;
  color: var(--ink);
}
@media (max-width: 991px) { .rs { --rs-chrome: 7.25rem; } }

.rs-stage {
  position: relative;
  width: min(100%, 400px);
  display: grid; gap: 1rem;
  container-type: inline-size; container-name: story;
}
.rs.is-story .rs-stage {
  display: block;
  width: var(--rs-w);
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 28px 50px -28px rgba(var(--shadow-rgb), .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---- grounds -----------------------------------------------------------
   Each card sets the same handful of names, and everything inside reads
   them, so a row or a meter is written once and sits on any ground.
   --g ground, --fg/--fg2/--fg3 text in three steps, --rule a hairline,
   --soft a tint of the ground, --acc the accent and --on-acc what sits on
   it, --acc-ink the accent as small type. */
.rs-ch {
  --g: var(--surface); --fg: var(--ink); --fg2: var(--ink-2); --fg3: var(--muted);
  --rule: var(--line-strong); --soft: var(--surface-2);
  --acc: var(--primary); --on-acc: #fff; --acc-ink: var(--accent-ink);
  --fig: var(--line-strong);
  position: relative;
  background: var(--g); color: var(--fg);
  border-radius: 20px; overflow: hidden;
}
.rs-ch--cobalt {
  /* The deeper step of the brand blue: white type clears 6.7:1 on it, and
     4.5:1 at the lightest step used for small text, which it does not on
     #2563eb. */
  --g: var(--primary-dark); --fg: #fff; --fg2: rgba(255, 255, 255, .9); --fg3: rgba(255, 255, 255, .78);
  --rule: rgba(255, 255, 255, .26); --soft: rgba(255, 255, 255, .12);
  --acc: #fff; --on-acc: var(--primary-dark); --acc-ink: #fff;
  --fig: rgba(255, 255, 255, .3);
}
.rs-ch--ink {
  --g: #26221e; --fg: #f6f1ea; --fg2: #ddd6ce; --fg3: #b3aba2;
  --rule: rgba(255, 255, 255, .17); --soft: rgba(255, 255, 255, .07);
  --acc: #8fb4ff; --on-acc: #15120f; --acc-ink: #8fb4ff;
  --fig: rgba(255, 255, 255, .22);
}
:root[data-theme="dark"] .rs-ch--ink { --g: #110f0d; }
:root[data-theme="dark"] .rs-ch--paper { --acc: #7aa5ff; --on-acc: #15120f; }

/* ---- a card ------------------------------------------------------------ */
.rs-face {
  display: flex; flex-direction: column;
  padding: 9cqw 7cqw 8cqw;
}
.rs.is-story .rs-ch {
  position: absolute; inset: 0; border-radius: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .26s ease, visibility 0s linear .26s;
}
.rs.is-story .rs-ch.is-on { opacity: 1; visibility: visible; transition: opacity .26s ease; }
.rs.is-story .rs-face {
  position: absolute; inset: 0;
  /* Room for the progress segments above and the bar below. */
  padding: 12.5cqw 7cqw 20.5cqw;
  transition: opacity .28s ease, transform .32s cubic-bezier(.2, .8, .2, 1);
}
.rs.is-story .rs-ch.is-open .rs-face { opacity: .3; transform: scale(.965); }
.rs-face > * { flex-shrink: 0; }

/* Nothing inside a card may cross its edge: a long prodi name wraps. */
.rs-ch * { min-width: 0; }
.rs-ch p, .rs-ch h3, .rs-ch h4, .rs-ch h5, .rs-ch b { overflow-wrap: anywhere; }

/* ---- type -------------------------------------------------------------- */
.rs-kicker {
  margin: 0 0 2.2cqw;
  font-size: 3.3cqw; line-height: 1.3; font-weight: 700; color: var(--fg3);
}
.rs-title {
  margin: 0;
  font-size: 5.8cqw; line-height: 1.17; font-weight: 800; letter-spacing: -.026em;
  text-wrap: balance;
}
.rs-title--xl { font-size: 8.6cqw; line-height: 1.06; letter-spacing: -.035em; }
.rs-mega {
  margin: 0;
  font-size: 25cqw; line-height: .86; font-weight: 800; letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.rs-mega sup {
  position: relative; top: .3em; margin-left: .05em; vertical-align: top;
  font-size: .36em; letter-spacing: 0;
}
.rs-body { margin: 4.2cqw 0 0; font-size: 3.8cqw; line-height: 1.46; color: var(--fg2); }
.rs-cap { margin: 2.2cqw 0 0; font-size: 3.4cqw; line-height: 1.42; color: var(--fg3); }
.rs-cap b { color: var(--fg); font-weight: 700; }
.rs-fine { font-size: 3.1cqw; line-height: 1.45; color: var(--fg3); }

.rs-tier {
  display: inline-block; vertical-align: .1em; margin-right: 1.2cqw;
  padding: .55cqw 2.2cqw; border-radius: 99px;
  border: 1px solid var(--rule); background: var(--soft);
  font-size: 3cqw; line-height: 1.4; font-weight: 800; color: var(--fg); white-space: nowrap;
}

/* PTN crests sit on a white disc: half of them are drawn for a white page
   and vanish on cobalt. The lettermark stands in where there is no file. */
.rs-crest {
  flex: 0 0 auto; display: block;
  width: 8.6cqw; height: 8.6cqw; padding: .9cqw;
  border-radius: 50%; background: #fff; object-fit: contain;
}
.rs-crest--lg { width: 11.5cqw; height: 11.5cqw; padding: 1.2cqw; }
.rs-crest--ltr {
  display: grid; place-items: center; padding: 0;
  background: var(--soft); color: var(--fg);
  font-size: 4cqw; font-weight: 800; line-height: 1;
}

/* ---- a position on a line ----------------------------------------------
   The middle is the people being compared with; the dot is the student. */
.rs-meter { position: relative; height: 3.4cqw; }
.rs-meter::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: max(2px, .5cqw); margin-top: calc(max(2px, .5cqw) / -2);
  border-radius: 99px; background: var(--rule);
}
.rs-meter-mid {
  position: absolute; left: 50%; top: -.6cqw; bottom: -.6cqw;
  width: max(2px, .5cqw); margin-left: calc(max(2px, .5cqw) / -2);
  border-radius: 99px; background: var(--fg3);
}
/* The dot rides a full-width rail, so its place is a transform, not a left:
   it can slide in without the card being laid out again. */
.rs-meter-dot { position: absolute; left: 0; right: 0; top: 50%; height: 0; transform: translateX(var(--x)); }
.rs-meter-dot::after {
  content: ""; position: absolute; left: -1.7cqw; top: -1.7cqw;
  width: 3.4cqw; height: 3.4cqw; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 0 .9cqw var(--g);
}

/* =========================================================================
   1. Hasil
   ========================================================================= */
#ch-hasil .rs-title { font-size: 5.5cqw; }
.rs-of100 { margin-top: 4.6cqw; }
.rs-of100-n { display: flex; align-items: baseline; gap: 2.4cqw; margin: 0; }
.rs-of100-n b {
  font-size: 23cqw; line-height: .86; font-weight: 800; letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.rs-of100-n span { font-size: 6cqw; font-weight: 700; letter-spacing: -.02em; }
.rs-of100-t { margin: 2.4cqw 0 0; font-size: 3.8cqw; line-height: 1.4; color: var(--fg2); }
.rs-hundred {
  display: grid; grid-template-columns: repeat(25, 1fr); gap: 1.05cqw;
  margin-top: 3.8cqw;
}
.rs-hundred i { aspect-ratio: 1; border-radius: 50%; background: var(--fig); }
.rs-hundred i.is-lit { background: var(--fg); }

/* Both picks, as two lines of type under a rule each. */
.rs-picks { list-style: none; margin: auto 0 0; padding: 0; }
.rs-of100 + .rs-picks { padding-top: 4cqw; }
.rs-picks li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3cqw;
  padding: 2.7cqw 0; border-top: 1px solid var(--rule);
}
/* One line each, however long the catalogue's name for it: the pick's own
   card and the panel under the story have it in full. */
.rs-picks-t b, .rs-picks-t i, .rs-opt-t b, .rs-opt-t i, .rs-who span em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-picks-t b { display: block; font-size: 4cqw; line-height: 1.2; font-weight: 700; }
.rs-picks-t i { display: block; margin-top: .4cqw; font-style: normal; font-size: 3.2cqw; line-height: 1.3; color: var(--fg3); }
.rs-picks-n { text-align: right; }
.rs-picks-n b { display: block; font-size: 5.4cqw; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rs-picks-n i { display: block; font-style: normal; font-size: 3cqw; line-height: 1.3; color: var(--fg3); }
.rs-picks-n--none i { max-width: 22cqw; }
.rs-take {
  margin: 0; padding-top: 3.2cqw; border-top: 1px solid var(--rule);
  font-size: 3.75cqw; line-height: 1.42; font-weight: 600; color: var(--fg);
}

/* =========================================================================
   2. A pick
   ========================================================================= */
.rs-who { display: flex; align-items: center; gap: 3.2cqw; }
.rs-who span i { display: block; font-style: normal; font-size: 3.1cqw; line-height: 1.3; font-weight: 700; color: var(--acc-ink); }
.rs-who span b {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 4.7cqw; line-height: 1.15; font-weight: 800; letter-spacing: -.02em;
}
.rs-who span em { display: block; margin-top: .3cqw; font-style: normal; font-size: 3.3cqw; line-height: 1.3; color: var(--fg3); }

.rs-chance { margin-top: 5.6cqw; }
.rs-chance .rs-mega { font-size: 29cqw; }
.rs-chance .rs-mega { color: var(--acc-ink); }
.rs-chance-t { margin: 2.6cqw 0 0; font-size: 3.5cqw; line-height: 1.5; color: var(--fg2); }
.rs-chance-t b { color: var(--fg); font-weight: 700; }

.rs-seat { margin-top: 5.6cqw; }
.rs-crowd { display: block; width: 100%; height: auto; }
.rs-crowd use { fill: var(--fig); }
.rs-crowd use.is-in { fill: var(--acc); }

.rs-stand { margin-top: 5.4cqw; }
.rs-stand-k { margin: 0; font-size: 3.3cqw; line-height: 1.3; color: var(--fg3); }
.rs-stand-v { margin: .4cqw 0 3cqw; font-size: 4.6cqw; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.rs-stand-v::first-letter { text-transform: uppercase; }

/* The one sentence of reading sits at the foot of the card. */
#ch-pilihan-1 .rs-face > .rs-body:last-child,
#ch-pilihan-2 .rs-face > .rs-body:last-child { margin-top: auto; padding-top: 4cqw; }

/* =========================================================================
   3. Profil
   ========================================================================= */
.rs-score { display: flex; align-items: flex-end; gap: 3.6cqw; margin-top: 4.2cqw; }
#ch-profil .rs-mega { font-size: 22cqw; }
#ch-profil .rs-body { margin-top: 3.6cqw; }
.rs-score .rs-mega { color: var(--acc); }
.rs-score-t { margin: 0 0 1.2cqw; max-width: 42cqw; font-size: 3.5cqw; line-height: 1.42; color: var(--fg2); }
.rs-score-t b { color: var(--fg); font-weight: 700; }
.rs-shape { list-style: none; margin: auto 0 0; padding: 3.6cqw 0 0; display: grid; gap: 2.5cqw; }
.rs-shape p { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqw; margin: 0 0 1.5cqw; font-size: 3.4cqw; line-height: 1.3; }
.rs-shape p span { color: var(--fg2); }
.rs-shape p b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-shape-key { display: flex; justify-content: space-between; margin: 2cqw 0 0; font-size: 3cqw; }

/* =========================================================================
   4. Strategi
   ========================================================================= */
.rs-jump { display: flex; align-items: flex-end; gap: 3cqw; margin-top: 4.6cqw; }
.rs-jump-from { margin: 0 0 1.1cqw; }
.rs-jump-from i { display: block; font-style: normal; font-size: 3cqw; line-height: 1.3; color: var(--fg3); }
.rs-jump-from b { display: block; font-size: 9.5cqw; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--fg3); font-variant-numeric: tabular-nums; }
.rs-jump-arrow { margin-bottom: 2.4cqw; font-size: 6cqw; color: var(--fg3); }
.rs-jump-to { margin: 0; font-size: 25cqw; line-height: .86; font-weight: 800; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.rs-jump-to b { display: inline-block; }
.rs-jump-to sup { position: relative; top: .3em; margin-left: .05em; vertical-align: top; font-size: .36em; letter-spacing: 0; }
.rs-jump-cap { margin-top: 3cqw; }

/* The candidates are a choice of one, so they are buttons that look like
   rows; the chosen one is filled and the figure above follows it. */
.rs-opts { display: grid; gap: 1.5cqw; margin-top: 3.2cqw; }
.rs-opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3cqw;
  padding: 2.1cqw 3.4cqw; border-radius: 3.6cqw;
  border: 1px solid var(--rule); background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s cubic-bezier(.2, .8, .2, 1);
}
.rs-opt:active { transform: scale(.985); }
.rs-opt:focus-visible, .rs-nav button:focus-visible, .rs-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.rs-opt.is-on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.rs-opt-t b { display: block; font-size: 3.8cqw; line-height: 1.22; font-weight: 700; }
.rs-opt-t i { display: block; font-style: normal; font-size: 3.1cqw; line-height: 1.3; opacity: .8; }
.rs-opt-n { text-align: right; }
.rs-opt-n b { display: block; font-size: 5cqw; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rs-opt-n i { display: block; font-style: normal; font-size: 3cqw; line-height: 1.3; opacity: .8; }
.rs-pick { margin-top: auto; padding-top: 3.6cqw; font-weight: 600; color: var(--fg); }

.rs-solo { display: flex; align-items: flex-end; gap: 3.6cqw; margin-top: 4.6cqw; }
.rs-solo .rs-score-t { max-width: 44cqw; }
.rs-solo .rs-tier { margin: 1.4cqw 0 0; }
.rs-picks--roles { margin-top: auto; }
.rs-picks--roles + .rs-cap { margin-top: 0; padding-top: 3.2cqw; border-top: 1px solid var(--rule); color: var(--fg2); }

/* Moves as rows: what, what it costs, what it comes to. */
.rs-moves { list-style: none; margin: 0 0 2.6cqw; padding: 0; }
.rs-face > .rs-moves { margin: auto 0 0; }
.rs-face > .rs-moves span b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rs-face > .rs-moves span i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-moves li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3cqw;
  padding: 2.5cqw 0; border-top: 1px solid var(--rule);
}
.rs-moves span b { display: block; font-size: 3.7cqw; line-height: 1.25; font-weight: 700; color: var(--fg); }
.rs-moves span i { display: block; margin-top: .3cqw; font-style: normal; font-size: 3.1cqw; line-height: 1.35; color: var(--fg3); }
.rs-moves em { font-style: normal; font-size: 4.8cqw; font-weight: 800; letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.rs-moves--dates em { max-width: 30cqw; font-size: 3.1cqw; font-weight: 700; letter-spacing: 0; text-align: right; }
.rs-face > .rs-moves + .rs-cap { margin-top: 3cqw; }

/* =========================================================================
   5. Ubah
   Steps that are as tall as the chance they stand for, on one scale.
   ========================================================================= */
.rs-stairs {
  flex: 1 1 auto; min-height: 44cqw;
  list-style: none; margin: 5cqw 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2.4cqw;
}
.rs-stairs li { display: flex; flex-direction: column; justify-content: flex-end; }
.rs-stairs b { font-size: 7.4cqw; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.rs-stairs li:not(.is-now) b { color: var(--acc-ink); }
.rs-stairs i {
  display: block; flex: 0 0 auto; margin-top: 1.8cqw;
  /* The column's height less the figure above and the label below. */
  height: calc((100% - 24cqw) * var(--h));
  min-height: 1.6cqw;
  border-radius: 2.4cqw 2.4cqw 0 0; background: var(--acc); transform-origin: 50% 100%;
}
.rs-stairs li.is-now i { background: var(--fig); }
.rs-stairs li > span { display: block; height: 13.5cqw; padding-top: 1.8cqw; border-top: 1px solid var(--rule); font-size: 3.1cqw; line-height: 1.3; color: var(--fg2); }
.rs-stairs + .rs-cap { margin-top: 3.4cqw; }

/* =========================================================================
   6. Jadwal
   ========================================================================= */
.rs-next { display: flex; align-items: flex-end; gap: 3.6cqw; margin-top: 4.6cqw; }
.rs-next-n { display: flex; align-items: baseline; gap: 2.2cqw; margin: 0; color: var(--acc-ink); }
.rs-next-n b { font-size: 25cqw; line-height: .86; font-weight: 800; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.rs-next-n b:only-child { font-size: 13cqw; line-height: 1; letter-spacing: -.04em; }
.rs-next-n span { font-size: 5cqw; font-weight: 700; letter-spacing: -.02em; color: var(--fg); }
.rs-next-t { margin: 0 0 1cqw; font-size: 3.5cqw; line-height: 1.4; color: var(--fg2); }
.rs-next:has(.rs-next-n span) { flex-wrap: wrap; row-gap: 2cqw; }

.rs-tl { list-style: none; margin: auto 0 0; padding: 4cqw 0 0; }
.rs-tl li { padding: 2.6cqw 0; border-top: 1px solid var(--rule); }
.rs-tl b { display: block; font-size: 3.8cqw; line-height: 1.25; font-weight: 700; }
.rs-tl span { display: block; margin-top: .3cqw; font-size: 3.2cqw; line-height: 1.35; color: var(--fg3); }
.rs-req {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.6cqw 3.4cqw;
  margin: 0; padding-top: 3cqw; border-top: 1px solid var(--rule);
  font-size: 3.4cqw; line-height: 1.35; color: var(--fg2);
}
.rs-tl + .rs-req { margin-top: 0; }
.rs-face > .rs-req:not(.rs-tl + .rs-req) { margin-top: auto; }
.rs-req-n b { color: var(--fg); font-weight: 800; }
.rs-req-todo { display: inline-flex; align-items: center; gap: 1.4cqw; font-weight: 700; color: var(--warn-ink); }
.rs-req-todo i { font-size: 4cqw; }

/* =========================================================================
   7. Bagikan
   ========================================================================= */
.rs-badge {
  display: grid; place-items: center;
  width: 19cqw; height: 19cqw; margin: 3cqw 0 5cqw; border-radius: 50%;
  background: var(--acc); color: var(--on-acc); font-size: 9.6cqw;
  transform: rotate(-8deg);
}
.rs-ch--share .rs-body { margin-top: 3.4cqw; }
.rs-traits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; margin: auto 0 0; padding-top: 4cqw; }
.rs-traits div { padding-top: 2.2cqw; border-top: max(2px, .5cqw) solid var(--fg); }
.rs-traits dd { margin: 0; font-size: 5.6cqw; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rs-traits dt { margin-top: .8cqw; font-size: 3cqw; line-height: 1.3; font-weight: 500; color: var(--fg3); }
.rs-cta { display: grid; gap: 2cqw; margin-top: 5cqw; }
.rs-btn {
  display: flex; align-items: center; justify-content: center; gap: 2cqw;
  min-height: 11.5cqw; padding: 0 4cqw; border-radius: 99px;
  border: 1px solid var(--rule); background: transparent; color: var(--fg);
  font-size: 3.7cqw; font-weight: 700; text-decoration: none;
  transition: transform .12s cubic-bezier(.2, .8, .2, 1), background-color .15s ease;
}
.rs-btn:hover { color: var(--fg); background: var(--soft); }
.rs-btn:active { transform: translateY(1px) scale(.985); }
.rs-btn--main { border-color: var(--acc); background: var(--acc); color: var(--on-acc); }
.rs-btn--main:hover { background: var(--acc); color: var(--on-acc); }
.rs-btn i { font-size: 4.6cqw; }

/* =========================================================================
   The sheet
   A card's working, on paper, sliding up over the face. The face stays in
   view above it, dimmed, so it is plainly the same card.
   ========================================================================= */
.rs-sheet {
  --g: var(--surface); --fg: var(--ink); --fg2: var(--ink-2); --fg3: var(--muted);
  --rule: var(--line-strong); --soft: var(--surface-2);
  --acc: var(--primary); --on-acc: #fff; --acc-ink: var(--accent-ink);
  padding: 7cqw 7cqw 8cqw;
  background: var(--g); color: var(--fg2);
  font-size: 3.7cqw; line-height: 1.5;
  border-top: 1px solid var(--rule);
}
.rs.is-story .rs-sheet {
  position: absolute; left: 0; right: 0; top: 10cqw; bottom: 0; z-index: 3;
  padding: 8cqw 7cqw 22cqw;
  border-top: 0; border-radius: 6cqw 6cqw 0 0;
  box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .5);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  cursor: auto;
  transform: translateY(104%); visibility: hidden;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .34s;
}
.rs.is-story .rs-sheet::-webkit-scrollbar { display: none; }
.rs.is-story .rs-ch.is-open .rs-sheet { transform: none; visibility: visible; transition: transform .34s cubic-bezier(.2, .8, .2, 1); }

.rs-sheet-h { margin: 0 0 3cqw; font-size: 5.2cqw; line-height: 1.2; font-weight: 800; letter-spacing: -.024em; color: var(--fg); }
.rs-sheet-k { margin: 5.4cqw 0 2cqw; font-size: 3.3cqw; line-height: 1.3; font-weight: 700; color: var(--fg3); }
.rs-sheet p { margin: 0 0 2.6cqw; }
.rs-sheet p b, .rs-sheet li b { color: var(--fg); font-weight: 700; }
.rs-sheet > :last-child { margin-bottom: 0; }

.rs-list { margin: 0 0 2.6cqw; padding-left: 4.4cqw; display: grid; gap: 1.6cqw; }
.rs-how { margin: 0 0 2.6cqw; padding-left: 4.6cqw; display: grid; gap: 2cqw; }

.rs-factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6cqw; }
.rs-factors li { display: grid; grid-template-columns: 5.4cqw minmax(0, 1fr); gap: 2.6cqw; align-items: start; }
.rs-factors i {
  display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; margin-top: .1cqw;
  border-radius: 50%; background: var(--soft); color: var(--fg3); font-size: 3.2cqw;
}
.rs-factors .is-up i { background: var(--ok-bg); color: var(--ok-ink); }
.rs-factors .is-down i { background: var(--bad-bg); color: var(--bad-ink); }

.rs-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3cqw; }
.rs-checks li { display: grid; grid-template-columns: 5.4cqw minmax(0, 1fr); gap: 2.6cqw; align-items: start; }
.rs-checks i {
  display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; margin-top: .1cqw;
  border-radius: 50%; background: var(--soft); color: var(--fg3); font-size: 3.2cqw;
}
.rs-checks .is-ok i { background: var(--ok-bg); color: var(--ok-ink); }
.rs-checks .is-action i, .rs-checks .is-block i { background: var(--warn-bg); color: var(--warn-ink); }
.rs-checks b { display: block; }

.rs-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.4cqw; margin: 3.4cqw 0 2.6cqw; }
.rs-duo div { padding-top: 2cqw; border-top: max(2px, .5cqw) solid var(--fg); }
.rs-duo dt { font-size: 3.1cqw; line-height: 1.3; color: var(--fg3); }
.rs-duo dd { margin: .6cqw 0 0; font-size: 6cqw; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.rs-duo .rs-duo-s { font-size: 3.1cqw; line-height: 1.35; font-weight: 500; letter-spacing: 0; color: var(--fg3); }

.rs-plot { display: block; width: 100%; height: auto; margin: 1cqw 0 2cqw; overflow: visible; }
.rs-plot-base { stroke: var(--rule); stroke-width: 1; }
.rs-plot-line { fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rs-plot-line--next { stroke-dasharray: 4 4; }
.rs-plot-dot { fill: var(--g); stroke: var(--acc); stroke-width: 2; }
.rs-plot-dot.is-last { fill: var(--acc); }
.rs-plot-v { font-size: 11.5px; font-weight: 700; fill: var(--fg); }
.rs-plot-k { font-size: 10px; fill: var(--fg3); }

/* =========================================================================
   The viewer's own parts: progress above, one bar below.
   They take their colour from the ground of the card on screen, which the
   viewer names on the stage.
   ========================================================================= */
.rs-stage { --ui: var(--ink); --ui-soft: rgba(var(--shadow-rgb), .07); --ui-rule: var(--line-strong); --ui-on: var(--surface); }
.rs-stage[data-ground="cobalt"] { --ui: #fff; --ui-soft: rgba(255, 255, 255, .14); --ui-rule: rgba(255, 255, 255, .3); --ui-on: var(--primary-dark); }
.rs-stage[data-ground="ink"] { --ui: #f6f1ea; --ui-soft: rgba(255, 255, 255, .08); --ui-rule: rgba(255, 255, 255, .2); --ui-on: #26221e; }
:root[data-theme="dark"] .rs-stage:not([data-ground="cobalt"]):not([data-ground="ink"]) { --ui-soft: rgba(255, 255, 255, .07); }

.rs-bars { display: none; }
.rs.is-story .rs-bars {
  position: absolute; left: 6cqw; right: 6cqw; top: 5cqw; z-index: 4;
  display: flex; gap: 1.1cqw; pointer-events: none;
}
.rs-bars i { flex: 1 1 0; height: max(2.5px, .8cqw); border-radius: 99px; background: var(--ui); opacity: .26; transition: opacity .25s ease; }
.rs-bars i.is-seen, .rs-bars i.is-now { opacity: 1; }

.rs-nav[hidden] { display: none; }
.rs-nav {
  position: absolute; left: 5cqw; right: 5cqw; bottom: 4.8cqw; z-index: 5;
  display: flex; align-items: center; gap: 2cqw;
  color: var(--ui); cursor: auto;
}
.rs-nav button {
  display: inline-flex; align-items: center; justify-content: center; gap: 1.6cqw;
  height: 11.5cqw; padding: 0; border-radius: 99px;
  border: 1px solid var(--ui-rule); background: var(--ui-soft); color: var(--ui);
  font: inherit; font-size: 3.5cqw; font-weight: 700; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .12s cubic-bezier(.2, .8, .2, 1), background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.pk-lite .rs-nav button { -webkit-backdrop-filter: none; backdrop-filter: none; }
.rs-nav button:active { transform: scale(.95); }
.rs-nav button i { font-size: 4.4cqw; }
.rs-more { padding: 0 4.4cqw 0 3.4cqw !important; }
.rs-more[hidden] { display: none; }
.rs-more i { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.rs-more[aria-expanded="true"] i { transform: rotate(45deg); }
.rs-count { margin-left: auto; padding-right: 1cqw; font-size: 3.1cqw; font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; }
.rs-go { width: 11.5cqw; flex: 0 0 auto; }
.rs-go--next { background: var(--ui) !important; border-color: var(--ui) !important; color: var(--ui-on) !important; }
.rs-go:disabled { opacity: .32; cursor: default; }

/* The sheet is paper whatever card it belongs to. */
.rs-stage.has-sheet { --ui: var(--ink); --ui-soft: var(--surface-2); --ui-rule: var(--line-strong); --ui-on: var(--surface); }
.rs-stage.has-sheet .rs-go, .rs-stage.has-sheet .rs-count { opacity: 0; pointer-events: none; }
.rs-nav::before {
  content: ""; position: absolute; left: -5cqw; right: -5cqw; bottom: -4.8cqw; height: 24cqw; z-index: -1;
  background: linear-gradient(to top, var(--surface) 62%, transparent);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.rs-stage.has-sheet .rs-nav::before { opacity: 1; }

/* =========================================================================
   The page around the story, on a wide screen.
   A 400px card alone in a 1440px page is not airy, it is unfinished: the
   card stood in the middle with the page's own header above it, pushing its
   last third below the fold. From 992px the card stands on the left and
   holds its place while the rest of the page (which analysis this is, the
   chapters by name, the data behind it, the follow-up questions) runs down
   the right. Phones are untouched.
   ========================================================================= */
.rs-index { display: none; }
@media (min-width: 992px) {
  .report-page {
    /* The card's column is sized here, from the same sum the card uses: a
       track sized by its content cannot also be what that content is a
       percentage of. */
    display: grid; grid-template-columns: max(260px, min(400px, (100svh - 7.5rem) * 9 / 16)) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .report-page > * { grid-column: 2; }
  .report-page > .rs {
    grid-column: 1; grid-row: 1 / span 12;
    position: sticky; top: 5.5rem;
    --rs-chrome: 7.5rem; width: 100%;
  }
  .report-page > .report-head { margin-bottom: 1.75rem !important; }
  .report-page > .usedata, .report-page > .report-acts { width: 100%; max-width: 34rem; margin-left: 0; margin-right: 0; }
  .report-page > .report-acts { justify-content: flex-start; }
  .report-page > .report-acts .act { flex: 0 0 auto; }
  .report-page > .qa { max-width: 34rem; }

  /* A list of type on a rail, the chapter on screen in ink with its stretch
     of rail in the accent: the landing page's contents list, here for real. */
  .report-page > .rs-index:not([hidden]) {
    display: grid; list-style: none; max-width: 34rem;
    margin: 0 0 1.75rem; padding: 0; border-left: 2px solid var(--line);
  }
  .rs-index button {
    display: flex; align-items: baseline; gap: .6rem; width: 100%;
    margin-left: -2px; padding: .42rem 0 .42rem 1rem;
    border: 0; border-left: 2px solid transparent; background: none;
    font: inherit; text-align: left; color: var(--muted); cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
  }
  .rs-index button b { font-size: .95rem; font-weight: 600; }
  .rs-index button span { font-size: .8rem; }
  .rs-index button:hover { color: var(--ink); }
  .rs-index button[aria-current="true"] { color: var(--ink); border-left-color: var(--primary); }
  .rs-index button[aria-current="true"] b { font-weight: 800; }
  .rs-index button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
}

/* =========================================================================
   Without the viewer: a column of cards, each with its sheet under it.
   ========================================================================= */
.rs:not(.is-story) .rs-stairs { min-height: 56cqw; }
@media print {
  .rs-nav, .rs-bars { display: none !important; }
}

/* =========================================================================
   Motion
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-face > * { animation: rsUp .5s cubic-bezier(.2, .8, .2, 1) backwards; }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-face > :nth-child(2) { animation-delay: .05s; }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-face > :nth-child(3) { animation-delay: .1s; }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-face > :nth-child(4) { animation-delay: .15s; }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-face > :nth-child(5) { animation-delay: .2s; }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-face > :nth-child(n+6) { animation-delay: .25s; }

  /* The crowd and the hundred fill in person by person; on a slow phone
     they are simply there. */
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-hundred i.is-lit {
    animation: rsPop .45s cubic-bezier(.2, 1.5, .4, 1) backwards;
    animation-delay: calc(.55s + var(--i) * 40ms);
  }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-crowd use {
    animation: rsFade .3s ease backwards;
    animation-delay: calc(.3s + var(--i) * 16ms);
  }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-meter-dot { animation: rsSlide .8s .45s cubic-bezier(.2, .8, .2, 1) backwards; }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-shape li:nth-child(2) .rs-meter-dot { animation-delay: .53s; }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-shape li:nth-child(3) .rs-meter-dot { animation-delay: .61s; }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-shape li:nth-child(4) .rs-meter-dot { animation-delay: .69s; }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-shape li:nth-child(5) .rs-meter-dot { animation-delay: .77s; }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-stairs i {
    animation: rsGrow .7s cubic-bezier(.2, .8, .2, 1) backwards;
    animation-delay: calc(.3s + var(--i) * 140ms);
  }
  html:not(.pk-lite) .rs.is-story .rs-ch.is-on .rs-badge { animation: rsBadge .6s .15s cubic-bezier(.2, 1.4, .4, 1) backwards; }
  .rs-jump-to.is-flip b { animation: rsFlip .32s cubic-bezier(.2, .8, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .rs.is-story .rs-ch, .rs.is-story .rs-face, .rs.is-story .rs-sheet { transition: none; }
}
@keyframes rsUp { from { opacity: 0; transform: translateY(2.6cqw); } }
@keyframes rsFade { from { opacity: 0; } }
@keyframes rsPop { from { opacity: .25; transform: scale(.3); } }
@keyframes rsSlide { from { transform: translateX(50%); } }
@keyframes rsGrow { from { transform: scaleY(.04); } }
@keyframes rsBadge { from { opacity: 0; transform: rotate(-40deg) scale(.3); } }
@keyframes rsFlip { from { opacity: 0; transform: translateY(18%); } }

/* =========================================================================
   "DATA YANG KAMU ISI"
   Sits under the story frame, closed by default. A reader reaches for this
   once — to check a figure looks wrong because the input was wrong — so it
   is a reference panel, not a chapter, and it never competes with the report.

   Class names checked against Bootstrap and app.css before use; see the
   collisions that cost time earlier in this file.
   ========================================================================= */
.usedata {
  width: min(100%, 400px);
  margin: 1rem auto 0;
  background: var(--rp-surface);
  border: 1px solid var(--rp-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.usedata > summary {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem .95rem; cursor: pointer; list-style: none;
}
.usedata > summary::-webkit-details-marker { display: none; }
.usedata > summary:hover { background: var(--rp-bg); }
.usedata-i {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rp-blue-soft); color: var(--rp-blue); font-size: .95rem;
}
.usedata-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.usedata-t b { font-size: .92rem; font-weight: 700; color: var(--rp-ink); }
.usedata-t i { font-style: normal; font-size: .76rem; color: var(--rp-mute); }
.usedata-c { flex: 0 0 auto; color: var(--rp-mute); font-size: .8rem; transition: transform .18s; }
.usedata[open] .usedata-c { transform: rotate(180deg); }
.usedata-body { padding: .2rem .95rem 1rem; }

.ud { padding: .85rem 0; border-top: 1px solid var(--rp-line); }
.ud-h {
  margin: 0 0 .35rem; font-size: .7rem; font-weight: 700;
  color: var(--rp-blue); letter-spacing: .01em;
}
.ud-p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--rp-mute); }
.ud-p b { color: var(--rp-ink); font-weight: 700; }

/* Subject averages: a wrapping row of name+number pairs. A table of seven
   rows would dominate the panel; these read as a glance. */
.ud-chips { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ud-chips li {
  display: flex; align-items: baseline; gap: .35rem;
  padding: .28rem .55rem; border-radius: 999px;
  background: var(--rp-bg); border: 1px solid var(--rp-line);
  font-size: .76rem; color: var(--rp-mute);
}
.ud-chips b { font-weight: 700; color: var(--rp-ink); font-variant-numeric: tabular-nums; }

/* The rapor exactly as it was typed.

   This panel used to show one average per subject, because that is the figure
   the analysis works from. But a student opening "Data yang kamu isi" is
   checking their own input against a report card, and an average cannot be
   checked against anything — thirty-five entered numbers were arriving as
   seven. The table is the input; the last column is the average, kept so the
   two can be reconciled without arithmetic.

   It scrolls sideways instead of shrinking to fit: a mistyped digit is the one
   thing this table exists to catch, so legibility wins over tidiness. */
.ud-scroll {
  margin: .6rem -.2rem 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* Sized so the seven columns fit the 380px panel without scrolling in the
   ordinary case — the scroller above is the fallback for long subject names
   and large text, not the normal experience. */
.ud-grid {
  width: 100%; min-width: 16rem;
  border-collapse: collapse;
  font-size: .74rem; line-height: 1.3;
}
.ud-grid th, .ud-grid td { padding: .32rem .16rem; text-align: center; }
.ud-grid thead th {
  font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  color: var(--rp-mute); text-transform: uppercase;
  border-bottom: 1px solid var(--rp-line);
}
.ud-grid tbody tr + tr td { border-top: 1px solid var(--rp-line); }
.ud-grid th:first-child, .ud-grid td:first-child {
  text-align: left; padding-left: .2rem; padding-right: .45rem;
  width: 38%;
}
.ud-grid td:first-child { color: var(--rp-ink); font-weight: 600; }
.ud-grid td { color: var(--rp-ink-2); font-variant-numeric: tabular-nums; }
.ud-grid td.is-empty { color: var(--rp-mute); opacity: .5; }
.ud-grid .ud-avg { width: 2.5rem; }
.ud-grid td.ud-avg { font-weight: 700; color: var(--rp-ink); background: var(--rp-bg); }
.ud-grid thead th.ud-avg { color: var(--rp-blue); }

.ud-p--after { margin-top: .55rem; }

/* Achievements carry a level and a relevance, and on a 380px panel those do
   not fit on the title's line. Two lines each, with the meta beneath. */
.ud-list--ach li { grid-template-columns: 1.15rem minmax(0, 1fr); }
.ud-list--ach em {
  display: block; margin-top: .1rem;
  white-space: normal; font-size: .7rem; color: var(--rp-mute);
}
.ud-list--ach .ud-desc { font-style: italic; opacity: .85; }

.ud-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.ud-list li {
  display: grid; grid-template-columns: 1.15rem minmax(0,1fr) auto;
  gap: .5rem; align-items: baseline;
  font-size: .82rem; color: var(--rp-ink);
}
.ud-list li > i.ph { color: var(--ok-ink); font-size: .85rem; }
.ud-list li.is-off { color: var(--rp-mute); }
.ud-list li.is-off > i.ph { color: var(--rp-mute); }
.ud-list em {
  font-style: normal; font-size: .72rem; color: var(--rp-mute);
  white-space: nowrap; flex: 0 0 auto;
}
.ud-n {
  display: grid; place-items: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--rp-blue); color: #fff;
  font-size: .68rem; font-weight: 800;
}
.ud-quote {
  margin: .5rem 0 0; padding: .55rem .7rem;
  border-left: 3px solid var(--rp-line); border-radius: 0 .5rem .5rem 0;
  background: var(--rp-bg);
  font-size: .82rem; line-height: 1.5; color: var(--rp-ink-2);
}
.ud-foot {
  margin: .9rem 0 0; padding-top: .75rem; border-top: 1px solid var(--rp-line);
  font-size: .76rem; line-height: 1.5; color: var(--rp-mute);
}
.ud-foot a { color: var(--rp-blue); font-weight: 600; }

/* ---- "Data prodi pilihanmu" --------------------------------------------
   The story shows these figures one at a time to build an argument. This
   shows all of them at once so the two picks can be read side by side, and
   so a number can be found again without tapping through the whole report. */
.usedata--prodi .ud { padding-top: 1rem; }
.pd-head {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; min-width: 0;
}
.pd-crest { width: 1.9rem; height: 1.9rem; object-fit: contain; flex: 0 0 auto; }
.pd-head > span:not(.pd-n) { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; flex: 1; }
.pd-head b {
  font-size: .88rem; font-weight: 700; color: var(--rp-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-head i {
  font-style: normal; font-size: .74rem; color: var(--rp-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-n {
  flex: 0 0 auto; font-size: .66rem; font-weight: 700; color: var(--rp-blue);
  background: var(--rp-blue-soft); padding: .18rem .5rem; border-radius: 999px;
}

/* Label/value rows. A table would be heavier than this earns. */
.pd-rows { list-style: none; margin: 0 0 .2rem; padding: 0; display: grid; gap: .3rem; }
.pd-rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  font-size: .8rem; color: var(--rp-mute);
  padding-bottom: .3rem; border-bottom: 1px dashed var(--rp-line);
}
.pd-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.pd-rows b {
  font-weight: 700; color: var(--rp-ink); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pd-rows b.is-up { color: var(--ok-ink); }
.pd-rows b.is-down { color: var(--rp-red-ink); }
.pd-rows b em {
  display: block; font-style: normal; font-size: .68rem; font-weight: 600;
  color: var(--rp-mute);
}

.pd-k {
  margin: .9rem 0 .35rem; font-size: .7rem; font-weight: 700; color: var(--rp-blue);
}
/* Five years as a compact row: the shape matters more than the exact figures,
   and the last year is the one the estimate leans on. */
/* One row, always. As a wrapping flex row each year claimed min-width:3rem
   plus padding and a border — about 349px for five — which is wider than the
   story frame on a phone, so the fifth year dropped to a line of its own and
   the run of years stopped reading as a run. One auto column per year divides
   whatever width there is, so three years or five both stay on one line. */
.pd-years {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: .3rem;
}
.pd-years li {
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  padding: .3rem .2rem; border-radius: .55rem;
  background: var(--rp-bg); border: 1px solid var(--rp-line);
  font-size: .66rem; color: var(--rp-mute); min-width: 0;
}
.pd-years b { font-size: .8rem; font-weight: 700; color: var(--rp-ink); font-variant-numeric: tabular-nums; }
.pd-years li.is-last { background: var(--rp-blue-soft); border-color: var(--rp-blue); }
.pd-years li.is-last b { color: var(--rp-blue); }
.pd-note { margin-top: .5rem !important; }
.pd-est {
  margin: .9rem 0 0; padding: .6rem .75rem; border-radius: var(--radius-sm);
  /* Ink ground, so its text is the page's surface, not white: in the dark
     theme ink is the light colour, and white on it could not be read. */
  background: var(--rp-ink); color: var(--rp-surface);
  font-size: .82rem; font-weight: 600;
}
.pd-est b { font-weight: 800; }
.pd-est em { font-style: normal; font-weight: 600; opacity: .75; }

/* The crest in the prodi panel is the story crest at a fixed size, since
   the panel is outside the container the story measures against. */
.pd-crest.rs-crest { width: 1.9rem; height: 1.9rem; padding: .15rem; }
.pd-crest.rs-crest--ltr { background: var(--surface-2); color: var(--ink); font-size: .8rem; }

/* Report-wide actions sit under the frame and line up with the panels. */
.report-acts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  width: min(100%, 400px);
  margin: 1.25rem auto 0;
}
.report-acts .act { flex: 1 1 auto; text-align: center; white-space: nowrap; }