/* =========================================================
   RevisorPlus — Practice / Mocks / My target
   Runtime styling for the pages portals.js enhances.
   ========================================================= */

:root {
  /* The names the rules below were written against, pointed at the app's own
     palette rather than restating it. The greys are the set the dashboard and
     the question bank both use; the accent is base.html's --brand.

     There was a --rp-purple trio here as well, and the mocks pages were the
     only thing that read it — solid indigo buttons, purple pills, purple
     headings, none of it in the palette the rest of the app shares. Mocks are
     not a different product, so there is no second accent. */
  --rp-ink: #16233a;
  --rp-ink-2: #5a6478;
  --rp-ink-3: #98a1b3;
  --rp-line: #e8eaef;
  --rp-accent: var(--brand);
  --rp-accent-deep: var(--brand-dark);
  --rp-accent-soft: #eef3ff;
  --rp-surface: var(--surface);

  /* Kept as aliases: several rules below still read the old names. */
  --rp-muted: var(--rp-ink-2);
  --rp-border: var(--rp-line);
  --rp-blue: var(--rp-accent);
  --rp-blue-dark: var(--rp-accent-deep);
  --rp-blue-soft: var(--rp-accent-soft);
}

/* ---------- Dynamic top-left sub-brand ---------- */

.rp-brand-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-left: .55rem;
  padding: .26rem .52rem;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 820;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
}

/* One treatment, both modes. The label says which part of the app you are in;
   it is not a second brand, so it does not get a second colour. */
.rp-mode-page .rp-brand-mode {
  color: var(--rp-accent-deep);
  background: var(--rp-accent-soft);
  border: 1px solid rgba(37,99,235,.14);
}

/* Prevent the mode label from affecting the core RevisorPlus wordmark. */
.rp-brand-mode::before {
  content: none !important;
}

/* ---------- Shared mode page ---------- */

.rp-mode-page {
  background:
    radial-gradient(circle at 8% 3%, rgba(37,99,235,.05), transparent 22%),
    linear-gradient(180deg, #fbfdff 0%, #f7f9fd 100%) !important;
}

/* The hero this file used to build for the mocks page lived here — a bordered,
   shadowed, gradient-washed panel around a kicker, an h1 and a line of copy,
   with the page's real heading hidden underneath it. No other page had one.
   Mocks uses base.html's .rp-page-head from its own template now, like the
   other three. */

/* The Practice block that stood here styled the old question bank by tagging
   whatever looked like a topic card or a "Practise"/"Timed" button. Nothing can
   apply those classes any more: practice/choose.html ships its own design and
   declares no data-rp-mode, so portals.js does not touch it. */

/* ---------- Mocks ---------- */

/* Everything here reads the shared tokens. Mocks used to be styled as if they
   were a separate product — solid indigo buttons, purple pills, purple section
   headings — and none of it appeared on the dashboard, the question bank or the
   landing page. A pupil moving between them had no way to read the colour as
   meaning anything, because it did not. */

/* The targeted paper is the page's one recommendation, so it is the only thing
   that carries the accent, and only on its edge.

   The hover states are restated because both cards set a box-shadow at the same
   specificity as base.html's `.card:hover` and `.card-hover:hover`, and
   portals.css loads after it — without these the cards would lift on hover with
   the resting shadow still under them. */
.rp-mode-mocks .rp-targeted-paper {
  border-color: rgba(37,99,235,.28);
  border-radius: var(--r-lg);
  background: var(--rp-surface);
  box-shadow: var(--sh-2);
}

.rp-mode-mocks .rp-targeted-paper:hover {
  box-shadow: var(--sh-3);
}


/* "This mock focuses on". A plain white panel behind a row of pills — the tint
   and the coloured border it used to have made it the loudest thing on the
   page, above the recommendation it belongs to. */
.rp-target-summary {
  margin: .9rem 0;
  padding: .9rem 1rem;
  border: 1px solid var(--rp-line);
  border-radius: var(--r);
  background: var(--rp-surface);
}

.rp-target-summary__label {
  margin-bottom: .48rem;
  color: var(--rp-ink-2);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rp-target-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

/* The question bank's .qbank__gcount, to the value: these say the same kind of
   thing — how much of something there is — and a pupil sees both within a
   click of each other. */
.rp-target-summary__chip {
  padding: .19rem .625rem;
  border-radius: 99px;
  background: #f2f3f6;
  color: var(--rp-ink-2);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.rp-target-breakdown-toggle {
  margin: .15rem 0 .8rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rp-accent-deep);
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
  cursor: pointer;
}

.rp-target-breakdown-toggle:hover {
  text-decoration: underline;
}

.rp-mode-mocks .rp-paper-card {
  border-color: var(--rp-line);
  border-radius: var(--r);
  background: var(--rp-surface);
  box-shadow: var(--sh-1);
  transition: border-color .16s var(--ease), box-shadow .2s var(--ease);
}

.rp-mode-mocks .rp-paper-card:hover {
  border-color: rgba(37,99,235,.24);
  box-shadow: var(--sh-3);
}

.rp-mock-breakdown-hidden {
  display: none !important;
}

/* ---------- Mocks: the page's own controls ---------- */

/* The question bank's .qbank__btn, to the value — same padding, same 9px
   radius, same 1.5px edge, accent fill on the primary. The mocks page reached
   Bootstrap's .btn-brand before this, which is a gradient with a coloured glow
   under it and appears nowhere else in the app. */
.rp-mocks__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .94rem;
  border: 1.5px solid transparent;
  border-radius: 9px;
  background: var(--rp-accent);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .14s ease, border-color .14s ease, color .14s ease;
}

.rp-mocks__btn:hover,
.rp-mocks__btn:focus {
  color: #fff;
  filter: brightness(.95);
}

.rp-mocks__btn--block { width: 100%; }

.rp-mocks__btn--ghost {
  border-color: var(--rp-line);
  background: var(--rp-surface);
  color: var(--rp-ink);
}

.rp-mocks__btn--ghost:hover,
.rp-mocks__btn--ghost:focus {
  border-color: var(--rp-ink-3);
  background: var(--rp-surface);
  color: var(--rp-ink);
  filter: none;
}

.rp-mocks__btn:disabled,
.rp-mocks__btn[disabled] {
  cursor: default;
  color: var(--rp-ink-3);
  filter: none;
}

/* Same pill as .rp-target-summary__chip above, and as the question bank's
   count pills: a minute count and a question count are the same kind of fact. */
.rp-mocks__pill {
  display: inline-block;
  padding: .19rem .625rem;
  border-radius: 99px;
  background: #f2f3f6;
  color: var(--rp-ink-2);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.rp-mocks__pill--accent {
  background: var(--rp-accent-soft);
  color: var(--rp-accent-deep);
}

/* The one place a subject colour belongs on this page: the code that says
   which paper a card is. --subj-*-deep, not the palette value — this is white
   text on the fill, and base.html's :root says which of the three to reach for.
   The fallback covers a fifth paper the palette does not name. */
.rp-mocks__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: .22rem .5rem;
  border-radius: 8px;
  background: var(--rp-code, var(--rp-ink-2));
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.rp-mocks__code--eng { --rp-code: var(--subj-en-deep); }
.rp-mocks__code--mat { --rp-code: var(--subj-ma-deep); }
.rp-mocks__code--vr  { --rp-code: var(--subj-vr-deep); }
.rp-mocks__code--nvr { --rp-code: var(--subj-nvr-deep); }

.rp-mocks__note {
  margin-top: 1.5rem;
  padding: .9rem 1rem;
  border: 1px solid var(--rp-line);
  border-radius: var(--r);
  background: var(--rp-surface);
  color: var(--rp-ink-2);
  font-size: .85rem;
  line-height: 1.55;
}

.rp-mocks__note strong { color: var(--rp-ink); }

/* =========================================================
   MY TARGET — CLEAN SCHOOL HUB
   ========================================================= */

.rp-target-page {
  background:
    radial-gradient(circle at 92% 4%, rgba(79,110,247,.055), transparent 23%),
    linear-gradient(180deg,#fbfdff 0%,#f7f9fd 100%) !important;
}

/* Measured by <main>, which carries the app's one measure. The top padding is
   gone with
   this page's own header: the .rp-page-head portals.js now builds carries
   --page-top, so this heading sits on the same line as the other three. */
.rp-target-hub {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 3.5rem;
}

.rp-target-hub__btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .62rem .9rem;
  border: 1px solid var(--rp-border);
  border-radius: .82rem;
  background: #fff;
  color: #4f5c73;
  font-size: .85rem;
  font-weight: 760;
  text-decoration: none !important;
}

.rp-target-hub__btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg,var(--rp-blue),#5c7cf6);
  color: #fff;
  box-shadow: 0 8px 18px rgba(79,110,247,.17);
}

.rp-target-hub__hero {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(340px,.95fr);
  gap: 1rem;
}

.rp-target-school,
.rp-target-map,
.rp-target-panel {
  border: 1px solid var(--rp-border);
  border-radius: 1.3rem;
  background: #fff;
  box-shadow: 0 14px 38px rgba(23,32,51,.045);
}

.rp-target-school {
  position: relative;
  overflow: hidden;
  padding: 1.35rem;
  background:
    radial-gradient(circle at 98% 3%, rgba(79,110,247,.09), transparent 31%),
    linear-gradient(135deg,#fff 0%,#f8faff 100%);
}

.rp-target-school::after {
  content: "";
  position: absolute;
  width: 185px;
  height: 185px;
  right: -70px;
  top: -78px;
  border-radius: 50%;
  background: rgba(79,110,247,.05);
  pointer-events: none;
}

.rp-target-school__eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .4rem;
  color: var(--rp-blue-dark);
  font-size: .74rem;
  font-weight: 820;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.rp-target-school__eyebrow::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--rp-blue);
}

.rp-target-school h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--rp-ink);
  font-size: clamp(1.65rem,3vw,2.2rem);
  font-weight: 850;
  letter-spacing: -.04em;
}

.rp-target-school__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: .45rem;
  color: var(--rp-muted);
  font-size: .88rem;
}

.rp-target-school__progress {
  position: relative;
  z-index: 1;
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(79,110,247,.12);
  border-radius: 1rem;
  background: rgba(255,255,255,.86);
}

.rp-target-school__progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .58rem;
}

.rp-target-school__progress-head span {
  color: var(--rp-muted);
  font-size: .82rem;
}

.rp-target-school__progress-head strong {
  color: var(--rp-ink);
  font-size: .92rem;
}

.rp-target-bar {
  width: 100%;
  height: .58rem;
  overflow: hidden;
  border-radius: 999px;
  background: #ebf0f7;
}

.rp-target-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--rp-blue),#7088ff);
}

.rp-target-school__encourage {
  position: relative;
  z-index: 1;
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  margin-top: .9rem;
  padding: .82rem .9rem;
  border-radius: .92rem;
  background: #f7f9fd;
  color: #56647b;
  font-size: .85rem;
  line-height: 1.45;
}

.rp-target-school__encourage::before {
  content: "✓";
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border-radius: .55rem;
  background: var(--rp-blue-soft);
  color: var(--rp-blue-dark);
  font-weight: 850;
}

.rp-target-map {
  min-height: 330px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rp-target-map__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--rp-border);
}

.rp-target-map__head strong {
  color: var(--rp-ink);
  font-size: .9rem;
}

.rp-target-map__head a {
  color: var(--rp-blue-dark);
  font-size: .78rem;
  font-weight: 720;
  text-decoration: none;
}

.rp-target-map iframe {
  width: 100%;
  min-height: 280px;
  flex: 1 1 auto;
  border: 0;
  background: #f2f5fa;
}

.rp-target-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .85rem;
  margin-top: .85rem;
}

.rp-target-stat {
  padding: .9rem .95rem;
  border: 1px solid var(--rp-border);
  border-radius: 1rem;
  background: #fff;
}

.rp-target-stat span {
  display: block;
  color: var(--rp-muted);
  font-size: .74rem;
}

.rp-target-stat strong {
  display: block;
  margin-top: .25rem;
  color: var(--rp-ink);
  font-size: 1.2rem;
  font-weight: 830;
}

.rp-target-main {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
  gap: 1rem;
  margin-top: 1rem;
}

.rp-target-panel {
  padding: 1.2rem;
}

.rp-target-panel__kicker {
  display: block;
  margin-bottom: .28rem;
  color: var(--rp-blue-dark);
  font-size: .72rem;
  font-weight: 820;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.rp-target-panel h3 {
  margin: 0;
  color: var(--rp-ink);
  font-size: 1.08rem;
  font-weight: 820;
  letter-spacing: -.02em;
}

.rp-target-panel__copy {
  margin: .3rem 0 0;
  color: var(--rp-muted);
  font-size: .84rem;
  line-height: 1.5;
}

.rp-target-subjects {
  display: grid;
  gap: .78rem;
  margin-top: 1rem;
}

.rp-target-subject {
  padding: .9rem;
  border: 1px solid var(--rp-border);
  border-radius: .95rem;
  background: #fff;
}

.rp-target-subject__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .55rem;
}

.rp-target-subject__head strong {
  color: var(--rp-ink);
  font-size: .88rem;
}

.rp-target-subject__head span {
  color: var(--rp-muted);
  font-size: .78rem;
}

.rp-target-subject__note {
  margin-top: .5rem;
  color: var(--rp-muted);
  font-size: .76rem;
}

.rp-target-details {
  display: grid;
  gap: .7rem;
  margin-top: 1rem;
}

.rp-target-detail {
  display: grid;
  grid-template-columns: 105px minmax(0,1fr);
  gap: .7rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid #edf1f6;
}

.rp-target-detail:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.rp-target-detail span {
  color: var(--rp-muted);
  font-size: .78rem;
}

.rp-target-detail strong {
  color: var(--rp-ink);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
}

.rp-target-more {
  margin-top: 1rem;
}

.rp-target-more details {
  border: 1px solid var(--rp-border);
  border-radius: .95rem;
  background: #fff;
}

.rp-target-more summary {
  padding: .85rem .95rem;
  color: #536077;
  font-size: .82rem;
  font-weight: 740;
  cursor: pointer;
}

.rp-target-more__content {
  padding: 0 .95rem .95rem;
  color: var(--rp-muted);
  font-size: .8rem;
  line-height: 1.55;
}

.rp-target-verified {
  margin-top: .8rem;
  color: #8792a5;
  font-size: .74rem;
  line-height: 1.45;
}

.rp-target-original {
  display: none !important;
}

@media (max-width: 900px) {
  .rp-target-hub__hero,
  .rp-target-main {
    grid-template-columns: 1fr;
  }

  .rp-target-map {
    min-height: 300px;
  }
}

@media (max-width: 680px) {
  .rp-page-head__aside {
    width: 100%;
  }

  .rp-target-hub__btn {
    flex: 1 1 0;
  }

  .rp-target-stats {
    grid-template-columns: 1fr;
  }

  .rp-target-detail {
    grid-template-columns: 1fr;
    gap: .2rem;
  }
}