/* A shared motion language for the opening, navigation and controls. */
:root{--para-motion-fast:180ms;--para-motion-ease:cubic-bezier(.25,.1,.25,1)}

/* The HTML placeholder shares the live layout and fades into the first render. */
.portal-ui{--skeleton-ink:color-mix(in srgb,var(--ui-text) 10%,var(--ui-surface));}
.startup-placeholder{display:none;}
:root[data-portal-browser] .startup-placeholder{display:block;position:fixed;inset:0;z-index:24;overflow:hidden;pointer-events:none;}
#app:not(:empty) + .startup-placeholder{opacity:0;visibility:hidden;}
:root[data-portal-startup="section"] .startup-home,:root[data-portal-startup="home"] .startup-section{display:none;}
.skeleton-line,.skeleton-icon{display:block;background:var(--skeleton-ink,var(--ui-border));}
.skeleton-line{width:100%;height:10px;border-radius:999px;}
.skeleton-line.is-short{width:42%;}
.skeleton-line.is-medium{width:68%;}
.skeleton-line.is-title{width:82%;height:16px;}
.skeleton-icon{width:44px;height:44px;flex:0 0 auto;border-radius:12px;}
.skeleton-stack{display:grid;gap:8px;min-width:0;}
.startup-brand{display:flex;align-items:center;gap:12px;}
.startup-brand>.skeleton-stack{width:106px;}
.startup-brand .skeleton-icon{background:var(--ui-tint);}
.startup-nav{display:grid;gap:6px;}
.startup-nav>.skeleton-line{margin-bottom:3px;}
.startup-nav-row{display:flex;align-items:center;gap:11px;min-height:44px;padding:10px 12px;border:1px solid var(--ui-border);border-radius:12px;}
.startup-nav-row::before,.startup-nav-row::after{content:'';background:var(--skeleton-ink,var(--ui-border));border-radius:5px;}
.startup-nav-row::before{width:20px;height:20px;}
.startup-nav-row::after{width:54%;height:9px;}
.startup-install{display:flex;align-items:center;gap:10px;padding:14px 12px;border-radius:12px;background:var(--ui-tint);}
.startup-install .skeleton-stack{flex:1;}
.startup-controls{display:flex;gap:8px;margin-left:auto;}
.startup-controls .skeleton-icon{background:var(--ui-subtle);border:1px solid var(--ui-border);}
.startup-controls .skeleton-icon:last-child{border-radius:50%;}
.startup-menu{display:none;}
.startup-date{width:112px;}
.startup-hero>.skeleton-stack{width:min(70%,300px);}
.startup-hero .skeleton-line.is-title{height:24px;}
.startup-placeholder .home-layout .hero .startup-hero-button{width:146px;}
.startup-placeholder .quick>.skeleton-stack{width:min(100%,144px);flex:0 1 144px;}
.subject-card>.skeleton-stack{width:min(100%,144px);}
.startup-placeholder .quick>.skeleton-icon,.subject-grid[data-startup-content] .skeleton-icon{background:var(--ui-tint);}
.startup-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;margin-bottom:16px;}
.startup-section-head .skeleton-line:first-child{width:min(55%,205px);height:14px;}
.startup-section-head .skeleton-line:last-child{width:min(34%,124px);}
.startup-count{width:clamp(100px,19vw,156px);}
.skeleton-due-row{display:flex;align-items:center;gap:12px;min-height:62px;padding:12px 0;border-top:1px solid var(--ui-border);}
.skeleton-due-row>.skeleton-icon{width:58px;height:36px;}
.skeleton-due-row>.skeleton-stack{width:min(74%,280px);}
.startup-reminder{min-height:42px;}
.startup-news .announcement-compact>.skeleton-line{max-width:84px;}
.startup-news .announcement-compact>.skeleton-stack{gap:10px;}
.startup-news .skeleton-line.is-title{max-width:330px;}
.startup-placeholder .right-note.startup-contact{display:flex;align-items:center;gap:12px;}
.startup-contact>.skeleton-stack{width:min(78%,380px);}
.startup-section{display:grid;gap:16px;}
.startup-section-title{width:min(65%,300px);margin-bottom:12px;}
.startup-section>.panel{min-height:108px;padding:20px;align-content:center;}
.skeleton-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@media(min-width:761px){
 .startup-hero{--skeleton-ink:color-mix(in srgb,#fff 33%,transparent);}
 .startup-placeholder .home-layout .hero .startup-hero-button{background:color-mix(in srgb,#fff 24%,transparent);}
}
@media(max-width:760px){
 .startup-placeholder .startup-sidebar{display:none;}
 .startup-menu{display:block;background:var(--ui-subtle);border:1px solid var(--ui-border);}
 .startup-date{width:min(72px,21vw);margin-inline:auto;}
 .startup-controls{margin-left:0;}
 .startup-hero>.skeleton-stack{width:min(86%,300px);}
 .startup-placeholder .home-layout .hero .startup-hero-button{width:100%;}
 .startup-placeholder .quick>.skeleton-icon{width:40px;height:40px;}
 .startup-placeholder .home-layout .quick>.skeleton-stack{flex:none;}
 .startup-section-head{margin-bottom:14px;}
}
@media(max-width:350px){.startup-controls{gap:4px;}}

@media(prefers-reduced-motion:no-preference){
 .startup-placeholder{transition:opacity 220ms ease-out,visibility 0s 220ms;}
 :root[data-portal-browser] [data-launch-part]:not(:focus-within){
  animation:para-launch-assemble 420ms cubic-bezier(.2,.75,.25,1) var(--launch-delay,0ms) backwards;
 }
 [data-launch-part].topbar{--launch-y:-12px;}
 [data-launch-part]:is(.sidebar-top,.sidebar-bottom){--launch-x:-18px;--launch-y:0px;}
 [data-launch-part]:is(.home-deadlines,.home-announcements,.subjects-section){--launch-opacity:.28;--launch-y:12px;}
 .portal-ui :is(.button,.text-button,.close,.theme-toggle,.install,.nav a){transition:background-color var(--para-motion-fast),color var(--para-motion-fast),border-color var(--para-motion-fast),box-shadow var(--para-motion-fast)}
 .portal-ui :is(input,textarea,select){transition:border-color 180ms,box-shadow 180ms}
 .portal-ui .management-chevron{transition:transform 240ms var(--para-motion-ease)}
 .portal-ui dialog[open]::backdrop{animation:para-backdrop-in 240ms var(--para-motion-ease)}
 .portal-ui dialog[open][data-motion-closing]::backdrop{animation:para-backdrop-out 160ms ease forwards}
}
@keyframes para-launch-assemble{
 from{opacity:var(--launch-opacity,0);translate:var(--launch-x,0px) var(--launch-y,18px);}
 to{opacity:1;translate:0 0;}
}
/* Keep the backdrop mounted through BOTH directions of the drawer transition. */
@media(max-width:760px){
 .portal-ui .sidebar{transition:transform 360ms cubic-bezier(.25,.1,.25,1)}
 .portal-ui .menu-backdrop,.portal-ui .sidebar.open~.menu-backdrop{display:block;position:fixed;inset:0;border:0;background:var(--dark-overlay,#0b122038);z-index:25;animation:none}
 .portal-ui .menu-backdrop{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 320ms ease,visibility 0s 360ms}
 .portal-ui .sidebar.open~.menu-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 320ms ease,visibility 0s}
}
@keyframes para-backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes para-backdrop-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .portal-ui *,.portal-ui *::before,.portal-ui *::after,.portal-ui dialog::backdrop{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Height belongs to the disclosure only; no arbitrary max-height or page slides. */
.portal-ui .deadline-more>summary{list-style:none;cursor:pointer;display:block;box-sizing:border-box}
.portal-ui .deadline-more>summary::-webkit-details-marker{display:none}
.portal-ui details[data-motion-id]{overflow-anchor:none}
.portal-ui [data-motion-reordering]{position:relative;z-index:1}
.portal-ui details[data-motion-id]>summary:focus-visible{outline:2px solid var(--ui-brand);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){.portal-ui .work-expand>span{transition:transform 300ms ease}}

/* Feedback stays on the control: existing page, drawer and disclosure motion is unchanged. */
.portal-ui{--para-feedback-ring:color-mix(in srgb,var(--ui-brand) 18%,transparent)}
.portal-ui :is(.button,.text-button,.activity-primary,.activity-secondary,.filter,.theme-toggle,.close,.menu-button,.install,.management-login,.nav a,.quick,.subject-card,.attachment,.activity-file,.subject-file,.subject-download,.announcement-link,.notification-item,.resource-external,.subject-external,.subject-back,.deadline-toggle,summary):focus-visible{
 outline:2px solid var(--ui-brand);outline-offset:3px;
}
.portal-ui :is(.danger,.red){--para-feedback-ring:color-mix(in srgb,var(--ui-danger) 22%,transparent)}
.portal-ui .result-track>span{transform-origin:left center}
.portal-ui .subject-item>.subject-card{border-radius:inherit}
.portal-ui .subject-item>.subject-card:has(+.subject-actions){border-bottom-left-radius:0;border-bottom-right-radius:0}
@media(prefers-reduced-motion:no-preference){
 .portal-ui :is(.button,.text-button,.activity-primary,.activity-secondary,.filter,.theme-toggle,.close,.menu-button,.install,.management-login,.nav a,.subject-card,.subject-directory-card,.subject-directory-card>a,.attachment,.activity-file,.subject-file,.subject-download,.announcement-link,.notification-item,.resource-external,.subject-external,.subject-back,.deadline-toggle,summary,.activity-radio,.file-drop,.reference-file-drop){
  transition:background-color 180ms var(--para-motion-ease),color 180ms var(--para-motion-ease),border-color 180ms var(--para-motion-ease),box-shadow 180ms var(--para-motion-ease),filter 180ms var(--para-motion-ease);
 }
 .portal-ui .quick{transition:background-color 180ms,border-color 180ms,box-shadow 180ms,transform 150ms}
 .portal-ui :is(input,textarea,select){transition:background-color 180ms,border-color 180ms,box-shadow 180ms}
 .portal-ui .activity-radio input{transition:border-color 180ms,border-width 180ms,background-color 180ms}
 .portal-ui .switch span{transition:background-color 180ms}
 .portal-ui .switch span::after,.portal-ui :is(.task-pin-switch,.reference-pin-switch) input::before{transition:left 220ms var(--para-motion-ease)}
}
/* Hover is limited to pointers that can hover; touch keeps a brief colour-only press. */
@media(hover:hover) and (pointer:fine){
 body.portal-ui :is(.button,.activity-primary):not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)):hover{filter:brightness(.94);box-shadow:none}
 body.portal-ui :is(.text-button:where(:not([data-toggle-reminders],.subject-actions .text-button)),.activity-secondary,.filter:where(:not(.subject-tab-row .filter)),.close,.menu-button,.install,.management-login):not(:disabled):not([aria-disabled="true"]):hover{background-color:var(--ui-tint);color:var(--ui-brand);filter:none;box-shadow:none}
 body.portal-ui .reminder-row .text-button[data-toggle-reminders]:not(:disabled):not([aria-disabled="true"]):hover{color:color-mix(in srgb,var(--ui-brand) 80%,var(--ui-text));background:transparent;box-shadow:none;filter:none;}
 body.portal-ui .subject-tab-row .filter:not(:disabled):not([aria-disabled="true"]):hover{background-color:var(--ui-tint);color:var(--ui-brand);box-shadow:none;filter:none;}
 body.portal-ui :is(.nav a,.quick,.subject-card,.attachment,.activity-file,.subject-file,.subject-download,.announcement-link,.notification-item):hover{box-shadow:inset 0 0 0 1px var(--dark-control-border,var(--ui-brand));background-color:var(--ui-tint)}
 body.portal-ui :is(.resource-external,.subject-external,.subject-back,.deadline-toggle,.section-head a,.card-foot a,summary):hover{color:var(--ui-brand);text-decoration:underline;text-underline-offset:4px}
 body.portal-ui :is(.activity-secondary.danger,.text-button.red):hover{background-color:var(--ui-danger-bg);color:var(--ui-danger)}
 /* Subject cards and their text actions use quiet feedback without decorative rings. */
 body.portal-ui .subject-item>.subject-card:hover{box-shadow:none;background-color:color-mix(in srgb,var(--ui-tint) 45%,var(--ui-surface))}
 body.portal-ui .subject-directory-card:hover{border-color:var(--ui-border);box-shadow:none;background-color:color-mix(in srgb,var(--ui-tint) 45%,var(--ui-surface))}
 body.portal-ui .top-actions .theme-toggle:not(:disabled):hover{background:var(--ui-tint);color:var(--ui-brand);filter:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-brand) 20%,transparent);}
 body.portal-ui .subject-actions .text-button:not(:disabled):not([aria-disabled="true"]):hover{color:var(--ui-brand);background:transparent;box-shadow:none;filter:none}
 body.portal-ui .subject-actions .text-button.red:not(:disabled):not([aria-disabled="true"]):hover{color:var(--ui-danger)}
 body.portal-ui .activity-radio:not(:has(input:disabled)):hover{border-color:var(--ui-brand)}
 body.portal-ui :is(.file-drop,.reference-file-drop):not(:has(input:disabled)):hover{background-color:var(--ui-tint);box-shadow:none}
}
body.portal-ui :is(.button,.activity-primary,.activity-secondary,.filter,.theme-toggle,.close,.menu-button):not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)):active{filter:brightness(.90)}
body.portal-ui .subject-tab-row .filter:not(:disabled):not([aria-disabled="true"]):active{background-color:var(--ui-tint);color:var(--ui-brand);box-shadow:none;filter:none;}
body.portal-ui .reminder-row .text-button[data-toggle-reminders]:not(:disabled):not([aria-disabled="true"]):active{color:color-mix(in srgb,var(--ui-brand) 65%,var(--ui-text));background:transparent;box-shadow:none;filter:none;}
body.portal-ui .activity-radio:has(input:focus-visible){outline:2px solid var(--ui-brand);outline-offset:3px}
body.portal-ui :is(.file-drop,.reference-file-drop):focus-within{box-shadow:0 0 0 3px var(--para-feedback-ring)}
body.portal-ui :is(input,textarea,select):not(:disabled):focus-visible{border-color:var(--ui-brand);outline:2px solid var(--ui-brand);outline-offset:2px}

/* Pointer focus stays quiet; keyboard navigation retains its visible focus ring. */
body.portal-ui .subject-directory-card:not(:has(:focus-visible)){outline:none;}
body.portal-ui .subject-directory-card>a:focus:not(:focus-visible),body.portal-ui .subject-item>.subject-card:focus:not(:focus-visible){outline:none;box-shadow:none;}

/* One accessible native file input, with portal chrome instead of browser chrome. */
.portal-ui .portal-file-picker{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;min-width:0;max-width:100%;font:400 13px/20px Manrope,system-ui,sans-serif;}
.portal-ui .portal-file-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 170px;min-height:44px;padding:10px 12px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface);color:var(--ui-brand);font-weight:600;}
.portal-ui .portal-file-button svg{width:20px;height:20px;}
.portal-ui .portal-file-names{flex:1 1 160px;min-width:0;color:var(--ui-muted);overflow-wrap:anywhere;font-weight:400;}
.portal-ui :is(#modal,#main) .portal-file-picker>input[type="file"].portal-file-native{position:absolute;top:0;left:0;display:block;opacity:0;width:170px;max-width:100%;height:44px;min-height:44px;margin:0;padding:0;border:0;cursor:pointer;}
.portal-ui .portal-file-picker:has(input:focus-visible) .portal-file-button{outline:2px solid var(--ui-brand);outline-offset:3px;}
.portal-ui .portal-file-picker.is-disabled{opacity:.5;}.portal-ui .portal-file-picker.is-disabled input{cursor:default;}
@media(hover:hover) and (pointer:fine){.portal-ui .portal-file-picker:has(input:not(:disabled):hover) .portal-file-button{background:var(--ui-tint);border-color:var(--ui-border);}}
.portal-ui #modal textarea[name="requirements"]{min-height:220px;overflow-y:hidden;line-height:22px;}
.portal-ui .ai-file-field{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%;}

/* A single pin switch across task, announcement and material forms. */
.portal-ui #modal .pin-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;margin:0;padding:12px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-subtle);color:var(--ui-text);font:400 14px/20px Manrope,system-ui,sans-serif;cursor:pointer;}
.portal-ui #modal .pin-switch input[type="checkbox"]{appearance:none;position:relative;display:block;width:38px;height:22px;min-height:22px;flex:0 0 38px;margin:0;padding:0;border:0;border-radius:99px;background:var(--dark-control-border,var(--ui-muted));cursor:pointer;}
.portal-ui #modal .pin-switch input[type="checkbox"]:checked{background:var(--dark-primary,var(--ui-brand));}
.portal-ui #modal .pin-switch input::before{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;}
.portal-ui #modal .pin-switch input:checked::before{left:18px;}
.portal-ui #modal .pin-switch input:focus-visible{outline:2px solid var(--ui-brand);outline-offset:3px;}
@media(prefers-reduced-motion:no-preference){.portal-ui #modal .pin-switch input::before{transition:left 180ms;}}

.portal-ui .file-hint{display:block;font:400 12px/18px Manrope,system-ui,sans-serif;color:var(--ui-muted);margin:0;}
.portal-ui #modal .field.file-drop{display:flex;flex-direction:column;gap:8px;background:var(--ui-subtle);border:1px solid var(--ui-border);border-radius:12px;padding:12px;}

/* Reveal the new theme along a rounded wave from the toggle. */
:root[data-theme-wave]::view-transition {pointer-events:none;}
:root[data-theme-wave]::view-transition-old(root),
:root[data-theme-wave]::view-transition-new(root) {
  animation:none;
  mix-blend-mode:normal;
}
:root[data-theme-wave]::view-transition-image-pair(root) {isolation:auto;}
:root[data-theme-wave-capture] *,
:root[data-theme-wave-capture] *::before,
:root[data-theme-wave-capture] *::after {transition:none!important;}
@media (prefers-reduced-motion:no-preference) {
  :root[data-theme-wave]::view-transition-new(root) {
    z-index:1;
    animation:para-theme-wave 580ms linear both;
  }
}
@keyframes para-theme-wave {
  0% {clip-path:var(--theme-wave-0);}
  25% {clip-path:var(--theme-wave-1);}
  50% {clip-path:var(--theme-wave-2);}
  75% {clip-path:var(--theme-wave-3);}
  100% {clip-path:var(--theme-wave-4);}
}

@media (prefers-reduced-motion: no-preference) {
  .portal-ui .reminder-toggle {transition: color 180ms, background-color 180ms;}
  .portal-ui .reminder-toggle.is-ringing .reminder-bell {animation: para-bell-ring 520ms ease-in-out;}
  .portal-ui .reminder-toggle.is-ringing::before,
  .portal-ui .reminder-toggle.is-ringing::after {
    content: "";
    position: absolute;
    inset-block-start: 14px;
    width: 8px;
    height: 16px;
    border-radius: 50%;
    pointer-events: none;
    animation: para-bell-wave 460ms ease-out 45ms both;
  }
  .portal-ui .reminder-toggle.is-ringing::before {--bell-wave-x: -5px; inset-inline-start: 10px; border-inline-start: 1.5px solid currentColor;}
  .portal-ui .reminder-toggle.is-ringing::after {--bell-wave-x: 5px; inset-inline-end: 10px; border-inline-end: 1.5px solid currentColor;}
  @keyframes para-bell-ring {
    0%, 100% {transform: rotate(0);}
    20% {transform: rotate(17deg);}
    42% {transform: rotate(-14deg);}
    63% {transform: rotate(8deg);}
    81% {transform: rotate(-4deg);}
  }
  @keyframes para-bell-wave {
    from {opacity: 0; transform: scale(.65);}
    32% {opacity: .8;}
    to {opacity: 0; transform: translateX(var(--bell-wave-x)) scale(1.24);}
  }
}