/* Hallmark · component layer — registration card, dashboard tiles, video grid, SPM banner modal.
 * Loads after portal.css + logo.css; consumes their tokens by name, declares no raw colours of its own
 * beyond the modal scrim. The promo modal markup, trigger and sessionStorage key are unchanged.
 */

/* ── registration card ──────────────────────────────────────────────────── */
.vsp-app .vsp-register-view{padding:var(--space-12) 0 var(--space-16)}
.vsp-app .vsp-register-card{
  width:min(820px,calc(100% - 40px));
  margin:0 auto;
  padding:var(--space-10) var(--space-12);
  border-radius:var(--radius-lg);
}
.vsp-app .vsp-register-card h1,
.vsp-app .vsp-register-card>p{text-align:left}
.vsp-app .vsp-register-card h1{font-size:var(--text-h1);margin:0 0 var(--space-3)}
.vsp-app .vsp-register-card>p{font-size:var(--text-lead);color:var(--vsp-muted);margin:0}
.vsp-app .vsp-register-card form{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-5) var(--space-6);
  margin-top:var(--space-8);
  padding-top:var(--space-8);
  border-top:var(--rule) solid var(--vsp-line);
}
.vsp-app .vsp-register-card label{font-size:var(--text-sm);line-height:1.35}
.vsp-app .vsp-required{color:var(--vsp-err);margin-left:var(--space-1)}
.vsp-app .vsp-confirm-password{grid-column:1/-1}

.vsp-app .vsp-password{display:block;position:relative}
.vsp-app .vsp-password input{padding-right:56px}
.vsp-app .vsp-password-toggle{
  position:absolute;
  right:5px;
  bottom:5px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent!important;
  color:var(--vsp-muted)!important;
  font-size:1.05rem;
  line-height:1;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.vsp-app .vsp-password-toggle:hover{background:var(--vsp-paper-2)!important;color:var(--vsp-ink)!important}
.vsp-app .vsp-password-toggle[aria-pressed="true"]{color:var(--vsp-accent-ink)!important}

.vsp-app .vsp-consent{
  grid-column:1/-1;
  display:flex!important;
  gap:var(--space-4);
  align-items:flex-start;
  padding:var(--space-5);
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-md);
  background:var(--vsp-paper-2);
  font-weight:400!important;
  line-height:1.6!important;
}
.vsp-app .vsp-consent input{
  flex:0 0 22px;
  width:22px!important;
  height:22px!important;
  min-height:0!important;
  margin:2px 0 0!important;
  padding:0!important;
  accent-color:var(--vsp-accent);
}
.vsp-app .vsp-consent span{font-size:var(--text-sm);color:var(--vsp-ink-2)}
.vsp-app .vsp-register-card form>button.primary{min-height:54px;font-size:var(--text-body)}
.vsp-app .vsp-register-switch{
  text-align:center!important;
  margin:var(--space-6) 0 0!important;
  color:var(--vsp-ink-2)!important;
  font-size:var(--text-sm);
}
.vsp-app .vsp-register-switch .link{display:inline;font-size:inherit}

/* ── dashboard tiles ────────────────────────────────────────────────────── */
.vsp-app .vsp-dashboard-links{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));
  gap:var(--space-4);
  margin-top:var(--space-10);
}
.vsp-app .vsp-dashboard-links button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  min-width:0;
  min-height:84px;
  padding:var(--space-6) var(--space-5);
  background:var(--vsp-paper);
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-md);
  color:var(--vsp-ink);
  font-weight:700;
  text-align:left;
  transition:transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
}
.vsp-app .vsp-dashboard-links button::after{
  content:"";
  flex:0 0 auto;
  width:9px;
  height:9px;
  border-right:2px solid var(--vsp-accent);
  border-bottom:2px solid var(--vsp-accent);
  transform:rotate(-45deg);
}
.vsp-app .vsp-dashboard-links button:hover{
  transform:translateY(-3px);
  border-color:var(--vsp-accent);
  box-shadow:var(--vsp-shadow-1);
}
.vsp-app .vsp-dashboard-links button:active{transform:translateY(0)}

/* ── videos ─────────────────────────────────────────────────────────────── */
.vsp-app .vsp-videos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));
  gap:var(--space-6);
}
.vsp-app .vsp-videos article{
  min-width:0;
  background:var(--vsp-paper);
  border:var(--rule) solid var(--vsp-line);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  transition:box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.vsp-app .vsp-videos article:hover{border-color:var(--vsp-line-strong);box-shadow:var(--vsp-shadow-1)}
.vsp-app .vsp-video-frame{
  aspect-ratio:16/9;
  background:var(--vsp-paper-3);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
/* thumbnail + play button; the whole card opens the player (portal.js) */
.vsp-app .vsp-videos article[data-video]{cursor:pointer}
.vsp-app button.vsp-video-frame{position:relative;display:block;width:100%;padding:0}
.vsp-app .vsp-video-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur) var(--ease-out)}
.vsp-app .vsp-videos article:hover .vsp-video-frame img{transform:scale(1.03)}
.vsp-app button.vsp-video-frame::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:64px;height:64px;
  margin:-32px 0 0 -32px;
  border-radius:50%;
  background:var(--vsp-accent);
  box-shadow:0 6px 20px rgba(17,14,11,.35);
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.vsp-app button.vsp-video-frame::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:20px;height:24px;
  margin:-12px 0 0 -7px;
  background:#fff;
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.vsp-app .vsp-videos article:hover button.vsp-video-frame::before{transform:scale(1.08);background:var(--vsp-accent-press)}

/* pop-out player */
.vsp-video-modal{
  width:min(calc(100vw - 32px),1100px,calc((100vh - 140px) * 16 / 9));
  max-width:none;
  padding:0;
  border:0;
  border-radius:var(--radius-md);
  background:#000;
  overflow:visible;
}
.vsp-video-modal::backdrop{background:rgba(17,14,11,.85)}
.vsp-video-player{aspect-ratio:16/9}
.vsp-video-player iframe{width:100%;height:100%;border:0;display:block;border-radius:inherit}
.vsp-app .vsp-video-modal .vsp-promo-close{top:-56px;right:0}
html:has(.vsp-video-modal[open]){overflow:hidden}
.vsp-app .vsp-videos h3{font-size:var(--text-h3);margin:var(--space-5) var(--space-2) var(--space-2)}
.vsp-app .vsp-videos p{margin:0 var(--space-2) var(--space-2);font-size:var(--text-sm);color:var(--vsp-muted)}

/* ── paper description + inline links ───────────────────────────────────── */
.vsp-app .paper-description{
  font-size:var(--text-sm);
  color:var(--vsp-muted);
  text-align:left;
  margin-top:var(--space-3);
}
.vsp-app .paper-description p{margin:0 0 var(--space-2)}
.vsp-app .vsp-auth .link{display:block;margin:var(--space-4) auto 0;text-align:center}
.vsp-app .vsp-email-label{word-break:break-all}

@media(max-width:860px){
  .vsp-app .vsp-register-card{padding:var(--space-8) var(--space-6)}
  .vsp-app .vsp-register-card form{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .vsp-app .vsp-confirm-password,.vsp-app .vsp-consent{grid-column:auto}
}
@media(max-width:560px){
  .vsp-app .vsp-register-view{padding:var(--space-8) 0 var(--space-12)}
  .vsp-app .vsp-register-card{width:calc(100% - 32px);padding:var(--space-6) var(--space-5)}
  .vsp-app .vsp-consent{padding:var(--space-4)}
  .vsp-app .vsp-dashboard-links button{min-height:72px;padding:var(--space-5) var(--space-4)}
}

/* ── utilities ──────────────────────────────────────────────────────────── */
.vsp-sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ── SPM Kertas Ramalan banner modal (markup + behaviour preserved) ─────── */
body.vsp-promo-open{overflow:hidden}
.vsp-promo-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur,.2s) var(--ease-out,ease),visibility var(--dur,.2s) var(--ease-out,ease);
}
.vsp-promo-modal.is-open{opacity:1;visibility:visible}
.vsp-promo-backdrop{position:absolute;inset:0;background:rgba(20,14,9,.74);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.vsp-promo-dialog{
  position:relative;
  width:min(1120px,100%);
  max-height:calc(100vh - 48px);
  border-radius:var(--radius-lg,16px);
  overflow:hidden;
  background:#fff;
  box-shadow:0 28px 90px rgba(0,0,0,.38);
  transform:translateY(10px) scale(.985);
  transition:transform var(--dur,.2s) var(--ease-out,ease);
}
.vsp-promo-modal.is-open .vsp-promo-dialog{transform:translateY(0) scale(1)}
.vsp-promo-dialog img{display:block;width:100%;height:auto;max-height:calc(100vh - 48px);object-fit:contain}
/* .vsp-app prefix needed: the .vsp-app button reset (0,1,1) was beating a bare .vsp-promo-close and blanking the circle */
.vsp-app .vsp-promo-close{
  position:absolute;
  right:14px;
  top:14px;
  z-index:1;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:rgba(17,14,11,.8);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:background var(--dur-fast,.14s) var(--ease-out,ease),transform var(--dur-fast,.14s) var(--ease-out,ease);
}
.vsp-app .vsp-promo-close:hover{background:#140e09;transform:scale(1.05)}
.vsp-app .vsp-promo-close:active{transform:scale(.96)}
.vsp-app .vsp-promo-close:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:600px){
  .vsp-promo-modal{padding:12px}
  .vsp-promo-dialog{max-height:calc(100vh - 24px);border-radius:12px}
  .vsp-promo-dialog img{max-height:calc(100vh - 24px)}
  .vsp-app .vsp-promo-close{right:8px;top:8px;width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
  .vsp-promo-dialog{transform:none}
  .vsp-promo-modal.is-open .vsp-promo-dialog{transform:none}
}