/* Visual refinement pass toward the approved institutional concept. Presentation-layer only. */

/* ---- Masthead: larger crest, stronger proportions, refined identity ---- */
.site-header{background:var(--navy,var(--navy-deep));border-bottom:2px solid var(--gold)}
.site-header .header-inner{min-height:88px;gap:1.5rem}
.brand-crest{width:54px;height:54px}
.brand-copy{font:600 1.28rem/1.15 var(--serif);letter-spacing:.01em}
.brand-copy .brand-product{font-size:.8rem}
.brand-context{font-size:.74rem}
.desktop-nav{gap:clamp(1.1rem,2.2vw,2.15rem)}
.desktop-nav a{position:relative;padding:.4rem .1rem;font:700 .87rem var(--sans);letter-spacing:.01em}
.desktop-nav a:hover{color:var(--gold-light)}
.profile-menu summary{font:600 .84rem var(--sans)}
@media(min-width:1050px){.desktop-nav{margin-left:2.5rem;margin-right:auto}.brand-context{display:block}
  .service-list{grid-template-columns:repeat(3,minmax(0,1fr))}.service-item:nth-child(odd){border-right:1px solid var(--line)}}

/* ---- Hero: one integrated editorial composition ---- */
.hero{background:linear-gradient(180deg,#fbf9f3 0%,#f8f4ec 100%);padding:clamp(2.6rem,6vw,4.4rem) 0}
.hero-copy h1{font-size:clamp(2.5rem,5.2vw,3.5rem);font-weight:600;letter-spacing:-.02em}
.hero-copy>p:not(.eyebrow){font-size:1.05rem}
.hero-aside{position:relative}
.campus-visual{height:210px;border-radius:14px;box-shadow:0 18px 40px -22px #0c254466}
.hero-meta{border-top:1px solid #ddd5c6}
@media(min-width:880px){
  .hero-shell{gap:0;position:relative;border:1px solid var(--line);background:var(--paper);box-shadow:0 30px 60px -38px #0c254440}
  .hero-copy{padding:2.6rem 2.2rem 2.6rem 2.8rem}
  .hero-aside{padding:2.6rem 2.8rem 2.6rem 0}
  .campus-visual{height:100%;min-height:280px;margin:0 0 1.3rem;border-radius:16px}
  .hero-meta{border-top:0;gap:0}
  .hero-meta>div{padding:.55rem 0}
}

/* ---- Application detail card (new section) ---- */
.application-detail{padding-top:2.1rem}
.detail-grid{display:grid;grid-template-columns:1fr;gap:0;margin:1.3rem 0 0;border:1px solid var(--line);background:var(--paper)}
.detail-grid>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line)}
.detail-grid>div:last-child{border-bottom:0}
.detail-grid dt{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;flex:none}
.detail-grid dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
@media(min-width:620px){.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid>div{border-right:1px solid var(--line)}.detail-grid>div:nth-child(2n){border-right:0}
  .detail-grid>div:nth-last-child(-n+2){border-bottom:0}}

/* ---- Journey: tighter, more editorial ---- */
.journey{margin-top:1.4rem}
.journey li{font-size:.83rem;font-weight:700}
.journey b{border-width:1.5px}
@media(min-width:880px){.journey{gap:0}.journey li{font-size:.78rem;padding:0 .3rem}.step-state{font-size:.68rem}}

/* ---- Next action already reads as a panel; sharpen the institutional tone ---- */
.action-panel{position:relative;border:1px solid var(--navy-deep,var(--navy));overflow:hidden}
.action-panel:before{content:'';position:absolute;right:-3rem;top:-3rem;width:11rem;height:11rem;border:1px solid #ffffff14;border-radius:50%}
.action-panel:after{content:'';position:absolute;right:-1.4rem;top:-1.4rem;width:7rem;height:7rem;border:1px solid #ffffff14;border-radius:50%}
.action-panel h2{font-weight:600}

/* ---- Important dates: compact bordered card ---- */
.dates-card{border:1px solid var(--line);background:var(--paper);padding:1.3rem 1.4rem}
.dates-card h2{margin-bottom:0}
.date-list{margin:.9rem 0 0}
.date-list div{padding:.5rem 0;border-bottom:1px solid var(--line)}
.date-list div:last-child{border-bottom:0}

/* ---- Help card: polished, never a dead link ---- */
.help-card,.id-card-card{border:1px solid var(--line);background:var(--paper);padding:1.3rem 1.4rem}
.help-card .status{margin:.2rem 0 .5rem}
.help-note{margin:0}
.help-card .button,.id-card-card .button{margin-top:.6rem}
.help-card .button{text-transform:uppercase;letter-spacing:.04em;font-size:.82rem}

/* ---- Portal services: structured cards, not flat table rows ---- */
.service-list{border-top:0;gap:.9rem;margin-top:1.5rem}
.service-item{border:1px solid var(--line);background:var(--paper);border-radius:2px;padding:1.3rem 1.35rem 1.3rem 1.5rem;position:relative}
.service-item:before{content:'';position:absolute;left:0;top:1.35rem;bottom:1.35rem;width:3px;background:var(--gold-light)}
.service-head h3{font-size:1.05rem}
.service-state{padding:.2rem .55rem;border:1px solid var(--line);border-radius:999px;background:#fbfaf5}
@media(min-width:680px){.service-item:nth-child(odd){border-right:1px solid var(--line);padding-right:1.35rem}}

/* ---- Finance unavailable: compact, no giant empty block ---- */
#finances .empty{border:1px solid var(--line);background:var(--paper);padding:1.1rem 1.3rem;margin-top:1.2rem;max-width:60ch}

/* ---- Documents: controlled institutional list, not a bare underline ---- */
.document-list{list-style:none;margin:1rem 0 0;padding:0;border:1px solid var(--line);background:var(--paper)}
.document-item{padding:.95rem 1.1rem;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.document-item:last-child{border-bottom:0}
.document-item-main{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;min-width:0}
.document-item .label{font-weight:700}
.document-item .state{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.document-action{min-height:36px;padding:.4rem .9rem;font-size:.8rem}
.document-action-pending{font-size:.8rem}
.document-item-note{flex-basis:100%;margin:0;font-size:.88rem}
.document-replace{display:grid;gap:.5rem;justify-items:start}

/* ---- Right rail: purposeful, no empty column ---- */
.aside-column{display:flex;flex-direction:column;gap:1.6rem}
.aside-column .section{padding:0;border-bottom:0}

/* ---- Footer: compact institutional line ---- */
.site-footer{padding:1.15rem 0}
.site-footer .wrap{font-size:.78rem}

/* ---- Mobile ordering: Next Action early, Important Dates follows, single-column flow ---- */
@media(max-width:779px){
  .main-column,.aside-column{display:contents}
  .main-grid{display:flex;flex-direction:column}
  .m-order-1{order:1}.m-order-2{order:2}.m-order-3{order:3}.m-order-4{order:4}.m-order-5{order:5}
  .m-order-6{order:6}.m-order-7{order:7}.m-order-8{order:8}.m-order-9{order:9}.m-order-10{order:10}
}

/* ---- Mobile: strong masthead identity, compact single-column flow ---- */
@media(max-width:560px){
  .site-header .header-inner{min-height:82px}
  .brand-crest{width:48px;height:48px}
  .brand-copy{font-size:1.02rem}
  .brand-context{display:none}
  .hero{padding:2.2rem 0 1.7rem}
  .hero-shell{border:0;box-shadow:none;background:transparent}
  .hero-copy,.hero-aside{padding:0}
  .campus-visual{height:150px;margin-bottom:1rem}
  .detail-grid>div{padding:.75rem .9rem}
  .service-item{padding:1.05rem}
  .document-item{padding:.85rem .9rem}
}

/* ---- Typography polish: restrained hierarchy, resolve thin/ambiguous UI weights ----
   Hanken Grotesk and Spectral ship as two static weights each (Regular/Bold, Regular/Semibold) —
   neither family is a variable font, so any requested weight within 400-600 (Hanken) or 400-500
   (Spectral) renders identical Regular glyphs, and 601-699 is an unmatched gap. Text below is
   routed to the genuine bold/semibold face wherever real visual weight is intended. */

/* Major section headings: distinct scale from secondary/card headings, desktop cap lowered
   from the base h2's 33.6px ceiling toward a more restrained institutional size. */
#application-detail-title,#journey-title,#services-title,#finance-title,#requirements-title{
  font-size:clamp(1.5rem,3vw,1.8rem);
}

/* Secondary/card headings ("Important dates", "Admissions support", "Student ID Card") no
   longer share the major section heading's h2 rule; routed to Spectral's real semibold face. */
#dates-title,#support-title,#card-title{
  font-size:1.25rem;
  font-weight:600;
}

/* Sidebar/card body copy: distinct from primary article body so narrow cards don't feel loose. */
.dates-card p,.help-card p,.id-card-card p{
  font-size:.9375rem;
  line-height:1.5;
}

/* Desktop masthead: modest presence increase, header height barely changes. */
@media(min-width:1050px){
  .site-header .header-inner{min-height:92px}
  .brand-crest{width:60px;height:60px}
  .brand-copy{font:600 1.42rem/1.15 var(--serif)}
  .brand-copy .brand-product{font-size:.82rem;letter-spacing:.16em}
  .brand-context{font-size:.78rem}
}

/* Application reference: deliberate wrapping at the UUID's natural hyphen boundaries,
   never overflowing, never truncated. Targets the reference field specifically (always the
   last item in both the hero metadata row and the application-summary detail grid). */
.hero-meta>div:last-child strong,
.detail-grid>div:last-child dd{
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}

/* Metadata label/value pairs: real bold weight, and labels lifted off the sub-12px floor. */
.hero-meta span{font-size:.75rem}
.hero-meta strong{font-weight:700}
.list .label{font-weight:700}

/* Eyebrow labels: moderate tracking (was .17em). */
.eyebrow{letter-spacing:.11em}