/* ==========================================================================
   V0.87 — closing the three gaps that were real.

   A previous handover listed "bookmarks", "redo mistakes", "3-step onboarding"
   and "Progress trends" as outstanding. Measuring first showed three of the four
   were already shipped: bookmarks have a button, a filter, a Saved tab, a quota
   and cloud sync; redo-mistakes has four strategies and a Retry queue; the
   onboarding wizard has been three steps since v073. What was actually missing
   is here, and nothing else has been rebuilt.

     1. Paper Archive was unreachable. v085 hid its nav button to get the rail
        down to six, and never put an entry back — the page still exists and
        still renders, but no route led to it. That is a dead page, not a
        deliberate cut, so this puts it on the Review header beside My Work.
     2. Pricing was a modal only. It is a page worth having: what each plan
        includes, side by side, before anybody is asked to pay.
     3. Progress had seven days of volume and no history of accuracy. A
        student cannot tell from "how much I did" whether they are improving.

   Loaded last, so it outranks v027..v086 without editing any of them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The two destinations the six-item rail no longer carries.
   -------------------------------------------------------------------------- */
body.ial-v030 .v087-auxNav {
  display: flex !important; gap: 8px; flex-wrap: wrap; margin-left: auto;
}
body.ial-v030 .v027ReviewTabs + .v087-auxSpacer { display: block; }
.v087-auxNav .btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
}
@media (max-width: 680px) {
  body.ial-v030 .v087-auxNav { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   2. Pricing as a page. The three tiers carry the same numbers the modal
      quotes, so a student comparing plans reads the same offer either way.
   -------------------------------------------------------------------------- */
.v087-pricing { max-width: 980px; }
.v087-planGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
@media (max-width: 760px) { .v087-planGrid { grid-template-columns: 1fr; } }

.v087-plan {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px;
  padding: 20px 18px 18px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.v087-plan.is-featured { border-color: #4F46E5; box-shadow: 0 10px 30px rgba(79, 70, 229, .18); }
.v087-plan .v087-planBadge {
  position: absolute; top: -10px; right: 16px;
  background: linear-gradient(135deg, #4F46E5, #6D28D9); color: #fff;
  font-size: 10.5px; font-weight: 900; padding: 4px 10px; border-radius: 999px;
}
.v087-plan h3 { margin: 0 0 2px; font-size: 15px; font-weight: 800; color: #0F172A; }
.v087-plan .v087-planFor { font-size: 11.5px; color: #64748B; font-weight: 700; }
.v087-plan .v087-planPrice {
  margin: 12px 0 2px; font-size: 30px; font-weight: 900; color: #1E1B4B;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.v087-plan .v087-planPrice small { font-size: 13px; font-weight: 700; color: #64748B; }
.v087-plan .v087-planSave { font-size: 11.5px; font-weight: 800; color: #047857; min-height: 17px; }
.v087-plan ul { margin: 14px 0 16px; padding: 0; list-style: none; font-size: 12.5px; color: #334155; }
.v087-plan li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; line-height: 1.5; }
.v087-plan li::before { content: '\2713'; color: #16A34A; font-weight: 900; flex: none; }
.v087-plan li.is-off { color: #94A3B8; }
.v087-plan li.is-off::before { content: '\2013'; color: #CBD5E1; }
.v087-plan .btn.v087-planCta { margin-top: auto; width: 100%; text-align: center; }
.btn.v087-planCta {
  border-radius: 10px !important; padding: 11px 12px !important;
  font-weight: 800 !important; font-size: 13.5px !important; cursor: pointer;
  background: #fff; color: #3730A3; border: 1.5px solid #C7D2FE;
}
.v087-plan.is-featured .btn.v087-planCta {
  background: linear-gradient(135deg, #4F46E5, #6D28D9); color: #fff; border: 0;
}
.btn.v087-planCta:hover { filter: brightness(1.06); }

/* The comparison is the reason the page exists: the modal can list prices but
   has no room to say what the free tier already does. */
.v087-compareWrap { overflow-x: auto; margin-top: 6px; }
table.v087-compare { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 520px; }
.v087-compare th, .v087-compare td { padding: 10px 12px; text-align: center; border-bottom: 1px solid #E2E8F0; }
.v087-compare thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: #64748B; font-weight: 800; }
.v087-compare th:first-child, .v087-compare td:first-child { text-align: left; font-weight: 700; }
.v087-compare .v087-yes { color: #16A34A; font-weight: 900; }
.v087-compare .v087-no { color: #CBD5E1; font-weight: 900; }
.v087-compare tbody tr:nth-child(even) { background: #F8FAFC; }
.v087-faqLine { margin-top: 18px; font-size: 12.5px; color: #475569; line-height: 1.7; }
.v087-faqLine b { color: #0F172A; }

/* --------------------------------------------------------------------------
   3. Thirty days of accuracy. Volume bars answered "did I work"; this answers
      "am I improving", which is the question a student actually has.
   -------------------------------------------------------------------------- */
.v087-trend { margin-top: 14px; }
.v087-trendHead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.v087-trendHead h3 { margin: 0; font-size: 14.5px; }
.v087-trendDelta { font-size: 12px; font-weight: 800; }
.v087-trendDelta.is-up { color: #047857; }
.v087-trendDelta.is-down { color: #B91C1C; }
.v087-trendDelta.is-flat { color: #64748B; }
.v087-trend svg { display: block; width: 100%; height: auto; overflow: visible; }
.v087-trendEmpty {
  border: 1px dashed #CBD5E1; border-radius: 12px; padding: 20px;
  text-align: center; font-size: 12.5px; color: #64748B; background: #F8FAFC;
}
.v087-trendNote { font-size: 11.5px; color: #64748B; margin-top: 8px; line-height: 1.6; }