/* DCU ExamHub — unified glass header + greeting.
   The greeting is header content, NOT a separate card. */
.topbar{
  position:sticky!important;top:0;z-index:35;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);
  height:auto!important;min-height:94px;padding:13px clamp(20px,3.6vw,48px)!important;
  background:rgba(246,249,255,.78)!important;
  border-bottom:1px solid rgba(160,180,215,.28)!important;
  box-shadow:0 8px 28px rgba(34,56,95,.055),inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter:blur(24px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,rgba(215,230,255,.2),transparent 42%,rgba(225,216,255,.18));
}
/* Integrated greeting: transparent and borderless so it reads as part of the header. */
.top-greeting{
  position:relative;isolation:isolate;overflow:hidden;flex:1 1 auto;min-width:0;max-width:none;
  display:flex;align-items:center;justify-content:flex-start;gap:clamp(12px,1.6vw,22px);
  min-height:60px;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
  color:#203457;background:transparent!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.top-greeting::before,.top-greeting::after{content:none!important;display:none!important}
.top-greeting-copy{position:relative;z-index:1;min-width:0}
.top-greeting h1{margin:0 0 3px!important;font-size:clamp(20px,1.8vw,27px)!important;line-height:1.12!important;letter-spacing:-.65px!important;font-weight:850!important;color:inherit!important;text-wrap:balance}
.top-greeting h1 span{display:inline-block;font-size:.88em;margin-left:3px}
.top-greeting p{margin:0!important;max-width:64ch;font-size:clamp(12px,.95vw,14px)!important;line-height:1.35!important;color:#52637f!important;overflow-wrap:anywhere}
/* The small illustration has no tile/card of its own. */
.top-greeting-art{position:relative;z-index:1;flex:0 0 auto;display:block;width:auto;height:auto;padding:0;border:0;border-radius:0;font-size:clamp(21px,2vw,29px);line-height:1;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 3px 7px rgba(49,64,110,.12))}
.top-greeting[data-mood="morning"]{color:#74442c}
.top-greeting[data-mood="morning"] p{color:#765449!important}
.top-greeting[data-mood="afternoon"]{color:#16496b}
.top-greeting[data-mood="afternoon"] p{color:#3c6175!important}
.top-greeting[data-mood="evening"]{color:#6b2d54}
.top-greeting[data-mood="evening"] p{color:#754d68!important}
.top-greeting[data-mood="night"]{color:#f8faff}
.top-greeting[data-mood="night"] p{color:#e0e8ff!important}
.header-actions{position:relative;z-index:1;flex:0 0 auto;gap:9px!important}
.topbar .datepill,.topbar .connection{white-space:nowrap}
body.theme-dark .topbar{
  background:rgba(12,23,41,.82)!important;border-bottom-color:rgba(133,163,205,.22)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.15),inset 0 1px 0 rgba(229,238,255,.045);
}
body.theme-dark .topbar::before{background:linear-gradient(105deg,rgba(54,84,130,.17),transparent 42%,rgba(91,66,130,.15))}
body.theme-dark .top-greeting,body.theme-dark .top-greeting[data-mood="morning"],body.theme-dark .top-greeting[data-mood="afternoon"],body.theme-dark .top-greeting[data-mood="evening"],body.theme-dark .top-greeting[data-mood="night"]{color:#f3f7ff}
body.theme-dark .top-greeting p,body.theme-dark .top-greeting[data-mood="morning"] p,body.theme-dark .top-greeting[data-mood="afternoon"] p,body.theme-dark .top-greeting[data-mood="evening"] p,body.theme-dark .top-greeting[data-mood="night"] p{color:#cbd8ee!important}
body.theme-dark .top-greeting-art{filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
@media(min-width:761px){
  .topbar .mini-brand{display:none!important}
  .top-greeting{margin-right:auto!important}
}
@media(min-width:761px) and (max-width:1100px){
  .topbar{padding-left:18px!important;padding-right:18px!important;gap:12px}
  .top-greeting{min-height:58px;gap:12px}
  .top-greeting-art{font-size:23px}
  .top-greeting h1{font-size:21px!important}
  .top-greeting p{font-size:12px!important}
  .header-actions{gap:6px!important}
  .datepill,.connection{padding:7px 9px!important;font-size:11px!important}
}
@media(max-width:760px){
  /* Brand/actions and greeting share one continuous header surface. */
  .topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "greeting greeting";align-items:center;gap:8px 10px!important;min-height:0!important;padding:max(9px,env(safe-area-inset-top)) 13px 10px!important}
  .mini-brand{grid-area:brand;display:flex!important;min-width:0;max-width:100%;overflow:hidden}
  .header-actions{grid-area:actions;gap:5px!important}
  .top-greeting{grid-area:greeting;max-width:none;width:100%;min-height:44px;gap:10px;padding:0 2px!important}
  .top-greeting h1{font-size:18px!important;line-height:1.12!important;margin-bottom:2px!important;letter-spacing:-.35px!important}
  .top-greeting p{font-size:11.5px!important;line-height:1.3!important;max-width:42ch}
  .top-greeting-art{font-size:21px}
  .topbar .datepill{display:none!important}
  .topbar .connection{font-size:11px!important;padding:6px 8px!important}
  .topbar .iconbutton{width:36px!important;height:36px!important}
}
@media(max-width:370px){
  .topbar{padding-left:9px!important;padding-right:9px!important}
  .mini-brand{font-size:15px!important;gap:6px!important}
  .mini-brand img{width:32px!important;height:32px!important}
  .top-greeting{gap:8px}
  .top-greeting h1{font-size:17px!important}
  .top-greeting p{font-size:10.5px!important}
  .top-greeting-art{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.top-greeting{transition:none!important}}

/* Hard override for the previous layout: one real header surface only. */
.topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: clamp(12px, 1.8vw, 26px) !important;
  border-radius: 0 !important;
}
.topbar > .top-title { display: none !important; }
.topbar > .top-greeting,
.topbar > .integrated-greeting,
.topbar > #headerGreeting {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.topbar .top-greeting-copy { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.topbar .top-greeting h1,
.topbar .top-greeting p { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.topbar .top-greeting-art { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* Any old Dashboard greeting left after integration is hidden, never rendered as a second card. */
#dashboard > .welcome:has(h1) { display: none !important; }

@media (min-width: 761px) {
  .topbar { min-height: 96px !important; padding: 14px clamp(20px, 3.6vw, 48px) !important; }
  .topbar .top-greeting { min-height: 64px !important; }
  .topbar .top-greeting h1 { font-size: clamp(21px, 1.9vw, 28px) !important; }
  .topbar .top-greeting p { font-size: clamp(12px, .95vw, 14px) !important; }
}
@media (max-width: 760px) {
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "brand actions" "greeting greeting" !important;
    gap: 8px 10px !important;
    min-height: 0 !important;
    padding: max(9px, env(safe-area-inset-top)) 13px 11px !important;
  }
  .topbar > .mini-brand { grid-area: brand !important; display: flex !important; min-width: 0 !important; }
  .topbar > .header-actions { grid-area: actions !important; justify-self: end !important; }
  .topbar > .top-greeting,
  .topbar > .integrated-greeting,
  .topbar > #headerGreeting { grid-area: greeting !important; width: 100% !important; min-height: 42px !important; }
  .topbar .datepill { display: none !important; }
}
body:not(.theme-dark) .topbar .top-greeting[data-mood="night"] { color: #203457 !important; }
body:not(.theme-dark) .topbar .top-greeting[data-mood="night"] p { color: #52637f !important; }