/* EXAM PACKS — the page every exam gets (EXAM-PACKS-PLAN.md §13–14; the owner's design of 16–17 Oct 2026).
   Every class is xp-*: the prototype's first list ran sideways because a generic class name (.ck) collided with the
   site's own, so nothing here borrows a name styles.css might use. Colours are the site's own variables.
   WIDTH: the page takes the site's own width, as every other page does (owner, 17 Oct 2026: "why are the new pages so
   thin?" — they were a 640 px phone column on every screen). The phone layout is the same; wider screens get the two
   upload boxes side by side and paragraphs held to a reading measure (see the end of this file). */
.xp { margin: 0 auto; }
/* the hidden attribute always wins over a display set below (the next bar showed "Next" and "All done" at once) */
.xp [hidden], .xp-nextbar [hidden], .xp-nextbar[hidden] { display: none !important; }
body.has-xp-next { padding-bottom: 64px; }
/* the level picks which of two renderings shows: <span class="lv lv-g"> / <span class="lv lv-ug"> */
.xp[data-level="g"] .lv-ug, .xp[data-level="ug"] .lv-g { display: none !important; }
.xp-hero { text-align: left; padding: 6px 0 0; margin: 0; }
.xp-titlerow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.xp-hero h1 { margin: 0; font-size: 1.55rem; }
.xp .pill { display: inline-block; font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.xp .pill.open { background: #ecfdf3; color: #157347; }
.xp .pill.due { background: #fffbeb; color: #92400e; }
.xp .pill.wait { background: #f1f2f6; color: var(--muted); }
.xp .pill.done { background: var(--brand-soft); color: var(--brand-dark); }
.xp .pill.closed { background: #fef2f2; color: #991b1b; }
.xp-sub { color: var(--muted); font-size: .92rem; margin: 4px 0 0; text-align: left; }
.xp-deadlines { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; margin: 10px 0 0; }
.xp-follow { margin-top: 6px; }
.xp-linkbtn { background: none; border: none; padding: 0; color: var(--brand-dark); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; text-align: left; }
.xp-followbox { font-size: .85rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; background: #fff; }
.xp-followlinks { margin-top: 8px; }
.xp-followbox .muted { margin: 6px 0 0; }
.xp-jump { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.xp-jump a { font-weight: 600; }
.xp-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-top: 14px; }
.xp-card h2 { font-size: 1rem; margin: 0 0 4px; }
.xp-spec { margin: 0; font-size: .85rem; }
.xp-tool + .xp-tool { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.xp-drop { border: 1.5px dashed #c9cdf7; background: #fafaff; border-radius: 12px; padding: 16px; text-align: center; margin-top: 10px; cursor: pointer; }
.xp-drop strong { display: block; }
.xp-drop.drag { background: var(--brand-soft); }
.xp-signout { margin-top: 10px; text-align: center; }
.xp-signout canvas { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.xp-signmsg { font-size: .86rem; margin: 6px 0 8px; }
.xp-live { margin-top: 10px; font-size: .86rem; }
.xp-live summary { cursor: pointer; color: var(--muted); }
.xp-live ul { margin: 6px 0 0 18px; padding: 0; }
.xp-live li { margin: 3px 0; }
.xp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
@media (max-width: 520px) { .xp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xp-tile { background: var(--bg); border-radius: 10px; padding: 9px 10px; }
.xp-tile b { display: block; font-size: 1rem; }
.xp-tile span { font-size: .74rem; color: var(--muted); line-height: 1.3; display: block; margin-top: 1px; }
.xp-glancefoot { font-size: .82rem; color: var(--muted); margin: 10px 0 0; }
.xp-cta { display: block; width: 100%; margin-top: 14px; padding: 12px; border-radius: 12px; border: none; background: var(--brand); color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; }
.xp-plan { border: 2px solid var(--brand); background: var(--brand-soft); }
.xp-plan.set { border: 1px solid var(--line); background: #fff; }
.xp-first { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--brand); border-radius: 999px; padding: 2px 8px; margin-bottom: 6px; }
.xp-plan.set .xp-first { display: none; }
.xp-lab { font-weight: 700; font-size: .9rem; display: block; margin: 8px 0 6px; }
.xp-sels { display: flex; gap: 8px; }
.xp-sels select { flex: 1 1 0; min-width: 0; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: .88rem; margin: 0; }
.xp-togs { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-tog { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .85rem; cursor: pointer; color: var(--ink); }
.xp-tog[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
/* the journey */
.xp-journey { margin-top: 18px; }
.xp-stage { position: relative; padding: 0 0 18px 26px; }
.xp-stage::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.xp-stage:last-child::before { display: none; }
.xp-node { position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #c3c7d4; box-sizing: border-box; }
.xp-stage.live .xp-node { border-color: var(--brand); background: var(--brand-soft); }
.xp-stage.complete .xp-node { border-color: var(--ok); background: var(--ok); }
.xp-shead { display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; background: none; border: none; width: 100%; padding: 0; font: inherit; text-align: left; color: inherit; }
.xp-shead h2 { margin: 0; font-size: 1.02rem; }
.xp-shead-r { white-space: nowrap; }
.xp-sintro { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); margin: 8px 0 8px; }
.xp-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.xp-step { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin: 0 0 8px; padding: 0 10px; }
.xp-step.isopen { border-color: #c9cdf7; box-shadow: 0 1px 6px rgba(79, 70, 229, .08); }
.xp-step.done { background: #fafbfc; }
.xp-srow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
.xp-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c3c7d4; background: #fff; cursor: pointer; margin-top: 1px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .75rem; padding: 0; }
.xp-step.done .xp-tick { background: var(--ok); border-color: var(--ok); }
.xp-stitle { flex: 1; display: flex; gap: 8px; align-items: flex-start; background: none; border: none; padding: 0; font: inherit; text-align: left; color: var(--ink); cursor: pointer; font-size: .93rem; line-height: 1.4; }
.xp-txt { flex: 1; min-width: 0; }
.xp-no { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.xp-t { display: block; }
.xp-pv { display: block; font-size: .8rem; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.xp-when { display: block; margin-top: 4px; }
.xp-when .pill, .xp-acts .pill { white-space: normal; }
.xp-chev { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-size: 1.05rem; display: flex; align-items: center; justify-content: center; margin-top: 14px; }
.xp-step.isopen .xp-chev { background: var(--brand); color: #fff; }
.xp-step.done .xp-chev { background: #f1f2f6; color: var(--muted); }
.xp-step.isopen .xp-pv, .xp-step.isopen .xp-when, .xp-step.done .xp-pv, .xp-step.done .xp-when { display: none; }
.xp-step.isopen .xp-t { font-weight: 700; }
.xp-step.done .xp-stitle { color: var(--muted); }
.xp-step.done .xp-t { text-decoration: line-through; text-decoration-color: #c5c9d3; }
.xp-step.done .xp-no { color: var(--muted); }
.xp-sb { padding: 0 0 12px 32px; font-size: .88rem; }
.xp-sb p { margin: 0 0 8px; color: #3b4157; line-height: 1.5; }
.xp-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.xp-btn { white-space: nowrap; border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 6px 10px; font-size: .82rem; cursor: pointer; color: var(--ink); }
.xp-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.xp-btn[disabled] { opacity: .6; cursor: progress; }
.xp-remind { margin-top: 8px; font-size: .84rem; }
.xp-remind a { margin-right: 12px; }
.xp-files { margin-top: 6px; font-size: .82rem; color: #157347; }
.xp-files .err { color: var(--bad, #b91c1c); }
.xp-nudge { margin: 0 0 10px 32px; padding: 9px 11px; border-radius: 10px; background: #fffbeb; color: #78350f; font-size: .84rem; line-height: 1.45; }
.xp-nudge .xp-acts { margin-top: 8px; }
.xp-note2 { background: var(--bg); border-radius: 10px; padding: 10px 12px; font-size: .86rem; margin: 10px 0 0; line-height: 1.5; }
/* full details */
.xp-sec { font-size: 1.05rem; margin: 22px 0 0; }
.xp-more { margin-top: 8px; }
.xp-row { border-bottom: 1px solid var(--line); }
.xp-row summary { padding: 12px 0; cursor: pointer; font-weight: 600; font-size: .93rem; list-style: none; display: flex; justify-content: space-between; }
.xp-row summary::-webkit-details-marker { display: none; }
.xp-row summary::after { content: "▾"; color: var(--muted); }
.xp-row[open] summary::after { content: "▴"; }
.xp-in { padding: 0 0 12px; font-size: .88rem; line-height: 1.5; }
.xp-in p { margin: 0 0 8px; }
.xp-in ul { margin: 8px 0 0 18px; padding: 0; }
.xp-in li { margin: 5px 0; line-height: 1.45; }

table.xp-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.xp-table th, table.xp-table td { text-align: left; padding: 6px 5px; border-bottom: 1px solid #eef0f4; vertical-align: top; }
table.xp-table th { color: var(--muted); font-weight: 600; font-size: .76rem; }
.xp-cat { font-weight: 400; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.xp-faq { padding: 8px 0 0; }
.xp-src { font-size: .8rem; color: var(--muted); margin: 16px 0 24px; }
#dates, #tool, #glance, #plan, #details, #faq, .xp-stage, .xp-step, .xp-row { scroll-margin-top: 136px; }
/* the pinned next step */
.xp-nextbar { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(20, 23, 40, .06); z-index: 20; }
.xp-nextbar button, .xp-alldone { display: flex; gap: 8px; align-items: center; width: 100%; max-width: var(--maxw, 1080px); margin: 0 auto; padding: 12px 18px; background: none; border: none; font: inherit; font-size: .9rem; text-align: left; cursor: pointer; color: var(--ink); box-sizing: border-box; }
.xp-arrow { color: var(--brand); font-weight: 700; }
@media print {
  .xp-nextbar, .xp-cta, .xp-plan, #tool, .xp-jump, .xp-follow, .xp-followbox, .xp-tick, .xp-acts, .xp-chev, .xp-nudge, .xp-remind, .xp-sintro .xp-btn { display: none !important; }
  .xp-stb, .xp-sb { display: block !important; }
  .xp-step[hidden] { display: none !important; }
  .xp-step { break-inside: avoid; }
  .xp-pv, .xp-when { display: none !important; }
}
/* a converted file: shown with its size, previewed on request, downloaded only when tapped (owner, 17 Oct 2026) */
.xp-result { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; color: var(--ink); }
.xp-rfile { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0 0 8px; font: inherit; font-size: .86rem; color: var(--ink); cursor: pointer; word-break: break-word; }
.xp-preview { margin-top: 10px; max-height: 70vh; overflow-y: auto; background: var(--bg); border-radius: 10px; padding: 8px; }
.xp-page { margin: 0 0 10px; }
.xp-page img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
.xp-page figcaption { font-size: .74rem; color: var(--muted); text-align: center; margin-top: 3px; }
/* wider screens: the same page, laid out for the width */
@media (min-width: 760px) {
  /* the upload card: each tool in its own column; with one tool, the live-photo note takes the second */
  #tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  #tool > h2 { grid-column: 1 / -1; }
  #tool:has(.xp-tool + .xp-tool) > .xp-live { grid-column: 1 / -1; }
  #tool:not(:has(.xp-tool + .xp-tool)) > .xp-live { margin-top: 10px; }
  #tool .xp-tool + .xp-tool { margin-top: 0; padding: 0 0 0 24px; border-top: none; border-left: 1px solid var(--line); }
  .xp-hero .xp-titlerow { justify-content: flex-start; gap: 14px; }
  .xp-cta { max-width: 420px; }
  .xp-sels { max-width: 640px; }
}
@media (min-width: 900px) {
  /* a line of prose stays readable however wide the page is; tables and the step rows use the full width */
  .xp-sb > p, .xp-in > p, .xp-in > ul, .xp-faq p, .xp-note2, .xp-sub, .xp-glancefoot, .xp-followbox { max-width: 78ch; }
  .xp-pv { max-width: 90ch; }
}