/* ==========================================================
   PREMIUM MOTION SYSTEM — MOBILE + DESKTOP
   ========================================================== */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);
  --motion-fast:140ms;
  --motion-med:260ms;
  --motion-slow:420ms;
}

/* ---------- Branded startup loader ---------- */
.app-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 34%,rgba(168,131,61,.10),transparent 24%),
    #f5f0e6;
  animation:appLoaderExit 720ms var(--ease-out) 5.15s forwards;
}

.app-loader-inner{width:min(340px,calc(100vw - 48px));display:grid;justify-items:center;text-align:center}
.loader-stage{grid-area:1/1;width:100%;display:grid;justify-items:center;opacity:0;pointer-events:none}
.loader-stage-drz{animation:loaderDrZStage 2.45s var(--ease-soft) both}
.loader-stage-mcphs{animation:loaderMCPHSStage 2.45s var(--ease-soft) 2.45s both}

.app-loader-logo{
  width:64px;
  height:64px;
  display:block;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff var(--drz) center/contain no-repeat;
  box-shadow:0 18px 45px rgba(7,26,49,.10);
  animation:loaderLogoFloat 1.35s ease-in-out infinite alternate;
}

.app-loader-copy{
  margin-top:14px;
}

.app-loader-copy strong{
  display:block;
  color:var(--navy);
  font-size:15px;
  letter-spacing:-.025em;
}

.app-loader-copy span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:9px;
}

.loader-mcphs-mark{display:grid;justify-items:center;gap:9px;padding:20px 24px;border:1px solid #d9d4ca;border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 18px 45px rgba(7,26,49,.08)}
.loader-mcphs-logo{display:block;width:min(286px,calc(100vw - 104px));line-height:0}
.loader-mcphs-logo svg{display:block;width:100%;height:auto}
.loader-mcphs-mark>span:last-child{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.loader-affiliation{max-width:315px;margin:14px auto 0;color:#6f7880;font-size:9px;line-height:1.55}

.app-loader-track{
  width:150px;
  height:3px;
  overflow:hidden;
  margin-top:16px;
  border-radius:999px;
  background:#e5ded2;
}

.app-loader-track i{
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:var(--gold);
  animation:loaderProgress 5s var(--ease-soft) both;
}

.app-loader-dots{
  display:flex;
  gap:5px;
  margin-top:11px;
}

.app-loader-dots i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#9ca5ac;
  animation:loaderDot 900ms ease-in-out infinite;
}
.app-loader-dots i:nth-child(2){animation-delay:110ms}
.app-loader-dots i:nth-child(3){animation-delay:220ms}

@keyframes loaderDrZStage{0%{opacity:0;transform:translateY(12px) scale(.985)}14%,72%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-8px) scale(.99)}}
@keyframes loaderMCPHSStage{0%{opacity:0;transform:translateY(10px) scale(.99)}18%,76%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-7px) scale(.995)}}
@keyframes loaderLogoFloat{
  from{transform:translateY(0)}
  to{transform:translateY(-4px)}
}
@keyframes loaderProgress{
  0%{width:0}
  45%{width:47%}
  72%{width:76%}
  100%{width:100%}
}
@keyframes loaderDot{
  0%,100%{opacity:.35;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-3px)}
}
@keyframes appLoaderExit{
  0%{opacity:1;visibility:visible;pointer-events:auto}
  80%{opacity:0}
  100%{opacity:0;visibility:hidden;pointer-events:none}
}

/* ---------- Page / course / view transitions ---------- */
#p-home:checked~.app .view-home,
#p-course:checked~.app .view-course,
#p-schedule:checked~.app .view-schedule,
#p-recordings:checked~.app .view-recordings,
#p-resources:checked~.app .view-resources,
#p-exams:checked~.app .view-exams,
#p-office:checked~.app .view-office,
#p-payments:checked~.app .view-payments,
#p-more:checked~.app .view-more{
  animation:pageReveal 310ms var(--ease-out) both;
}

#c151:checked~.app .block-151,
#c255:checked~.app .block-255{
  animation:courseReveal 300ms var(--ease-out) both;
}

#s-week:checked~.app .week-view,
#s-sem:checked~.app .semester-view{
  animation:sectionReveal 280ms var(--ease-out) both;
}

@keyframes pageReveal{
  from{opacity:0;transform:translate3d(0,9px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes courseReveal{
  from{opacity:.25;transform:translate3d(8px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes sectionReveal{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* Header title animates each time its page becomes active. */
#p-home:checked~.app .page-name .t-home,
#p-course:checked~.app .page-name .t-course,
#p-schedule:checked~.app .page-name .t-schedule,
#p-recordings:checked~.app .page-name .t-recordings,
#p-resources:checked~.app .page-name .t-resources,
#p-exams:checked~.app .page-name .t-exams,
#p-office:checked~.app .page-name .t-office,
#p-payments:checked~.app .page-name .t-payments,
#p-more:checked~.app .page-name .t-more{
  animation:titleIn 220ms var(--ease-out) both;
}
@keyframes titleIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Buttons and tap feedback ---------- */
.btn,
.quick,
.more-item,
.nav-label,
.mobile-tab,
.course-choice,
.filter-tabs label,
.schedule-tabs label,
summary{
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-med) var(--ease-out),
    background-color var(--motion-med) ease,
    border-color var(--motion-med) ease,
    color var(--motion-med) ease,
    opacity var(--motion-fast) ease;
}

.btn,
.quick,
.more-item[href]{
  position:relative;
  overflow:hidden;
}

.btn::before,
.quick::before,
.more-item[href]::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,.28) 44%,
    transparent 68%
  );
  transform:translateX(-125%);
  transition:transform 540ms var(--ease-out);
  pointer-events:none;
}

.btn:hover::before,
.quick:hover::before,
.more-item[href]:hover::before{
  transform:translateX(125%);
}

.btn:active,
.quick:active,
.more-item[href]:active,
.nav-label:active,
.mobile-tab:active,
.course-choice:active,
.filter-tabs label:active,
.schedule-tabs label:active,
summary:active{
  transform:scale(.975);
}

.btn.tap-loading{
  pointer-events:none;
  color:transparent!important;
}

.btn.tap-loading::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  margin:-8px 0 0 -8px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  color:inherit;
  animation:spin 520ms linear infinite;
}

.btn.primary.tap-loading::after{
  border-color:rgba(255,255,255,.48);
  border-right-color:#fff;
}

.btn.secondary.tap-loading::after,
.btn.gold.tap-loading::after{
  border-color:rgba(7,26,49,.18);
  border-right-color:var(--navy);
}

@keyframes spin{to{transform:rotate(360deg)}}

/* Desktop gets hover elevation; touch screens do not. */
@media(hover:hover) and (pointer:fine){
  .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 22px rgba(7,26,49,.09);
  }

  .quick:hover,
  .more-item[href]:hover,
  .recording-card:hover,
  .resource-card:hover,
  .unit-card:hover,
  .card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 38px rgba(7,26,49,.07);
  }

  .card,
  .unit-card,
  .recording-card,
  .resource-card{
    transition:
      transform var(--motion-med) var(--ease-out),
      box-shadow var(--motion-med) var(--ease-out),
      border-color var(--motion-med) ease;
  }
}

/* ---------- Bottom navigation ---------- */
.mobile-tab{
  position:relative;
  isolation:isolate;
}

.mobile-tab::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--gold);
  opacity:0;
  transform:translateX(-50%) scale(.2);
  transition:
    opacity 180ms ease,
    transform 260ms var(--ease-out);
}

#p-home:checked~.app [for=p-home].mobile-tab::after,
#p-course:checked~.app [for=p-course].mobile-tab::after,
#p-schedule:checked~.app [for=p-schedule].mobile-tab::after,
#p-resources:checked~.app [for=p-resources].mobile-tab::after,
#p-more:checked~.app [for=p-more].mobile-tab::after,
#p-recordings:checked~.app [for=p-more].mobile-tab::after,
#p-exams:checked~.app [for=p-more].mobile-tab::after,
#p-office:checked~.app [for=p-more].mobile-tab::after,
#p-payments:checked~.app [for=p-more].mobile-tab::after{
  opacity:1;
  transform:translateX(-50%) scale(1);
}

.mobile-tab i{
  transition:transform 260ms var(--ease-out);
}

#p-home:checked~.app [for=p-home].mobile-tab i,
#p-course:checked~.app [for=p-course].mobile-tab i,
#p-schedule:checked~.app [for=p-schedule].mobile-tab i,
#p-resources:checked~.app [for=p-resources].mobile-tab i,
#p-more:checked~.app [for=p-more].mobile-tab i,
#p-recordings:checked~.app [for=p-more].mobile-tab i,
#p-exams:checked~.app [for=p-more].mobile-tab i,
#p-office:checked~.app [for=p-more].mobile-tab i,
#p-payments:checked~.app [for=p-more].mobile-tab i{
  transform:translateY(-1px) scale(1.08);
}

/* ---------- Details / accordions ---------- */
details[open] > .week-expand,
details[open] > .class-expand,
details[open] > .resource-expand,
details[open] .recording-expand{
  animation:detailsReveal 260ms var(--ease-out) both;
}

details[open] > summary{
  background-color:rgba(168,131,61,.025);
}

@keyframes detailsReveal{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

details > summary b{
  transition:transform 240ms var(--ease-out);
}

details[open] > summary b{
  transform:rotate(90deg);
}

.week-event.complete[open] > summary b{
  transform:none;
}

/* ---------- Progress motion ---------- */
.progress i,
.thumb i,
.player-track i{
  transform-origin:left center;
  animation:progressGrow 680ms var(--ease-out) both;
}

@keyframes progressGrow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

/* ---------- Dropdowns ---------- */
.top-course[open] .course-options,
.side-course[open] .course-options,
.notify[open] .notify-panel{
  transform-origin:top right;
  animation:menuReveal 220ms var(--ease-out) both;
}

.side-course[open] .course-options{
  transform-origin:top left;
}

@keyframes menuReveal{
  from{opacity:0;transform:translateY(-5px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ---------- Modal + secure viewer motion ---------- */
.modal:target .modal-backdrop{
  animation:backdropIn 200ms ease both;
}

.modal:target .modal-card{
  animation:modalReveal 300ms var(--ease-out) both;
}

.viewer-modal:target .viewer-panel{
  animation:viewerReveal 330ms var(--ease-out) both;
}

.viewer-modal:target .viewer-page{
  animation:paperReveal 400ms var(--ease-out) 70ms both;
}

@keyframes backdropIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes modalReveal{
  from{opacity:0;transform:translateY(18px) scale(.975)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes viewerReveal{
  from{opacity:0;transform:scale(.985)}
  to{opacity:1;transform:scale(1)}
}

@keyframes paperReveal{
  from{opacity:0;transform:translateY(15px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Media / hero polish ---------- */
.media-thumb::after,
.play-icon{
  transition:
    transform 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
}

.media-card:hover .media-thumb::after,
.recording-card:hover .play-icon{
  transform:scale(1.08);
  box-shadow:0 9px 24px rgba(0,0,0,.15);
}

.next-card{
  position:relative;
  overflow:hidden;
}

.next-card::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-70px;
  top:-85px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,131,61,.16),transparent 66%);
  pointer-events:none;
  animation:ambientGlow 4s ease-in-out infinite alternate;
}

@keyframes ambientGlow{
  from{transform:translate3d(0,0,0) scale(.95);opacity:.65}
  to{transform:translate3d(-12px,10px,0) scale(1.08);opacity:1}
}

/* ---------- Phase 9: dedicated Office Hours ---------- */
.office-shell{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.72fr);gap:12px;margin:12px 0}
.office-next{position:relative;overflow:hidden;padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(135deg,#071a31 0%,#0d2b4a 68%,#173f61 100%);color:white;box-shadow:0 22px 52px rgba(7,26,49,.13)}
.office-next::after{content:"?";position:absolute;right:-5px;top:-42px;color:rgba(255,255,255,.045);font-family:Georgia,serif;font-size:210px;line-height:1;pointer-events:none}
.office-status{position:relative;z-index:1;display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.office-status span{display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);font-size:9px;font-weight:800;letter-spacing:.04em}
.office-status .upcoming{border-color:rgba(168,131,61,.55);background:rgba(168,131,61,.2);color:#f7e4b9}
.office-next h2{position:relative;z-index:1;max-width:620px;margin:0;font-size:clamp(24px,4vw,42px);line-height:1.03;letter-spacing:-.045em}
.office-next>p{position:relative;z-index:1;max-width:640px;margin:12px 0 0;color:#c6d2dd;font-size:11px;line-height:1.65}
.office-meta-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:20px 0}
.office-meta{min-width:0;padding:10px;border:1px solid rgba(255,255,255,.11);border-radius:11px;background:rgba(255,255,255,.055)}
.office-meta small,.office-meta strong{display:block}.office-meta small{color:#91a8ba;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.office-meta strong{margin-top:4px;color:white;font-size:10px;line-height:1.35}
.office-next .action-row{position:relative;z-index:1}.office-next .btn.secondary{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:white}
.office-locked{cursor:not-allowed;opacity:.62}.office-join-note{position:relative;z-index:1;margin:10px 0 0!important;color:#93a8ba!important;font-size:9px!important}
.office-agenda{height:100%}.office-agenda .card-body{display:grid;gap:0}.office-agenda-item{display:grid;grid-template-columns:26px 1fr;gap:9px;padding:11px 0;border-bottom:1px solid var(--line)}.office-agenda-item:last-child{border-bottom:0}.office-agenda-item>span{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--goldsoft);color:var(--gold);font-size:9px;font-weight:900}.office-agenda-item strong,.office-agenda-item small{display:block}.office-agenda-item strong{color:var(--navy);font-size:10px}.office-agenda-item small{margin-top:3px;color:var(--muted);font-size:8px;line-height:1.5}
.office-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.office-link{padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--shadow)}.office-link>span{display:grid;place-items:center;width:31px;height:31px;margin-bottom:10px;border-radius:10px;background:var(--goldsoft);color:var(--gold);font-weight:900}.office-link strong,.office-link p{display:block}.office-link strong{color:var(--navy);font-size:11px}.office-link p{min-height:36px;margin:5px 0 12px;color:var(--muted);font-size:9px;line-height:1.5}
.office-history{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.office-session{position:relative;overflow:hidden;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.office-session::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#b8c1c8}.office-session.complete::before{background:var(--green)}.office-session.rescheduled::before{background:var(--gold)}.office-session small,.office-session strong,.office-session span{display:block}.office-session small{color:var(--muted);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.office-session strong{margin-top:7px;color:var(--navy);font-size:11px;line-height:1.35}.office-session span{margin-top:5px;color:var(--muted);font-size:9px;line-height:1.45}.office-session .action-row{margin-top:12px}

/* ---------- Phase 10: student payments ---------- */
.payment-summary{display:grid;grid-template-columns:1.25fr repeat(2,minmax(170px,.55fr));gap:10px;margin:12px 0}.payment-balance{position:relative;overflow:hidden;padding:21px;border-radius:17px;background:linear-gradient(135deg,var(--navy),#143d60);color:white;box-shadow:0 20px 48px rgba(7,26,49,.13)}.payment-balance::after{content:"$";position:absolute;right:8px;top:-42px;color:rgba(255,255,255,.05);font-family:Georgia,serif;font-size:190px;line-height:1}.payment-balance small,.payment-balance strong,.payment-balance span{position:relative;z-index:1;display:block}.payment-balance small{color:#9fb2c2;font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.payment-balance strong{margin-top:8px;font-size:38px;line-height:1;letter-spacing:-.045em}.payment-balance span{margin-top:8px;color:#c5d2dc;font-size:9px}.payment-progress{position:relative;z-index:1;height:5px;margin-top:19px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.14)}.payment-progress i{display:block;width:var(--paid,0%);height:100%;border-radius:inherit;background:#d1ae63}.payment-stat{display:flex;flex-direction:column;justify-content:space-between;padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--paper);box-shadow:var(--shadow)}.payment-stat small,.payment-stat strong,.payment-stat span{display:block}.payment-stat small{color:var(--muted);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.payment-stat strong{margin:12px 0 5px;color:var(--navy);font-size:20px;line-height:1}.payment-stat span{color:var(--muted);font-size:9px;line-height:1.45}
.payment-layout{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(270px,.62fr);gap:12px;margin:12px 0}.payment-schedule .card-body{padding:0 14px}.payment-row{display:grid;grid-template-columns:31px minmax(0,1fr) 82px 78px;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}.payment-row:last-child{border-bottom:0}.payment-step{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:var(--paper2);color:var(--muted);font-size:9px;font-weight:900}.payment-copy strong,.payment-copy span{display:block}.payment-copy strong{color:var(--navy);font-size:10px}.payment-copy span{margin-top:3px;color:var(--muted);font-size:8px}.payment-value{text-align:right;color:var(--navy);font-size:11px;font-weight:900}.payment-status{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:0 8px;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.payment-status.paid{background:var(--greensoft);color:var(--green)}.payment-status.upcoming{background:#eef2f5;color:#60717f}.payment-status.due{background:var(--goldsoft);color:#7b5a1e}.payment-status.overdue{background:#f7e9e7;color:var(--red)}.payment-status.waived{background:#ece7f4;color:#67537c}.payment-status.refunded{background:#e7eff6;color:#416780}
.payment-side{display:grid;gap:10px}.payment-plan-card{padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--paper)}.payment-plan-card>small,.payment-plan-card>strong,.payment-plan-card>span{display:block}.payment-plan-card>small{color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.payment-plan-card>strong{margin-top:8px;color:var(--navy);font-size:16px;line-height:1.2}.payment-plan-card>span{margin-top:6px;color:var(--muted);font-size:9px;line-height:1.5}.payment-plan-list{display:grid;gap:8px;margin-top:14px}.payment-plan-list div{display:flex;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid var(--line);color:var(--muted);font-size:9px}.payment-plan-list b{color:var(--navy)}
.payment-record-only{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:13px;border:1px solid #ded4c1;border-radius:13px;background:#fbf4e6}.payment-record-only>span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:white;color:var(--gold);font-weight:900}.payment-record-only strong,.payment-record-only p{display:block}.payment-record-only strong{color:var(--navy);font-size:10px}.payment-record-only p{margin:4px 0 0;color:#776b57;font-size:8px;line-height:1.5}
.payment-policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.payment-policy{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.payment-policy h3{margin:0;color:var(--navy);font-size:11px}.payment-policy p{margin:6px 0 0;color:var(--muted);font-size:9px;line-height:1.55}.payment-methods{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.payment-method{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border:1px solid var(--line);border-radius:9px;background:var(--paper2);color:var(--navy);font-size:9px;font-weight:800}
.payment-status-guide{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.payment-guide-item{padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.payment-guide-item p{margin:7px 0 0;color:var(--muted);font-size:8px;line-height:1.45}.payment-history{margin-top:12px}.payment-history details{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}.payment-history summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:14px;cursor:pointer;list-style:none}.payment-history summary::-webkit-details-marker{display:none}.payment-history summary strong,.payment-history summary span{display:block}.payment-history summary strong{color:var(--navy);font-size:10px}.payment-history summary span{margin-top:3px;color:var(--muted);font-size:8px}.payment-history summary>b{color:var(--navy);font-size:11px}.payment-history-detail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 14px 14px}.payment-history-detail div{padding:10px;border-radius:10px;background:var(--paper2)}.payment-history-detail small,.payment-history-detail strong{display:block}.payment-history-detail small{color:var(--muted);font-size:7px;text-transform:uppercase;letter-spacing:.08em}.payment-history-detail strong{margin-top:4px;color:var(--navy);font-size:9px}

@media(max-width:900px){
  .payment-summary,.payment-layout,.payment-policy-grid{grid-template-columns:1fr}.payment-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-balance{grid-column:1/-1}.payment-row{grid-template-columns:30px minmax(0,1fr) auto}.payment-value{grid-column:2;text-align:left}.payment-status{grid-column:3;grid-row:1/3}.payment-status-guide{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-history-detail{grid-template-columns:1fr}.payment-copy strong,.payment-stat span,.payment-plan-card>span,.payment-policy p,.payment-history summary strong{font-size:12px}.payment-copy span,.payment-record-only p,.payment-history summary span,.payment-guide-item p{font-size:11px}
}

@media(max-width:900px){
  .office-shell{grid-template-columns:1fr}.office-next{padding:20px}.office-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.office-link-grid,.office-history{grid-template-columns:1fr}.office-link p{min-height:0}.office-agenda-item strong{font-size:12px}.office-agenda-item small,.office-meta strong,.office-session span{font-size:11px}
}

/* ---------- Mobile feels native, not hover-driven ---------- */
@media(max-width:900px){
  .view{
    will-change:opacity,transform;
  }

  .mobile-nav{
    transition:
      transform 300ms var(--ease-out),
      box-shadow 300ms var(--ease-out);
    animation:mobileNavRise 460ms var(--ease-out) 700ms both;
  }

  @keyframes mobileNavRise{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:translateY(0)}
  }

  .topbar{
    animation:topbarDrop 420ms var(--ease-out) 650ms both;
  }

  @keyframes topbarDrop{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:translateY(0)}
  }

  .modal:target .modal-card{
    animation:mobileSheetReveal 320ms var(--ease-out) both;
  }

  @keyframes mobileSheetReveal{
    from{opacity:0;transform:translateY(24px) scale(.99)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }

  .searchbar input{
    font-size:16px;
  }

  .btn,
  .schedule-tabs label,
  .filter-tabs label,
  .course-choice{
    font-size:12px;
  }

  .announcement b,
  .announcement span,
  .card-head span,
  .week-copy span,
  .class-copy span,
  .rec-copy span,
  .res-copy span,
  .more-item span,
  .security-note,
  .info-box p,
  .month p,
  .player-meta{
    font-size:12px;
    line-height:1.45;
  }
}

/* ---------- Accessibility: keyboard focus and readable controls ---------- */
:where(a,summary,input,label[for]):focus-visible{
  outline:3px solid #c49a46;
  outline-offset:3px;
}

.searchbar:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(168,131,61,.2);
}

#p-home:focus-visible~.app [for=p-home],
#p-course:focus-visible~.app [for=p-course],
#p-schedule:focus-visible~.app [for=p-schedule],
#p-recordings:focus-visible~.app [for=p-recordings],
#p-resources:focus-visible~.app [for=p-resources],
#p-exams:focus-visible~.app [for=p-exams],
#p-office:focus-visible~.app [for=p-office],
#p-payments:focus-visible~.app [for=p-payments],
#p-more:focus-visible~.app [for=p-more],
#c151:focus-visible~.app [for=c151],
#c255:focus-visible~.app [for=c255],
#s-week:focus-visible~.app [for=s-week],
#s-sem:focus-visible~.app [for=s-sem],
#rf-all:focus-visible~.app [for=rf-all],
#rf-class:focus-visible~.app [for=rf-class],
#rf-office:focus-visible~.app [for=rf-office],
#rf-review:focus-visible~.app [for=rf-review],
#res-all:focus-visible~.app [for=res-all],
#res-notes:focus-visible~.app [for=res-notes],
#res-slides:focus-visible~.app [for=res-slides],
#res-practice:focus-visible~.app [for=res-practice],
#res-review:focus-visible~.app [for=res-review],
#res-other:focus-visible~.app [for=res-other]{
  outline:3px solid #c49a46;
  outline-offset:3px;
}

/* ---------- Accessibility: honor reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
  }

  .app-loader{
    display:none!important;
  }
}