/*
 * Sukud design system - GCE papers and SKD Points
 * Paper cards, unlocking answers, point packages, mobile money status,
 * the wallet and its history.
 */

/* ======================================================================
 * Past paper card
 * ====================================================================== */
.sk-paper {
  --subject-rgb: var(--sk-brand-rgb);
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--sk-border-subtle);
  border-radius: 20px;
  background: var(--sk-surface);
  box-shadow: var(--sk-shadow-sm);
  transition: transform var(--sk-dur-base) var(--sk-ease-spring), box-shadow var(--sk-dur-base), border-color var(--sk-dur-fast);
}
[data-theme="dark"] .sk-paper { border-color: var(--sk-border); }
.sk-paper:hover { transform: translateY(-3px); box-shadow: var(--sk-shadow-md); border-color: rgb(var(--subject-rgb) / 0.4); }
.sk-paper__link { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.sk-paper__link:focus-visible { outline: none; box-shadow: var(--sk-focus-ring); }
.sk-paper__sheet {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: 15px;
  background:
    radial-gradient(110% 80% at 85% 0%, rgb(var(--subject-rgb) / 0.32), transparent 60%),
    linear-gradient(160deg, rgb(var(--subject-rgb) / 0.18), rgb(var(--subject-rgb) / 0.06));
  overflow: hidden;
}
.sk-paper__sheet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sk-paper__lines {
  display: flex; flex-direction: column; gap: 6px;
  width: 42%; aspect-ratio: 3 / 4;
  margin-top: 22%;
  padding: 14px 12px;
  border-radius: 6px 6px 0 0;
  background: #fff;
  box-shadow: 0 10px 24px -8px rgb(var(--subject-rgb) / 0.55), 0 1px 2px rgb(0 0 0 / 0.08);
  transform: rotate(-4deg);
  transition: transform var(--sk-dur-slow) var(--sk-ease-spring);
}
.sk-paper:hover .sk-paper__lines { transform: rotate(0deg) translateY(-6px); }
.sk-paper__lines i { display: block; height: 4px; border-radius: 2px; background: #e4e5ee; }
.sk-paper__lines i:first-child { width: 55%; height: 6px; background: rgb(var(--subject-rgb) / 0.55); }
.sk-paper__lines i:nth-child(3) { width: 80%; }
.sk-paper__lines i:nth-child(5) { width: 64%; }
.sk-paper__year {
  position: absolute; top: 10px; right: 10px;
  padding: 3px 10px;
  border-radius: var(--sk-radius-full);
  background: var(--sk-surface);
  color: var(--sk-fg);
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-sm); font-weight: var(--sk-weight-bold);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sk-shadow-xs);
}
.sk-paper__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 6px; min-width: 0; }
.sk-paper__title { font-family: var(--sk-font-display); font-size: var(--sk-text-md); font-weight: var(--sk-weight-bold); letter-spacing: -0.01em; line-height: 1.3; margin-top: 4px; }
.sk-paper__meta { font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); }
.sk-paper__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.sk-paper__answers { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sk-text-xs); font-weight: var(--sk-weight-semibold); color: var(--sk-fg-muted); }
.sk-paper__answers .sk-points { margin-inline-start: 2px; }
.sk-paper__answers.is-open { color: var(--sk-green-11); }
.sk-paper__answers.is-none { color: var(--sk-fg-subtle); font-weight: var(--sk-weight-medium); }
.sk-paper__save { position: relative; z-index: 1; }
.sk-paper__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.sk-paper__actions form { display: contents; }
.sk-paper__actions .sk-btn { flex: 1 1 auto; }
.sk-paper__added { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; font-size: var(--sk-text-xs); font-weight: var(--sk-weight-semibold); color: var(--sk-green-11); }
.sk-papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 42vw), 1fr)); gap: 14px; }
@media (max-width: 479px) { .sk-papers { gap: 10px; } .sk-paper__foot .sk-paper__answers { font-size: var(--sk-text-2xs); } .sk-paper__answers-word { display: none; } }

/* ======================================================================
 * Unlock answers
 * ====================================================================== */
.sk-unlock {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 420px;
  padding: 18px;
  border: 1px solid var(--sk-amber-6);
  border-radius: 22px;
  background: linear-gradient(170deg, var(--sk-amber-2), var(--sk-surface) 55%);
  box-shadow: var(--sk-shadow-md);
}
.sk-unlock__head { display: flex; align-items: center; gap: 12px; }
.sk-unlock__head > .sk-icon { animation: sk-float 3.6s var(--sk-ease-in-out) infinite; filter: drop-shadow(0 4px 6px rgb(var(--sk-amber-rgb) / 0.4)); }
.sk-unlock__title { font-weight: var(--sk-weight-semibold); line-height: 1.3; }
.sk-unlock__price { font-size: var(--sk-text-sm); color: var(--sk-fg-muted); }
.sk-unlock__price b { font-family: var(--sk-font-display); font-size: var(--sk-text-xl); color: var(--sk-amber-11); font-variant-numeric: tabular-nums; margin-right: 2px; }
.sk-unlock__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--sk-text-sm); }
.sk-unlock__list li { display: flex; align-items: center; gap: 8px; }
.sk-unlock__list .sk-icon { flex-shrink: 0; padding: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--sk-green-3); color: var(--sk-green-11); stroke-width: 3; }
.sk-unlock__sums { padding: 4px 14px; border-radius: 14px; background: var(--sk-surface); border: 1px solid var(--sk-border-subtle); }
.sk-unlock .sk-unlock__need { color: var(--sk-red-11); font-weight: var(--sk-weight-bold); }
.sk-unlock.is-short { border-color: var(--sk-border); background: var(--sk-surface); }

/* ======================================================================
 * Point packages
 * ====================================================================== */
.sk-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; padding-top: 10px; }
.sk-package {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 10px 14px;
  border: 1.5px solid var(--sk-border);
  border-radius: 20px;
  background: var(--sk-surface);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--sk-dur-fast), background-color var(--sk-dur-fast), transform var(--sk-dur-base) var(--sk-ease-spring), box-shadow var(--sk-dur-base);
}
.sk-package:hover { border-color: var(--sk-amber-7); transform: translateY(-2px); }
.sk-package:active { transform: scale(0.97); }
.sk-package > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sk-package > .sk-icon { margin-bottom: 4px; transition: transform var(--sk-dur-slow) var(--sk-ease-spring); }
.sk-package__points { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--sk-font-display); font-size: var(--sk-text-2xl); font-weight: var(--sk-weight-black); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sk-package__points small { font-size: var(--sk-text-xs); font-weight: var(--sk-weight-bold); color: var(--sk-fg-subtle); letter-spacing: 0; }
.sk-package__bonus { padding: 1px 8px; border-radius: var(--sk-radius-full); background: var(--sk-green-3); color: var(--sk-green-11); font-size: var(--sk-text-2xs); font-weight: var(--sk-weight-bold); }
.sk-package__price { margin-top: 6px; font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); color: var(--sk-fg-muted); font-variant-numeric: tabular-nums; }
.sk-package__flag {
  position: absolute; top: 0; left: 50%;
  padding: 3px 10px;
  border-radius: var(--sk-radius-full);
  background: var(--sk-amber-9); color: #2b1a00;
  font-size: 10px; font-weight: var(--sk-weight-bold); letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.sk-package:has(input:checked) { border-color: var(--sk-amber-9); background: var(--sk-amber-2); box-shadow: 0 0 0 3px rgb(var(--sk-amber-rgb) / 0.2), var(--sk-shadow-sm); }
.sk-package:has(input:checked) > .sk-icon { transform: rotate(-12deg) scale(1.12); }
.sk-package:has(input:checked) .sk-package__price { color: var(--sk-amber-11); }
.sk-package:has(input:focus-visible) { box-shadow: var(--sk-focus-ring); }

/* ======================================================================
 * Mobile money status
 * ====================================================================== */
.sk-payment {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; max-width: 420px;
  padding: 26px 20px 20px;
  border: 1px solid var(--sk-border-subtle);
  border-radius: 24px;
  background: radial-gradient(120% 60% at 50% 0%, var(--t-subtle), var(--sk-surface) 70%);
  text-align: center;
  box-shadow: var(--sk-shadow-md);
}
[data-theme="dark"] .sk-payment { border-color: var(--sk-border); }
.sk-payment__icon { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 6px; border-radius: 50%; background: var(--t-soft); color: var(--t-text); }
.sk-payment__icon::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgb(var(--t-rgb) / 0.22); }
.sk-payment.is-pending .sk-payment__icon::after { animation: sk-pulse-ring 1.8s var(--sk-ease-out) infinite; }
.sk-payment.is-success .sk-payment__icon { background: var(--t-solid); color: var(--t-on); animation: sk-pop var(--sk-dur-slower) var(--sk-ease-spring); }
.sk-payment__title { font-family: var(--sk-font-display); font-size: var(--sk-text-xl); font-weight: var(--sk-weight-bold); letter-spacing: -0.02em; }
.sk-payment__text { font-size: var(--sk-text-sm); color: var(--sk-fg-muted); max-width: 34ch; text-wrap: pretty; }
.sk-payment__wait { width: 70%; margin: 6px 0 2px; }
.sk-payment__dl { width: 100%; margin-top: 8px; padding: 2px 14px; border-radius: 14px; background: var(--sk-surface-sunken); text-align: start; }
.sk-payment__actions { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.sk-payment__actions > * { flex: 1 1 0; }

/* ======================================================================
 * Wallet and history
 * ====================================================================== */
.sk-wallet {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px 20px;
  border-radius: 24px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(var(--sk-amber-rgb) / 0.45), transparent 55%),
    linear-gradient(145deg, #2a2580, #14123d);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 16px 32px -16px rgb(20 18 61 / 0.7);
}
.sk-wallet::before, .sk-wallet::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.08); }
.sk-wallet::before { width: 260px; height: 260px; right: -90px; bottom: -150px; }
.sk-wallet::after { width: 180px; height: 180px; right: -50px; bottom: -110px; }
.sk-wallet__top { display: flex; align-items: center; justify-content: space-between; }
.sk-wallet__top .sk-eyebrow { color: rgb(255 255 255 / 0.7); }
.sk-wallet__top .sk-icon { animation: sk-float 4s var(--sk-ease-in-out) infinite; }
.sk-wallet__balance { display: flex; align-items: baseline; gap: 6px; font-family: var(--sk-font-display); font-size: clamp(2.2rem, 1.8rem + 2vw, 3rem); font-weight: var(--sk-weight-black); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.sk-wallet__balance small { font-size: var(--sk-text-md); font-weight: var(--sk-weight-bold); letter-spacing: 0; color: var(--sk-amber-8); }
.sk-wallet__stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-size: var(--sk-text-xs); color: rgb(255 255 255 / 0.72); }
.sk-wallet__stats > span { display: inline-flex; align-items: center; gap: 5px; }
.sk-wallet__stats b { color: #fff; font-variant-numeric: tabular-nums; }
.sk-wallet__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sk-wallet__actions > * { flex: 1 1 auto; }

.sk-txn { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 4px; }
.sk-txn + .sk-txn { border-top: 1px solid var(--sk-border-subtle); }
.sk-txn__icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--t-soft); color: var(--t-text); }
.sk-txn__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sk-txn__title { font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-txn__meta { font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); }
.sk-txn__amount { flex-shrink: 0; font-family: var(--sk-font-display); font-weight: var(--sk-weight-bold); font-variant-numeric: tabular-nums; color: var(--sk-fg); }
.sk-txn__amount.is-earned { color: var(--sk-green-11); }

/* ======================================================================
 * GCE subject picker (ui.subject_picker)
 * ====================================================================== */
.sk-subjects { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.sk-subjects__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 0; }
.sk-subjects__count { font-size: var(--sk-text-xs); font-weight: var(--sk-weight-semibold); color: var(--sk-brand-11); font-variant-numeric: tabular-nums; }
.sk-subjects__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin: -2px; }
.sk-subjects__item { gap: 2px; padding: 11px 40px 11px 13px; border-radius: 12px; box-shadow: none; }
.sk-subjects__item .sk-choice__mark { top: 50%; right: 12px; margin-top: -10px; }
.sk-subjects__name { font-size: var(--sk-text-sm); font-weight: var(--sk-weight-semibold); line-height: 1.3; }
.sk-subjects__code { font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); font-variant-numeric: tabular-nums; }
.sk-subjects__item:has(input[data-locked]) { opacity: 1; cursor: default; }
.sk-subjects__empty { padding: 14px; border-radius: 12px; background: var(--sk-surface-sunken); font-size: var(--sk-text-sm); color: var(--sk-fg-muted); text-align: center; }

/* GCE pages */
.sk-gce-notice { margin-bottom: 14px; }
.sk-countdown-big { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 124px; height: 124px; border-radius: 50%; background: rgb(255 255 255 / 0.14); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.25); text-align: center; }
.sk-countdown-big b { font-family: var(--sk-font-display); font-size: 2.6rem; font-weight: var(--sk-weight-black); line-height: 1; letter-spacing: -0.04em; }
.sk-countdown-big span { max-width: 92px; font-size: 10.5px; font-weight: var(--sk-weight-semibold); line-height: 1.25; color: rgb(255 255 255 / 0.85); }
@media (max-width: 479.98px) { .sk-countdown-big { width: 92px; height: 92px; } .sk-countdown-big b { font-size: 1.9rem; } .sk-countdown-big span { max-width: 74px; font-size: 9.5px; } }
.sk-gce-status { display: flex; align-items: center; gap: 8px; font-size: var(--sk-text-sm); color: var(--sk-fg-muted); }
[data-gce-results][aria-busy="true"] { opacity: 0.55; transition: opacity var(--sk-dur-base); }

/* GCE reader page */
.sk-gce-reader { display: flex; flex-direction: column; gap: 4px; }
.sk-gce-reader__bar { display: flex; align-items: center; gap: 10px; min-height: 36px; flex-wrap: wrap; }
.sk-gce-reader .sukud-pdf-reader { margin-top: 0; height: min(80dvh, 900px); box-shadow: var(--sk-shadow-sm); }
.sk-gce-reader__tip { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

/* Buying an answer (dialog or page) */
.sk-buy-dialog { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 24px; background: var(--sk-surface); color: var(--sk-fg); box-shadow: var(--sk-shadow-xl); overflow: auto; }
.sk-buy-dialog::backdrop { background: rgb(10 12 20 / 0.5); backdrop-filter: blur(3px); }
.sk-buy-dialog[open] { animation: sk-pop var(--sk-dur-slow) var(--sk-ease-spring); }
.sk-buy-dialog.is-closing { opacity: 0; transform: scale(0.97); transition: opacity 140ms, transform 140ms; }
div.sk-buy-dialog { margin: 24px auto; border: 1px solid var(--sk-border-subtle); }
@media (max-width: 559.98px) { dialog.sk-buy-dialog { margin: auto auto 0; width: 100%; max-width: none; border-radius: 24px 24px 0 0; padding-bottom: var(--sk-safe-bottom); } }
.sk-buy { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.sk-buy__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-buy__title { font-family: var(--sk-font-display); font-size: var(--sk-text-xl); font-weight: var(--sk-weight-bold); letter-spacing: -0.02em; }
.sk-buy__product { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--sk-surface-sunken); }
.sk-buy__doc { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--sk-green-3); color: var(--sk-green-11); }
.sk-buy__sum { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sk-buy__sum > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-buy__sum dt { color: var(--sk-fg-muted); font-size: var(--sk-text-sm); }
.sk-buy__sum dd { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.sk-buy__short { padding: 12px 14px; border-radius: 14px; background: var(--sk-amber-3); color: var(--sk-amber-12); font-size: var(--sk-text-sm); line-height: 1.5; }
.sk-buy__note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); }
.sk-answer-buy { gap: 6px; }
.sk-answer-buy .sk-points { background: rgb(255 255 255 / 0.18); color: inherit; }
html.answer-purchase-open { overflow: hidden; }

/* SKD Points page */
.sk-gce-pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; }
.sk-txn-link { display: block; color: inherit; text-decoration: none; border-radius: 14px; }
.sk-txn-link:hover { background: var(--sk-surface-hover); }
.sk-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.sk-preset { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 1.5px solid var(--sk-border); border-radius: 14px; background: var(--sk-surface); color: var(--sk-fg); font: inherit; cursor: pointer; transition: border-color var(--sk-dur-fast), background-color var(--sk-dur-fast), transform var(--sk-dur-base) var(--sk-ease-spring); }
.sk-preset:hover:not(:disabled) { border-color: var(--sk-brand-8); }
.sk-preset:active:not(:disabled) { transform: scale(0.97); }
.sk-preset[aria-pressed="true"] { border-color: var(--sk-brand-9); background: var(--sk-brand-2); box-shadow: 0 0 0 1px var(--sk-brand-9); }
.sk-preset:disabled { opacity: 0.45; cursor: not-allowed; }
.sk-preset__amount { font-family: var(--sk-font-display); font-weight: var(--sk-weight-bold); font-size: var(--sk-text-md); font-variant-numeric: tabular-nums; }
.sk-preset__unit { font-size: var(--sk-text-2xs); color: var(--sk-fg-subtle); font-weight: var(--sk-weight-semibold); }
.sk-preset-preview { padding: 12px 14px; border-radius: 14px; background: var(--sk-amber-2); font-size: var(--sk-text-sm); color: var(--sk-fg-muted); text-align: center; }
.sk-preset-preview strong { color: var(--sk-amber-11); font-size: var(--sk-text-md); }
.sk-quote { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px; border-radius: 16px; background: var(--sk-surface-sunken); }
.sk-quote > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sk-quote span { font-size: var(--sk-text-xs); color: var(--sk-fg-subtle); }
.sk-quote strong { font-family: var(--sk-font-display); font-size: var(--sk-text-xl); font-variant-numeric: tabular-nums; }
.sk-quote strong small { font-size: var(--sk-text-xs); color: var(--sk-fg-muted); }
.sk-quote__arrow { color: var(--sk-fg-subtle); }

/* An amount with a note under it, at the end of a finance row. */
.sk-fin-amount { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-variant-numeric: tabular-nums; }
.sk-fin-amount b { font-weight: var(--sk-weight-bold); white-space: nowrap; }
.sk-fin-amount small { font-size: var(--sk-text-xs); color: var(--sk-fg-muted); white-space: nowrap; }