@font-face {
  font-family: Montserrat;
  src: url("/brand/Montserrat.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-synthesis: none;
  font-family: Montserrat, sans-serif;
  color: #222a35;
  background: var(--page-bg);
  --page-bg: #f4f7fb;
  --ink: #222a35;
  --muted: #495970;
  --line: #dce5f1;
  --accent: #0039a6;
  --accent-dark: #002b5b;
  --sidebar-width: 216px;
  --radius: 12px;
  --card-symbol-opacity: .095;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
button, input, textarea, select { margin: 0; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #a34e70; outline-offset: 3px;
}
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 3;
  display: flex; flex-direction: column; background: #fff; color: #fff; padding: 24px 14px 18px;
}
.sidebar nav { display: grid; gap: 5px; }
.nav-link { display: flex; align-items: center; gap: 11px; color: #d3cddb; padding: 12px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 540; }
.nav-link .icon { width: 18px; height: 18px; color: #b2a7c4; }
.nav-link:hover { color: white; background: #373246; }
.nav-link.active { background: #4a384d; color: #fff; }
.nav-link.active .icon { color: #efb7cd; }
.nav-link b { margin-left: auto; background: #a65574; color: white; padding: 2px 6px; border-radius: 6px; font-size: 11px; }

.workspace { margin-left: var(--sidebar-width); }
.topbar { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 34px; background: #fff; border-bottom: 1px solid var(--line); }

main { max-width: 1500px; padding: 28px 34px 42px; margin: 0 auto; outline: none; }
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: 189px; display: flex; align-items: center; color: #fff; border-radius: 17px; background: linear-gradient(106deg, #542940 0%, #71334e 58%, #893e5d 100%); }
.hero-content { padding: 24px 33px 28px; position: relative; z-index: 1; }
.hero h1 { margin: 8px 0 8px; font-size: clamp(29px, 3.4vw, 49px); line-height: 1.08; letter-spacing: -.04em; font-weight: 720; }

.document-icon, .event-icon { display: grid; place-items: center; flex: 0 0 auto; width: 35px; height: 35px; border-radius: 9px; background: var(--tint, #f3e8f0); color: var(--shade, #81334e); }
.document-icon .icon { width: 18px; height: 18px; }

.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.inline-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
h2 { font-size: 20px; font-weight: 710; line-height: 1.25; letter-spacing: -.02em; }
.section-heading h2 { font-size: 23px; }
.count { font-size: 11px; white-space: nowrap; background: #eeebf2; color: #655a75; padding: 4px 8px; font-weight: 670; border-radius: 6px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 7px 12px; border: 1px solid #ddd7e4; background: #fff; border-radius: 8px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.button:hover { border-color: #ae8b9e; background: #faf5f8; }
.button .icon { width: 16px; height: 16px; }
.button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.filter-row { display: flex; gap: 8px; margin-bottom: 13px; }
.filter-row :is(.search, .segmented),
.form-field :is(input, textarea),
.dropdown-trigger {
  min-height: 37px; background-color: var(--field-surface, #fff);
  border: 1px solid transparent; border-radius: 9px;
}
.search { display: flex; align-items: center; gap: 7px; min-width: 120px; flex: 1; padding: 0 10px; }
.search .icon { width: 17px; height: 17px; color: #756b84; }
.search input { width: 100%; outline: none; border: 0; padding: 9px 0; background: transparent; font-size: 12.5px; }
.search input:focus-visible { outline: none; }
.search input::placeholder { color: #6d677a; }
.dropdown { position: relative; min-width: 0; }
.dropdown-trigger, .dropdown-option {
  display: flex; align-items: center; justify-content: space-between; gap: 7px;
  width: 100%; text-align: left;
}
.dropdown-trigger { padding: 8px 11px; }
.dropdown-trigger:is(:hover, [aria-expanded=true]) { background-color: #edf4ff; }
.dropdown-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown .icon { width: 15px; height: 15px; color: #315687; }
.dropdown-trigger[aria-expanded=true] .icon { transform: rotate(180deg); }
.dropdown-list {
  position: absolute; z-index: 5; inset: calc(100% + 5px) 0 auto;
  list-style: none; margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain;
}
.dropdown-list, .date-calendar {
  border-radius: var(--radius); background: #fff;
  box-shadow: 0 8px 24px #002b5b1e, 0 1px 4px #002b5b12;
}
.dropdown-list.above { inset-block: auto calc(100% + 5px); }
.dropdown-option { padding: 8px 7px; border: 0; border-radius: 8px; background: transparent; overflow-wrap: anywhere; }
.dropdown-option[aria-selected=true], .calendar-day[aria-pressed=true] { background: #e8f1ff; color: var(--accent); }
:is(.dropdown-option, .calendar-day:not(:disabled), .date-toggle):hover { background: #edf4ff; }
:is(.dropdown-option, .calendar-day, .date-toggle):focus-visible { outline: 1px solid #6689bb; outline-offset: -1px; }
.dropdown-option[aria-selected=false] .icon { visibility: hidden; }
.filter-row .dropdown { flex: 0 1 169px; color: #304b70; font-size: 12.5px; font-weight: 400; }
.filter-row [data-filter=sort] + .dropdown { flex-basis: 141px; }
.segmented { display: flex; padding: 2px; }
.segmented button { display: grid; place-items: center; width: 32px; color: #6b617b; border: 0; border-radius: 5px; background: transparent; }
.segmented .icon { width: 16px; height: 16px; }
.segmented button[aria-pressed=true] { color: #743452; background: #f4eaf0; }

.table-wrap { overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; text-align: left; }
th { padding: 11px 14px; color: #5e586e; font-size: 11.5px; font-weight: 660; background: #faf9fc; white-space: nowrap; }
td { padding: 11px 14px; border-top: 1px solid var(--line); line-height: 1.35; }
td small { display: block; color: var(--muted); margin-top: 3px; font-size: 11.5px; }
.project-table tr:hover td { background: #fdfbfe; }
.project-link { display: flex; align-items: center; gap: 9px; }
:is(.project-link, .doc-link, a.document-row):hover .item-title { color: var(--accent); text-decoration: underline; }
.project-table .track { color: #524b61; }
.doc-link { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 4px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; white-space: nowrap; border-radius: 6px; color: var(--shade); background: var(--tint); font-size: 11px; line-height: 1.2; font-weight: 650; }
.badge i { flex: 0 0 5px; height: 5px; border-radius: 50%; background: currentColor; }
.muted { color: var(--muted); }
.row-arrow { display: grid; place-items: center; width: 26px; height: 28px; color: #746685; }
.row-arrow:hover { background: #f3e8f0; border-radius: 6px; color: var(--accent); }
.row-arrow .icon { width: 15px; height: 15px; }
.project-grid, .architecture-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.project-card { display: flex; flex-direction: column; gap: 8px; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.project-card:hover { border-color: #aa7c94; }
.project-card small { color: var(--muted); font-size: 11px; }
.project-card p { color: #60586d; font-size: 12.5px; line-height: 1.55; margin-bottom: 6px; }
.project-card footer { margin-top: auto; border-top: 1px solid var(--line); padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); }
.project-card footer .icon { width: 15px; height: 15px; color: var(--accent); }

.page-heading { margin: 10px 0 20px; }
.page-heading h1 { color: var(--accent-dark); font-size: clamp(26px, 4vw, 42px); letter-spacing: -.04em; line-height: 1.12; overflow-wrap: anywhere; }
.page-heading p { color: var(--muted); line-height: 1.5; font-size: 14px; margin-top: 8px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: #79556e; font-weight: 620; font-size: 12px; }
.back-link:hover { text-decoration: underline; }
.back-link .icon { width: 16px; height: 16px; }
.tabs { display: flex; flex-wrap: wrap; gap: 3px 20px; border-bottom: 1px solid var(--line); margin-bottom: 17px; }
.tabs a { padding: 11px 2px; border-bottom: 2px solid transparent; color: #61586f; font-weight: 630; font-size: 13px; }
.tabs a:hover, .tabs [aria-current=page] { color: var(--accent); }
.tabs [aria-current=page] { border-color: var(--accent); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-width: 0; }
.panel > h2 { margin-bottom: 14px; }
.document-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(245px, 1fr); align-items: start; gap: 14px; }
.document-list { display: grid; margin-top: 4px; }
.document-row { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); min-height: 56px; padding: 9px 1px; font-size: 12px; }
.document-row:last-child { border-bottom: 0; }
.document-row .document-name { flex: 1; }
.document-row .document-name small { color: var(--muted); display: block; font-size: 11.5px; font-weight: 450; margin-top: 4px; }
.document-row > .icon { width: 15px; height: 15px; color: #7f748c; }
.document-row.disabled .document-icon { background: #f2f0f4; color: #726a80; }
.doc-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 11px 0 19px; }
.form-field { --field-surface: #f0f4fa; display: grid; gap: 5px; margin-bottom: 13px; font-size: 13px; font-weight: 630; }
.form-field b { color: #983a59; }
.form-field small { color: var(--muted); font-size: 11.5px; font-weight: 450; }
.form-field :is(input, textarea, .dropdown) { width: 100%; min-width: 0; font-size: 14px; line-height: 1.35; font-weight: 450; }
.form-field :is(input, textarea) { padding: 9px 12px; }
.form-field .dropdown-trigger { padding: 9px 12px; }
.form-field textarea { resize: vertical; min-height: 62px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.date-control { position: relative; }
.form-field .date-control input[type="text"] { padding-inline-end: 44px; }
.date-control .date-toggle {
  position: absolute; inset: 0 5px 0 auto; margin-block: auto;
  background: transparent; color: #315687;
}
.date-control .date-toggle:is(:hover, [aria-expanded=true]) { background: #e8f1ff; }
.date-calendar {
  position: fixed; inset: auto; width: min(288px, calc(100% - 24px)); margin: 0; padding: 12px;
  border: 0; color: var(--ink); font: inherit; font-weight: 550; overflow: auto; overscroll-behavior: contain;
}
.calendar-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; text-align: center; gap: 6px; }
.calendar-month { color: var(--accent-dark); font-weight: 670; }
.calendar-header [data-month="-1"] .icon { transform: rotate(180deg); }
.calendar-week, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.calendar-week { margin: 10px 0 4px; color: var(--muted); font-size: 12px; }
.calendar-day { min-height: 32px; padding: 2px; border: 0; border-radius: 8px; background: transparent; }
.calendar-day[aria-current=date] { box-shadow: inset 0 0 0 1px #c7d6ed; }
.date-calendar button:disabled { opacity: .4; cursor: default; }
.calendar-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.calendar-actions .button { min-height: 32px; padding-block: 5px; }
.read-field { padding: 10px 0; border-bottom: 1px solid var(--line); }
.read-field p { color: #5a5367; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.form-actions:empty { display: none; }
.form-error { background: #fae9e8; color: #8a3440; border-radius: 7px; padding: 9px 12px; margin-top: 10px; font-size: 12px; line-height: 1.4; }
.timeline { padding: 0; margin: 10px 0 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 9px; border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 12.5px; }
.timeline li:last-child { border-bottom: 0; }
.timeline time, .timeline p { color: var(--muted); font-size: 11.5px; }
.timeline p { margin: 4px 0; }
.side-panel .timeline li { grid-template-columns: auto 1fr; }
.side-panel .timeline time { grid-column: 2; }
.event-icon { width: 29px; height: 29px; }
.event-icon .icon { width: 15px; height: 15px; }
blockquote { margin: 7px 0 1px; padding: 6px 8px; background: #f7f4f8; border-left: 2px solid #c799b1; overflow-wrap: anywhere; white-space: pre-wrap; }
.empty, .empty-note { color: var(--muted); font-size: 13px; line-height: 1.55; }
.empty { background: #fff; border-radius: var(--radius); border: 1px solid var(--line); text-align: center; padding: 30px 15px; }
.panel .empty { border: none; }
.empty h3 { color: var(--ink); margin: 7px 0; }
.empty > .icon { width: 24px; height: 24px; color: var(--accent); }
.empty-note + .button { margin-top: 13px; }
.architecture-card { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.architecture-card h2 { margin: 0; font-size: 17px; }
.architecture-card p, .architecture-foot p { color: #5e576a; font-size: 13px; line-height: 1.55; }
.module-state { margin-top: auto; padding-top: 4px; font-size: 11px; color: var(--muted); font-weight: 640; }
.module-state.implemented { color: #24745c; }
.route-panel, .architecture-foot { margin-top: 14px; }
.route-list > div { padding: 10px 0; border-top: 1px solid var(--line); }
.route-list ol { display: flex; flex-wrap: wrap; gap: 5px 19px; padding: 0; list-style: none; margin: 7px 0 0; color: #665a73; font-size: 12px; }
.route-list li { position: relative; }
.route-list li + li::before { content: "›"; position: absolute; left: -12px; color: #a05276; }
.architecture-foot p + p { margin-top: 6px; }

dialog { width: min(520px, calc(100% - 24px)); border: 1px solid var(--line); border-radius: 15px; padding: 0; background: #fff; color: var(--ink); box-shadow: 0 18px 60px #251a3450; }
dialog::backdrop { background: #24203270; }
.modal-header, .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 17px; border-bottom: 1px solid var(--line); }
.modal-footer { justify-content: flex-end; border-bottom: 0; border-top: 1px solid var(--line); }
.modal-body { padding: 16px 17px 2px; }
.modal-doc { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.icon-button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 7px; background: #f4f0f5; color: #66576e; }
.icon-button .icon { width: 17px; height: 17px; }
.toast { position: fixed; z-index: 5; right: 20px; bottom: 20px; display: flex; gap: 9px; align-items: center; max-width: min(440px, calc(100% - 40px)); padding: 11px 14px; background: #343044; color: #fff; border-radius: 9px; font-size: 13px; box-shadow: 0 9px 25px #20182b35; }
.toast .icon { width: 16px; height: 16px; }

@media (max-width: 1170px) {
  :root { --sidebar-width: 196px; }
  .topbar, main { padding-left: 22px; padding-right: 22px; }
  th, td { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 890px) {
  :root { --sidebar-width: 60px; }
  .sidebar { padding: 15px 7px; }
  .nav-link span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .nav-link { justify-content: center; padding: 11px; position: relative; }
  .nav-link b { position: absolute; right: 2px; top: 1px; font-size: 9px; padding: 1px 4px; }
  .project-grid, .architecture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-layout { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --sidebar-width: 0px; }
  .sidebar { position: relative; width: 100%; flex-direction: row; align-items: center; padding: 7px 12px; gap: 8px; justify-content: space-between; }
  .sidebar nav { display: flex; gap: 2px; }
  .nav-link { padding: 8px 9px; }
  .nav-link span { position: static; clip-path: none; height: auto; width: auto; font-size: 10px; }
  .nav-link .icon { display: none; }
  .topbar, main { padding-left: 12px; padding-right: 12px; }
  .topbar { min-height: 54px; }
  main { padding-top: 13px; }
  .hero { min-height: 155px; }
  .hero-content { padding: 18px; }
  .desktop-break { display: none; }
  .section-heading h2 { font-size: 18px; }
  .section-heading .button { font-size: 11px; padding-inline: 7px; }
  .filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-row .search { grid-column: 1 / -1; }
  .filter-row .segmented { justify-self: end; }
  .panel { padding: 12px; }
  .document-row { flex-wrap: wrap; }
  .document-row .document-name { min-width: 90px; }
  .project-grid, .architecture-grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: auto 1fr; }
  .timeline time { grid-column: 2; }
}

.dashboard-hero { min-height: 174px; }
.dashboard-hero .hero-content { padding-block: 25px; }
.dashboard-hero h1 { font-size: clamp(27px, 3.15vw, 43px); }
.dashboard-hero .hero-action { margin-top: 13px; color: #662f47; background: #fff9fc; border-color: transparent; }
.dashboard-hero .hero-action:hover { background: #f4dbe7; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dashboard-hero + .dashboard-grid { margin-top: 16px; }
.dashboard-panel { scroll-margin-top: 12px; }
.dashboard-panel .count { vertical-align: middle; margin-left: 4px; }
.dashboard-stages { display: grid; }
.stage-line { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; min-height: 45px; padding: 5px 1px; }
.stage-line:last-child { border-bottom: 0; }
.stage-line:hover { background: #faf8fc; }
.stage-line strong { margin-left: auto; font-size: 14px; }
.stage-line .icon { width: 15px; height: 15px; color: var(--muted); }
.work-row { display: flex; align-items: center; gap: 9px; padding: 11px 0; border-top: 1px solid var(--line); }
.work-row:first-child { border-top: 0; padding-top: 0; }
.work-row:last-child { padding-bottom: 1px; }
.work-detail { flex: 1; min-width: 0; }
.work-detail p { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.work-detail a:hover, .evidence-link { text-decoration: underline; }
.work-detail .work-feedback { color: #913e45; }
.document-layout.single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1150px) {
  .dashboard-panel .work-row { flex-wrap: wrap; }
  .dashboard-panel .work-detail { flex: 1 1 calc(100% - 46px); }
}
@media (max-width: 760px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .dashboard-hero .hero-content { padding: 16px; }
  .dashboard-hero { min-height: 143px; }
}


/* Faculty masthead, visual styling and typography. */
body {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: 86px minmax(calc(100vh - 86px), auto);
  grid-template-areas: "masthead masthead" "sidebar workspace";
}
.topbar {
  grid-area: masthead;
  padding: 0 34px 0 28px;
  gap: 18px;
  z-index: 4;
  min-width: 0;
}
.academy-brand { display: flex; align-items: center; gap: 25px; min-width: 0; }
.academy-brand img { display: block; width: 248px; height: 63px; object-fit: contain; object-position: left center; }
.academy-brand strong { color: #0039a6; font-size: 22px; font-weight: 740; border-left: 1px solid #ccd9e8; padding-left: 24px; white-space: nowrap; }
.role-switch:has(select:disabled) { visibility: hidden; }
.role-switch { --field-surface: #f0f4fa; width: 222px; max-width: 100%; min-width: 0; color: #002b5b; font-weight: 630; font-size: 14px; }
.role-switch .dropdown-trigger { min-height: 42px; }
.sidebar {
  grid-area: sidebar;
  position: static; width: auto;
  min-width: 0;
  background: #fff; color: #002b5b; border-right: 1px solid var(--line);
  padding: 24px 13px 18px;
}
.sidebar nav { gap: 5px; }
.nav-link { color: #304b70; font-size: 13.5px; font-weight: 580; position: relative; padding: 12px 10px; border-radius: 7px; }
.nav-link .icon { color: #315c98; }
.nav-link.active, .nav-link:hover { background: #e8f1ff; color: #0039a6; }
.nav-link.active .icon { color: #0039a6; }
.nav-link b { background: #0039a6; }
.workspace { margin-left: 0; grid-area: workspace; min-width: 0; }
main { max-width: 1600px; padding: 24px 32px 35px; }

.hero, .hero.dashboard-hero {
  min-height: 144px; border-radius: 13px;
  background: var(--accent) url("/brand/pattern.png") center 57% / cover no-repeat;
}
.hero-content, .dashboard-hero .hero-content { display: flex; gap: 18px; width: 100%; align-items: center; justify-content: space-between; padding: 26px 30px; }
.hero h1, .dashboard-hero h1 { font-size: clamp(25px, 3vw, 42px); letter-spacing: -.035em; line-height: 1.12; font-weight: 730; margin: 0; }
.dashboard-hero .hero-action { margin: 0; min-height: 42px; color: #0039a6; background: #fff; border: 1px solid #fff; }
.dashboard-hero .hero-action:hover { background: #e8f1ff; }
.initiation, .doc-committee { --tint: #eaf1fb; --shade: #294b84; }
.preparation, .doc-office { --tint: #e7f0ff; --shade: #003f9a; }
.execution, .doc-approved { --tint: #e1f2f1; --shade: #126667; }
.closed, .doc-draft { --tint: #edf1f6; --shade: #405267; }
.doc-to-prepare { --tint: #ecebfd; --shade: #51478b; }
.doc-curator { --tint: #e9eff9; --shade: #233f72; }
.doc-customer { --tint: #fff3da; --shade: #6d4d0a; }
.doc-rejected { --tint: #fbeaf0; --shade: #a00f33; }
.doc-rework { --tint: #ffeadf; --shade: #844521; }

.panel, .project-card, .table-wrap { border-color: var(--line); box-shadow: 0 2px 6px #002b5b04; }
.panel { padding: 22px; }
.dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dashboard-grid > :only-child { grid-column: 1 / -1; }
.panel > h2 { margin-bottom: 15px; }
h2 { color: #002b5b; font-weight: 710; letter-spacing: -.025em; }
.panel h3, .item-title { color: var(--ink); font-size: 14px; font-weight: 670; line-height: 1.4; }
.work-detail p, .document-row .document-name small, td small { font-size: 12.5px; color: #495970; font-weight: 500; }
.work-detail .work-feedback { color: #a00f33; }
.document-icon, .event-icon { --tint: #eaf2ff; --shade: #0039a6; }
.document-row.disabled .document-icon { color: #516886; background: #edf2fa; }
.badge { font-size: 12px; font-weight: 640; padding: 5px 8px; border-radius: 5px; }
.button { color: #0039a6; border-color: #c7d6ed; font-size: 13px; font-weight: 660; padding: 8px 11px; }
.button:hover { color: #002b5b; border-color: #5d8bd4; background: #edf4ff; }
.button.primary { color: #fff; border-color: #0039a6; background: #0039a6; }
.button.primary:hover { background: #002b5b; border-color: #002b5b; }
.count, .segmented button[aria-pressed=true] { background: #e6efff; color: #0039a6; }
th { color: #304b70; background: #edf3fb; }
.project-table .track, .row-arrow { color: #304b70; }
.project-table tr:hover td { background: #f6faff; }
.row-arrow:hover, .icon-button { background: #edf4ff; }
.project-card:hover { border-color: #6f98d1; }
.tabs a, .back-link { color: #315687; }
.form-field b { color: #a00f33; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline-color: #0039a6;
}
.search:focus-within, .dropdown-trigger:focus-visible,
.form-field :is(input, textarea):focus-visible {
  background-color: #eaf2ff; outline: 1px solid #6689bb; outline-offset: -1px;
}
.doc-heading { margin-bottom: 22px; }
.form-field { margin-bottom: 16px; font-size: 14px; }
.toast { background: #002b5b; }

@media (max-width: 1050px) {
  :root { --sidebar-width: 184px; }
  main { padding-inline: 22px; }
}
@media (max-width: 890px) {
  :root { --sidebar-width: 57px; }
  .sidebar { padding: 16px 7px; }
  .nav-link { justify-content: center; padding-inline: 10px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  :root { --sidebar-width: 0px; }
  body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "masthead" "sidebar" "workspace"; }
  .topbar { padding: 6px 12px; min-height: 62px; gap: 8px; }
  .academy-brand { gap: 7px; }
  .academy-brand img { width: clamp(82px, 29vw, 142px); height: 42px; }
  .academy-brand strong { padding-left: 7px; font-size: 13px; }
  .role-switch { max-width: 45vw; font-size: 11px; }
  .role-switch .dropdown-trigger { min-height: 34px; padding-inline: 8px; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 4px 8px; }
  .sidebar nav { flex-wrap: wrap; gap: 2px; }
  .nav-link { padding: 8px; }
  .nav-link span { font-size: 11px; }
  main { padding: 12px; }
  .hero, .hero.dashboard-hero { min-height: 114px; }
  .hero-content, .dashboard-hero .hero-content { padding: 16px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .dashboard-hero .hero-action { min-height: 34px; }
  .panel { padding: 14px; }
}

.brand-logos { display: grid; grid-template-columns: 44fr 41.3fr; gap: 14.7%; align-items: center; width: 300px; }
.brand-logos img { width: 100%; height: auto; }
.academy-brand { gap: 21px; }
.academy-brand strong { padding-left: 21px; }

.single-title { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-cell, .document-row .document-name { min-width: 0; }
.project-table { table-layout: fixed; min-width: 740px; }
.project-table:not(:has(.track-column)) { min-width: 600px; }
.project-table .track-column { width: 132px; }
.project-table .stage-column { width: 156px; }
.project-table .document-column { width: 236px; }
.project-table :is(.stage-column, .stage-cell) { padding-inline: 10px; }
.project-table th:last-child { width: 36px; }
.project-table td:last-child { padding-inline: 0; }
.project-table .row-arrow { margin-inline: auto; }
.project-table .badge { width: max-content; max-width: 100%; white-space: normal; overflow-wrap: normal; }
.project-table .stage-cell .badge { white-space: nowrap; }
.doc-link .item-title { overflow-wrap: anywhere; }

@media (max-width: 1279px) {
  .project-table :is(th, td):not(:last-child) { padding-inline: 10px; }
}

@media (min-width: 1280px) {
  .project-table .track-column { width: 17%; }
  .project-table .stage-column { width: 16%; }
  .project-table .document-column { width: 28%; }
}

.hero.dashboard-hero { display: block; padding: 25px 27px 23px; min-height: auto; }
.dashboard-hero .hero-content { padding: 6px 2px 21px; min-height: 74px; }
.dashboard-hero .hero-content:only-child { padding-block: 12px; min-height: 95px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.dashboard-hero .stage-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; text-align: left;
  min-width: 0; min-height: 74px; padding: 13px 15px;
  color: #fff; background: #c9ddff27;
  border: 1px solid #e4f0ff65; border-radius: 10px;
  box-shadow: inset 0 1px 1px #ffffff3e, 0 6px 18px #0525652d;
  -webkit-backdrop-filter: blur(13px) saturate(125%);
  backdrop-filter: blur(13px) saturate(125%);
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.dashboard-hero .stage-card:hover { background: #dceaff37; transform: translateY(-2px); box-shadow: inset 0 1px 1px #ffffff54, 0 8px 20px #0525654f; }
.dashboard-hero .stage-card:focus-visible { outline-color: white; }
.stage-card strong { display: block; font-size: 25px; font-weight: 740; line-height: 1; letter-spacing: -.04em; }
.stage-card small { display: block; margin-top: 5px; font-size: 13px; font-weight: 560; }
.dashboard-hero .stage-symbol {
  position: absolute; z-index: -1; inset-block-start: 50%; inset-inline-end: 22px;
  display: grid; place-items: center; width: 64px; height: 64px;
  transform: translateY(-50%); opacity: var(--card-symbol-opacity); color: #d7e7ff; pointer-events: none;
}
.dashboard-hero .stage-symbol .icon { width: 58px; height: 58px; }
.hero + .dashboard-grid { margin-top: 17px; }
.work-row > .button { flex: 0 0 auto; }

.project-card { display: block; padding: 0; overflow: hidden; border-radius: 12px; transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease; }
.project-card:hover, .project-card:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 22px #002b5b27; }
.project-cover {
  display: flex; justify-content: flex-end; align-items: flex-start; position: relative; isolation: isolate; overflow: hidden; height: 133px; padding: 11px;
  background: #eef2f6 url("/brand/pattern-light.png") center / cover no-repeat;
}
.project-photo { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-cover img { transition: transform 220ms ease; }
.project-card:hover img, .project-card:focus-visible img { transform: scale(1.04); }
.project-cover .badge { box-shadow: 0 2px 9px #0003; }
.project-card-body { padding: 12px 13px; }
.project-card-body footer { border: 0; padding-top: 7px; font-size: 12px; }

.hero.project-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
  min-height: clamp(176px, 23vw, 290px);
  margin: 12px 0 10px; padding: clamp(16px, 2.4vw, 30px);
  cursor: pointer;
}
.project-hero .project-photo {
  inset: 0 0 auto auto;
  width: auto;
  height: auto;
  max-width: min(100%, 48rem);
  max-height: 100%;
  object-fit: contain;
  mask-image: linear-gradient(to right, transparent, #000 35%),
    linear-gradient(to bottom, #000e 25%, #0006 65%, transparent);
  mask-composite: intersect;
  transition: opacity 180ms ease;
}
.project-hero:has(.project-hero-corner[aria-expanded="true"]) .project-photo { opacity: 0; }
.project-hero .hero-content {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 11px; min-width: 0; padding: 0;
}
.project-hero-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.project-hero-corner {
  position: absolute; z-index: 2; right: 0; bottom: 0;
  width: 44px; height: 44px; padding: 0; border: 0; background: none;
}
.project-hero-corner::before, .project-hero-corner::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px;
  pointer-events: none;
}
.project-hero-corner::before {
  background: var(--page-bg);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 24% 96%, 45% 85%, 64% 68%, 80% 47%, 92% 22%);
}
.project-hero-corner::after {
  background: #94b1e0;
  clip-path: polygon(100% 0, 95% 28%, 84% 53%, 67% 74%, 46% 90%, 24% 98%, 0 100%,
    24% 92%, 43% 80%, 61% 64%, 76% 44%, 89% 20%);
  transition: filter 160ms ease;
}
.project-hero:hover .project-hero-corner::after, .project-hero-corner:focus-visible::after { filter: brightness(1.14); }
.project-hero-corner:focus-visible { outline: none; }
.project-hero:has(.project-hero-corner:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.project-description {
  max-width: min(66ch, calc(100% - 28px)); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
  animation: rise 180ms ease both;
}
.hero-tag {
  --shade: #fff; --tint: #e9f2ff2e;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  max-width: 100%; white-space: normal;
}

.animate-dashboard .dashboard-hero h1 { animation: rise 165ms cubic-bezier(.2,.65,.25,1) both; }
.animate-dashboard .dashboard-stats, .animate-dashboard .dashboard-grid > .panel { animation: rise 195ms 22ms cubic-bezier(.2,.65,.25,1) both; }
.animate-dashboard .dashboard-grid > .panel:nth-child(2) { animation-delay: 48ms; }
.animate-dashboard .dashboard-grid > .panel:nth-child(3) { animation-delay: 72ms; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.screen-loading { opacity: 0; animation: placeholders-in 140ms 140ms ease-out both; }
.loading-hero, .loading-panels i { display: block; border-radius: 12px; background: #e5ecf7; }
.loading-hero { height: 193px; }
.loading-panels { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.loading-panels i { height: 170px; }
@keyframes placeholders-in { to { opacity: 1; } }

@media (max-width: 620px) {
  .project-hero .project-photo { mask-image: linear-gradient(to bottom, #000e 25%, #0006 65%, transparent); }
  .academy-brand { gap: 7px; }
  .brand-logos { width: clamp(107px, 36vw, 156px); }
  .academy-brand strong { display: none; }
  .hero.dashboard-hero { padding: 15px 12px 12px; }
  .dashboard-hero .hero-content { min-height: 52px; padding: 0 0 12px; }
  .dashboard-stats { gap: 5px; }
  .dashboard-hero .stage-card { justify-content: center; min-height: 73px; padding: 10px 3px; text-align: center; }
  .stage-card strong { font-size: 24px; font-weight: 690; }
  .stage-card small { font-size: 11px; }
  .dashboard-hero .stage-symbol { inset-inline-end: -9px; inset-block-start: 24px; }
  .dashboard-hero .stage-symbol .icon { width: 47px; height: 47px; }
  .loading-panels { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .animate-dashboard .dashboard-hero h1, .animate-dashboard .dashboard-stats, .animate-dashboard .dashboard-grid > .panel, .screen-loading { animation: none; }
  .project-description { animation: none; }
  .screen-loading { opacity: 1; }
  .dashboard-hero .stage-card, .project-card, .project-cover img { transition: none; }
  .project-hero .project-photo, .project-hero-corner::after { transition: none; }
  .dashboard-hero .stage-card:hover, .project-card:hover, .project-card:focus-visible,
  .project-card:hover img, .project-card:focus-visible img { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .dashboard-hero .stage-card { background: #154798; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-tag { --tint: #15417b; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.document-list { grid-template-columns: minmax(0, 1fr); }
.document-row { min-width: 0; }

.participant-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.work-groups { display: grid; gap: 8px; }
.work-group { border: 1px solid var(--line); border-radius: 9px; }
.work-group:is([data-group="active"], [data-group="review"]) { --group-fill: #e8f1ff; }
.work-group[data-group="upcoming"] { --group-fill: #f0f3fa; }
.work-group[data-group="complete"] { --group-fill: #e7f3f0; }
.work-group > summary {
  display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  min-height: 42px; padding: 8px 12px; border-radius: 8px;
  color: var(--accent-dark); background: var(--group-fill);
}
:is(.work-group, .work-item) > summary::-webkit-details-marker { display: none; }
:is(.work-group, .work-item) > summary:focus-visible { outline: 1px solid #6689bb; outline-offset: -1px; }
.work-group > summary .item-title { color: inherit; }
:is(.work-group, .work-item) > summary > .icon { width: 15px; height: 15px; }
.work-group[open] > summary { border-radius: 8px 8px 0 0; }
:is(.work-group, .work-item)[open] > summary > .icon { transform: rotate(90deg); }
.work-group-count { margin-inline-start: auto; font-size: 12px; font-weight: 670; font-variant-numeric: tabular-nums; }
.work-group-body { padding: 12px; }
.work-group .work-row { flex-wrap: wrap; }
.work-group .work-detail { flex: 1 1 calc(100% - 44px); overflow-wrap: anywhere; }
.work-group .work-row > .button { margin-inline-start: 44px; }

.participant-task-stack { display: grid; min-width: 0; gap: 10px; }
.participant-task-stack, .dashboard-grid .work-group[id] { scroll-margin-top: 12px; }
.work-item + .work-item { border-block-start: 1px solid var(--line); }
.work-item > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) fit-content(46%) 15px; align-items: center; gap: 7px 9px;
  min-height: 46px; padding-block: 8px; border-radius: 6px; list-style: none; cursor: pointer;
}
.work-item > summary:hover .item-title { color: var(--accent); }
.work-item > summary .item-title { overflow-wrap: anywhere; }
.work-item > summary > .icon { grid-column: 3; grid-row: 1; color: var(--accent); }
.work-item-badges { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 4px; }
.work-item-badges:empty { display: none; }
.work-item-badges .badge { max-width: 100%; white-space: normal; }
.work-item-body { padding-bottom: 12px; }
.work-item-body > .button { margin-top: 9px; }
.dashboard-grid .work-group:has(.work-item) > .work-group-body { padding-block: 2px; }
@media (min-width: 891px) {
  .dashboard-hero.participant + .dashboard-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}

.project-status-heading, .project-monitoring-heading {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
}
.project-status-heading { margin-bottom: 18px; }
.project-status time { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.project-progress-number { color: var(--accent); font-size: 38px; font-weight: 730; line-height: 1.1; }
.project-progress-number span { font-size: .57em; }
.project-progress-caption { margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.project-progress {
  --progress-track: #e8eff7; --progress-fill: #298a95;
  appearance: none; display: block; width: 100%; height: 8px; margin: 12px 0; overflow: hidden;
  border: 0; border-radius: 8px; background: var(--progress-track); accent-color: var(--progress-fill);
}
.project-progress::-webkit-progress-bar { background: var(--progress-track); }
.project-progress::-webkit-progress-value { border-radius: 8px; background: var(--progress-fill); }
.project-progress::-moz-progress-bar { border-radius: 8px; background: var(--progress-fill); }
.project-monitoring { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.project-monitoring-heading { margin-bottom: 12px; color: var(--accent-dark); font-size: 13px; font-weight: 650; }
.project-monitoring-heading time { font-weight: 400; }
.project-monitoring .project-progress { height: 6px; margin: 8px 0 12px; }
.project-status-values { margin: 0; font-size: 13px; line-height: 1.5; }
.project-status-values > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 12px; }
.project-status-values > div + div { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.project-status-values dt { color: var(--muted); overflow-wrap: anywhere; }
.project-status-values dd { margin: 0; color: var(--accent-dark); font-weight: 650; text-align: end; white-space: nowrap; }
.project-progress-details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 6px; }
.project-progress-details summary {
  display: flex; align-items: center; gap: 7px; width: fit-content; min-height: 36px; border-radius: 6px;
  color: var(--accent); font-size: 13px; font-weight: 650; list-style: none; cursor: pointer;
}
.project-progress-details summary::-webkit-details-marker { display: none; }
.project-progress-details summary .icon { width: 15px; height: 15px; }
.project-progress-details[open] summary .icon { transform: rotate(90deg); }
.project-progress-details[open] .project-status-values { margin-top: 5px; }
.project-status-fields { display: grid; gap: 12px; margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.project-status-fields dt { color: var(--muted); font-size: 12.5px; }
.project-status-fields dd { margin: 4px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.work-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.work-detail .work-evidence { margin-top: 9px; }
.work-detail .evidence-link { color: var(--accent); text-decoration-color: #758db2; text-underline-offset: 3px; }
.due-on-time { --tint: #e3f4e9; --shade: #246344; }
.due-late { --tint: #fff3da; --shade: #6d4d0a; }
.due-overdue { --tint: #fbeaf0; --shade: #a00f33; }

.gantt-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.gantt-heading .gantt-fullscreen { width: 36px; min-height: 36px; padding: 0; }
.gantt-heading .icon { width: 18px; height: 18px; }
.gantt-panel[data-expanded], .gantt-panel:fullscreen {
  position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column;
  width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0;
  padding: clamp(12px, 2vw, 24px); overflow: auto; overscroll-behavior: contain;
  border: 0; border-radius: 0; background: #fff; color: var(--ink);
}
.gantt-panel[data-expanded] #calendar-plan, .gantt-panel:fullscreen #calendar-plan { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.gantt-panel[data-expanded] .gantt-scroll, .gantt-panel:fullscreen .gantt-scroll { flex: 1 1 auto; min-height: 160px; max-height: none; }
body:has(.gantt-panel[data-expanded]) { overflow: hidden; }
body:has(.gantt-panel[data-expanded]) :is(.topbar, .sidebar, main > :not(.gantt-panel)) { visibility: hidden; }
.gantt-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.gantt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.gantt-group-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.gantt-views { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.gantt-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 15px; }
.gantt-summary > div { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 4px 8px; }
.gantt-summary > div > span:first-child { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.gantt-summary strong { color: var(--accent-dark); font-size: 18px; font-weight: 700; }
.gantt-navigation { display: flex; gap: 4px; }
.gantt-navigation .button:disabled { cursor: default; }
.gantt-navigation [data-gantt-step] { width: 36px; padding-inline: 0; }
.gantt-prev .icon { transform: rotate(180deg); }
:is(.gantt-scales, .gantt-layers) { background: #f1f5fa; border-radius: 8px; }
:is(.gantt-scales, .gantt-layers) button { width: auto; min-height: 33px; padding-inline: 10px; font-size: 12px; font-weight: 640; white-space: nowrap; }
:is(.gantt-scales, .gantt-layers) button:hover { color: var(--accent); }
.gantt-layers button[data-gantt-layer-toggle="critical"][aria-pressed="true"] { background: #fbeaf0; color: #90334e; }
.gantt-scroll { max-width: 100%; max-height: min(62vh, 580px); overflow: auto; scrollbar-gutter: stable; border: 1px solid var(--line); border-radius: 9px; }
.gantt-scroll[data-resizing] { cursor: col-resize; user-select: none; }
.gantt-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gantt-empty { padding: 14px; }
.gantt-board {
  display: grid; grid-template-columns: var(--label-width) var(--calendar-width);
  grid-template-rows: 56px auto; width: max-content; color: var(--accent-dark);
}
.gantt-label-head, .gantt-date-head { position: sticky; top: 0; z-index: 4; background: #edf3fb; border-bottom: 1px solid var(--line); }
.gantt-label-head, .gantt-labels { position: sticky; left: 0; border-right: 1px solid var(--line); }
.gantt-label-head { display: flex; align-items: center; padding: 0 18px 0 12px; z-index: 5; font-size: 12px; font-weight: 670; }
.gantt-column-resizer {
  position: absolute; z-index: 1; inset-block: 0; inset-inline-end: 0; display: grid; place-items: center;
  width: 17px; cursor: col-resize; touch-action: none; color: #6b86ab;
}
.gantt-column-resizer::before { content: ""; width: 5px; height: 15px; border-inline: 1px solid currentColor; }
.gantt-column-resizer:hover, .gantt-scroll[data-resizing] .gantt-column-resizer { background: #dceaff; color: var(--accent); }
.gantt-column-resizer:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gantt-labels { z-index: 3; background: #fff; }
.gantt-date-head > div { display: flex; height: 28px; }
.gantt-date-head span {
  display: grid; place-items: center; flex: none; overflow: hidden; white-space: nowrap;
  padding-inline: 3px; border-right: 1px solid var(--line); font-size: 11px; font-variant-numeric: tabular-nums;
}
.gantt-dates-upper { border-bottom: 1px solid var(--line); font-weight: 670; }
.gantt-dates-lower { color: var(--muted); }
.gantt-result {
  display: flex; align-items: center; gap: 5px; padding-inline: 5px 8px; border-bottom: 1px solid var(--line);
  background: #edf3fb; font-size: 12px; font-weight: 690;
}
.gantt-result > span { min-width: 0; overflow-wrap: anywhere; padding-block: 4px; }
.gantt-label-row { display: flex; border-bottom: 1px solid var(--line); }
.gantt-checkpoint-row { padding-left: 10px; background: #f6f9fd; }
.gantt-checkpoint-context { align-self: center; padding: 5px 8px; color: var(--muted); font-size: 12px; font-weight: 620; overflow-wrap: anywhere; }
.gantt-nested-row { padding-left: 22px; }
.gantt-disclosure {
  display: grid; place-items: center; align-self: center; flex: 0 0 27px; width: 27px; height: 29px; padding: 0;
  border: 0; border-radius: 5px; background: none; color: var(--accent);
}
.gantt-disclosure:hover { background: #dceaff; }
.gantt-disclosure .icon { width: 15px; height: 15px; }
.gantt-label {
  display: grid; align-content: center; gap: 2px; width: 100%; min-width: 0; padding: 6px 8px; border: 0;
  background: transparent; color: var(--ink); text-align: left;
}
.gantt-label .item-title { overflow-wrap: anywhere; line-height: 1.25; font-size: 12px; }
.gantt-owner { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 11px; }
.gantt-row-forecast { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #40516b; font-size: 11px; font-weight: 630; }
.gantt-row-forecast.is-critical { color: #90334e; }
.gantt-label:hover, .gantt-label[aria-pressed="true"] { background: #eaf2ff; }
.gantt-label:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gantt-time {
  /* Keep all timeline layers below the sticky column and calendar header. */
  position: relative; isolation: isolate; overflow: hidden;
  background:
    repeating-linear-gradient(to right, transparent 0 calc(var(--day-width) - 1px), #dce5f195 calc(var(--day-width) - 1px) var(--day-width)),
    repeating-linear-gradient(to right, transparent 0 calc(var(--day-width) * 5), #f1f5fa calc(var(--day-width) * 5) calc(var(--day-width) * 7));
}
.gantt-month-view .gantt-time { background: #f9fbfe; }
.gantt-month-tick { position: absolute; inset-block: 0; border-left: 1px solid var(--line); }
.gantt-row-line { position: absolute; inset-inline: 0; border-bottom: 1px solid var(--line); }
.gantt-row-result { background: #f1f5fabe; }
.gantt-today { position: absolute; inset-block: 0; z-index: 1; border-left: 1px dashed #3869b2; pointer-events: none; }
.gantt-links { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; }
.gantt-links [data-gantt-link] { fill: none; stroke: #6983a5; stroke-width: 1.6; stroke-linejoin: round; marker-end: url(#gantt-arrow); }
.gantt-links [data-gantt-link].is-active { stroke: var(--accent); stroke-width: 2; }
.gantt-links .gantt-plan-link { stroke: #90a4be; }
.gantt-links .gantt-forecast-link { stroke: #6b7282; stroke-dasharray: 4 3; }
.gantt-links [data-gantt-link].is-critical { stroke: #a23855; stroke-width: 2; }
.gantt-bar {
  --bar-color: #668cca; position: absolute; z-index: 2; top: calc(var(--bar-y) - 17px); left: var(--bar-left);
  display: grid; place-items: center; width: var(--bar-width); height: 34px; padding: 0; border: 0; background: none;
}
.gantt-bar span { display: block; width: 100%; height: 16px; border-radius: 5px; background: var(--bar-color); }
.gantt-bar.is-critical span { outline: 2px solid #a23855; outline-offset: 1px; }
.gantt-bar:hover span, .gantt-bar[aria-pressed="true"] span { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--bar-color); }
.gantt-bar[data-gantt-draggable] { cursor: grab; touch-action: pan-y; }
.gantt-bar.is-dragging { z-index: 4; cursor: grabbing; transform: translateX(var(--drag-x)); }
.gantt-bar.is-dragging::after {
  content: attr(data-drag-days); position: absolute; top: -10px; left: 0; padding: 2px 5px;
  border-radius: 4px; background: var(--accent-dark); color: #fff; font-size: 11px; white-space: nowrap;
}
.gantt-review { --bar-color: #3664ab; }
.gantt-confirmed { --bar-color: #237f81; }
.gantt-returned { --bar-color: #a63a58; }
.gantt-point { left: calc(var(--bar-left) - 17px); width: 34px; }
.gantt-point span { width: 12px; height: 12px; border-radius: 2px; transform: rotate(45deg); }
.gantt-projection { --bar-color: #c1c9d5; z-index: 3; }
.gantt-projection > span { border: 1px dashed #657084; }
.gantt-overlaid { --bar-color: #c1c9d5b8; pointer-events: none; }
.gantt-projection.is-critical > span { border: 2px solid #a23855; outline: none; }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; color: var(--muted); font-size: 11.5px; list-style: none; }
.gantt-legend li { display: inline-flex; align-items: center; gap: 6px; }
.gantt-key { display: inline-block; flex: none; color: #6983a5; }
.gantt-key-work { width: 17px; height: 7px; border-radius: 2px; background: #668cca; }
.gantt-key-point { width: 8px; height: 8px; margin-inline: 3px; border-radius: 1px; background: #668cca; transform: rotate(45deg); }
.gantt-key-link { font-size: 16px; line-height: 1; }
.gantt-legend:is([data-style="forecast"], [data-style="critical"]) :is(.gantt-key-work, .gantt-key-point) { background: #c1c9d5; border: 1px dashed #657084; }
.gantt-legend[data-style="critical"] :is(.gantt-key-work, .gantt-key-point) { border: 1px solid #a23855; }
.gantt-key-forecast, .gantt-key-critical { width: 17px; height: 8px; border-radius: 2px; background: #e3e6ec; border: 1px dashed #6b7282; }
.gantt-key-critical { border: 1px solid #a23855; }
.gantt-detail { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #f8faff; }
.gantt-detail-dates { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.gantt-operation, .gantt-request-line { margin-top: 10px; color: var(--accent-dark); font-size: 12px; font-weight: 620; }
.gantt-request-button { margin-top: 10px; }
.gantt-request-form { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gantt-request-form .form-field { margin: 0; }
.schedule-requests { margin-bottom: 14px; }
.schedule-request-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 9px 0; }
.schedule-request-row + .schedule-request-row { border-top: 1px solid var(--line); }
.schedule-request-row p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.schedule-request-row a:hover { color: var(--accent); text-decoration: underline; }
.schedule-request-row .icon { width: 15px; height: 15px; }
.schedule-request-review { display: flex; flex-wrap: wrap; gap: 6px; }
.gantt-relations { display: flex; flex-wrap: wrap; gap: 9px 24px; margin: 9px 0 0; }
.gantt-relations dt { color: var(--muted); font-size: 12px; }
.gantt-relations dd { display: grid; margin: 0; }
.gantt-related { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 640; text-align: left; }
.gantt-related:hover { text-decoration: underline; }
.gantt-related .icon { width: 14px; height: 14px; }

.calendar-mobile-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.calendar-mobile-list > :not(:first-child) { border-top: 1px solid var(--line); }
.calendar-list-result, .calendar-list-context {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 11px;
  border: 0; background: #edf3fb; color: var(--accent-dark); text-align: left; font-size: 13px; font-weight: 670;
}
.calendar-list-context { padding-inline-start: 16px; background: #f6f9fd; }
.calendar-list-result > span, .calendar-list-context > span { min-width: 0; overflow-wrap: anywhere; }
.calendar-mobile-list .icon { width: 14px; height: 14px; flex: none; }
.calendar-list-row-head { display: flex; align-items: stretch; }
.calendar-list-row.is-milestone { background: #f6f9fd; }
.calendar-list-row.is-nested .calendar-list-work { padding-inline-start: 18px; }
.calendar-list-disclosure {
  display: grid; place-items: center; flex: 0 0 40px; min-height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--accent);
}
.calendar-list-work {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(67px, auto) 14px;
  align-items: center; gap: 6px; min-width: 0; min-height: 48px; padding: 8px 9px;
  text-align: left; color: var(--ink); background: transparent; border: 0;
}
.calendar-list-disclosure + .calendar-list-work { padding-inline-start: 0; }
.calendar-list-work .item-title { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.calendar-list-dates { display: grid; gap: 5px; max-width: 98px; text-align: right; }
.calendar-list-dates > span { display: grid; gap: 1px; }
.calendar-list-dates small { color: var(--muted); font-size: 11px; }
.calendar-list-dates strong { color: var(--accent-dark); font-size: 12px; font-weight: 650; }
.calendar-list-row.is-critical .calendar-list-dates .is-projected { color: #90334e; }
.calendar-list-work[aria-expanded="true"] { background: #eaf2ff; }
.calendar-list-work[aria-expanded="true"] > .icon { transform: rotate(90deg); }
.calendar-mobile-list button:focus-visible { outline-offset: -2px; }
.calendar-mobile-list .gantt-detail { margin: 0; border: 0; border-radius: 0; border-top: 1px solid var(--line); }
.calendar-mobile-list .gantt-detail .work-tags { margin-top: 0; }

@media (max-width: 890px) {
  .participant-overview { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .gantt-checkpoint-row { padding-left: 0; }
  .gantt-nested-row { padding-left: 9px; }
  .gantt-views { gap: 6px; }
  :is(.gantt-scales, .gantt-layers) button { padding-inline: 7px; }
  .dashboard-hero.participant + .dashboard-grid { gap: 12px; margin-top: 12px; }
  .dashboard-hero.participant + .dashboard-grid .dashboard-panel { padding: 15px 14px; }
  .document-row:has(> .badge) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px 9px; }
  .document-row:has(> .badge) > :is(.document-icon, .icon) { grid-row: 1 / span 2; }
  .document-row:has(> .badge) > .icon { grid-column: 3; }
  .document-row:has(> .badge) > .document-name { grid-column: 2; grid-row: 1; }
  .document-row > .badge { grid-column: 2; grid-row: 2; justify-self: start; max-width: 100%; white-space: normal; }
  .work-row { display: grid; gap: 10px; align-items: start; }
  .work-icon { display: none; }
  .work-detail p { margin-top: 3px; }
  .work-row > .button { justify-self: start; min-height: 36px; font-size: 13px; font-weight: 650; }
  .work-group .work-row > .button { margin-inline-start: 0; }
  .work-item > summary { grid-template-columns: minmax(0, 1fr) 15px; gap: 4px 8px; }
  .work-item-badges { grid-column: 1; grid-row: 2; justify-content: start; }
  .work-item > summary > .icon { grid-column: 2; }
}

.stage-flow {
  --point: 22px;
  --seam: 5px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0 22px;
}
.flow-step {
  --notch: var(--point);
  position: relative; isolation: isolate;
  display: grid; align-content: center; justify-items: start; gap: 5px;
  min-width: 0; min-height: 86px; width: calc(100% + var(--point) - var(--seam));
  padding: 12px calc(var(--point) + 4px) 12px calc(var(--point) + 16px);
  border: 0; outline: none; text-align: left;
  color: #002b5b; background: linear-gradient(112deg, #ffffffb0, #dceaffaa);
  box-shadow: inset 0 1px #7e9fc31b, inset 0 -1px #7e9fc31b;
  clip-path: polygon(0 0, calc(100% - var(--point)) 0, 100% 50%, calc(100% - var(--point)) 100%, 0 100%, var(--notch) 50%);
  transition: transform 170ms ease, background-color 150ms ease;
}
.flow-step:first-child { --notch: 0px; padding-inline-start: 24px; border-radius: 9px 0 0 9px; }
.flow-step:last-child { width: 100%; }
button.flow-step:hover { background: #dceaff; }
.flow-step:is([aria-pressed=true], [aria-current=step]) { background: #cfdef7; }
.flow-step:focus-visible { outline: none; }
.flow-step:focus-visible .flow-label { outline: 2px solid #0039a6; outline-offset: 4px; border-radius: 2px; }
@media (hover: hover) {
  button.flow-step:hover { z-index: 1; transform: translateY(-2px) scale(1.025); }
}
.flow-step strong { font-size: 25px; font-weight: 690; line-height: 1; }
.flow-label { font-size: 13px; font-weight: 590; line-height: 1.2; white-space: nowrap; }
.flow-symbol {
  position: absolute; z-index: -1; inset-block-start: 50%; inset-inline-end: calc(var(--point) + 12px);
  transform: translateY(-50%); opacity: var(--card-symbol-opacity); color: #0039a6; pointer-events: none;
}
.flow-symbol .icon { width: 68px; height: 68px; }

@media (max-width: 1050px) {
  .stage-flow { --point: 15px; }
  .flow-step { padding-inline-start: calc(var(--point) + 9px); }
  .flow-step:first-child { padding-inline-start: 15px; }
  .flow-label { font-size: 12px; }
  .flow-symbol { inset-inline-end: calc(var(--point) + 5px); }
  .flow-symbol .icon { width: 58px; height: 58px; }
}

@media (max-width: 700px) {
  .stage-flow:not(.compact) { --point: 8px; --seam: 4px; grid-template-columns: minmax(0, 1fr); margin: 12px 0 18px; }
  :where(.stage-flow:not(.compact)) :is(.flow-step, .flow-step:first-child, .flow-step:last-child) {
    width: 100%; min-height: 45px; margin-bottom: calc(var(--seam) - var(--point));
    grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px;
    padding: 8px 14px calc(var(--point) + 4px);
    clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% calc(100% - var(--point)), 50% 100%, 0 calc(100% - var(--point)));
    border-radius: 0;
  }
  :where(.stage-flow:not(.compact)) .flow-step:first-child { border-radius: 7px 7px 0 0; }
  :where(.stage-flow:not(.compact)) .flow-step:last-child { margin-bottom: 0; }
  .flow-step strong { font-size: 19px; }
  .flow-symbol { inset-inline-end: 17px; }
  .flow-symbol .icon { width: 38px; height: 38px; }
}

.stage-flow.compact { --point: 9px; --seam: 4px; margin: 0 0 7px; }
.compact .flow-step { min-height: 34px; padding: 6px 12px 6px 17px; }
.compact .flow-step:first-child { padding-inline-start: 12px; border-radius: 7px 0 0 7px; }
.compact .flow-label { font-size: 12px; }
.compact .flow-symbol { inset-inline-end: calc(var(--point) + 6px); }
.compact .flow-symbol .icon { width: 26px; height: 26px; }

@media (max-width: 520px) {
  .compact .flow-step, .compact .flow-step:first-child { min-height: 24px; padding: 0; }
  .compact .flow-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compact .flow-symbol { inset-inline: 50% auto; transform: translate(-50%, -50%); opacity: .35; }
  .compact [aria-current=step] .flow-symbol { opacity: .85; }
  .compact .flow-symbol .icon { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-step, .flow-step:hover { transition: none; transform: none; }
}

@media (max-width: 440px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}