/* Role navigation and landing pages. Existing owning forms keep their styles. */
.role-header {
  gap:1rem;
  align-items:flex-start;
}
.role-brand {
  display:flex;
  flex-direction:column;
  gap:.1rem;
  flex-shrink:0;
}
.role-label {
  color:var(--muted);
  font-size:.76rem;
  font-weight:650;
}
.role-header .role-main-nav {
  align-self:center;
  min-width:0;
}
.role-session {
  flex-wrap:wrap;
  justify-content:flex-end;
  align-self:center;
  max-width:240px;
}
.role-session span {
  overflow-wrap:anywhere;
}
.role-phase-strip {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin:1.2rem 0;
}
.role-phase-strip p {
  margin:0;
  padding:1rem;
  border:1px solid var(--line);
  background:#fff;
  border-radius:var(--radius);
  font-size:.94rem;
}
.role-phase-strip strong {
  display:block;
  margin-bottom:.3rem;
}
.role-waiting {
  padding:.85rem 1rem;
  background:#fff;
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  color:var(--ink);
}
.role-context {
  max-width:90ch;
  color:var(--muted);
  font-size:.94rem;
}
.role-priorities {
  margin-bottom:1.25rem;
}
.role-priorities h2 {
  margin-top:0;
}
.role-priority-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.85rem;
}
.role-priority {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.3rem;
  padding:1.1rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--ink);
}
.role-priority:hover {
  border-color:var(--accent);
  color:var(--ink);
  background:#f6f8fb;
}
.role-priority strong {
  font-size:1.65rem;
  line-height:1.1;
  color:var(--ink);
}
.role-priority span {
  font-weight:700;
}
.role-priority small {
  color:var(--muted);
  font-size:.84rem;
}
.role-section-nav {
  gap:.5rem;
  padding:.65rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin:1.25rem 0;
}
.role-section-nav a {
  display:inline-flex;
  align-items:center;
  padding:.5rem .7rem;
  min-height:44px;
  font-size:.9rem;
  font-weight:650;
  border-radius:7px;
  text-decoration:none;
  background:transparent;
  color:var(--muted);
}
.role-section-nav a:hover,
.role-section-nav a[aria-current] {
  background:var(--accent-soft);
  color:var(--accent);
}
.role-project-nav {
  position:sticky;
  top:.5rem;
  z-index:3;
  box-shadow:var(--shadow);
}
.role-teacher main [id] {
  scroll-margin-top:8rem;
}
.role-course-controls,
.role-progress-details {
  margin-bottom:1.5rem;
}
.role-course-steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.25rem;
  margin:1.2rem 0;
  padding-left:1.5rem;
}
.role-course-steps li {
  padding-right:.5rem;
  margin-top:0;
}
.role-course-steps span {
  display:block;
  margin-top:.25rem;
  color:var(--muted);
  font-size:.86rem;
}
.role-students h2 {
  margin-top:0;
}
.role-project-state {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.2rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  margin-bottom:1rem;
}
.role-project-state > div {
  flex:1;
  min-width:0;
}
.role-project-state h2 {
  margin:.3rem 0 .6rem;
}
.role-project-state p:last-child {
  margin-bottom:0;
}
.role-project-state form {
  margin:0;
}
.role-grading-section > h2 {
  margin-top:1rem;
}
.role-submission-history {
  margin-bottom:.8rem;
}
.role-entry {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap:2rem;
  max-width:1040px;
  margin:2rem auto;
}
.role-entry-form {
  padding:1.6rem;
}
.role-entry-form form > button {
  width:100%;
  margin-top:.5rem;
}
.role-entry-context {
  padding:1rem 0;
}
.role-entry-context > h2 {
  margin-top:0;
}
.role-entry-switch {
  margin-top:1.8rem;
  padding-top:.5rem;
  border-top:1px solid var(--line);
}
.role-entry-switch h2 {
  margin-top:1rem;
}
.role-task-list li {
  margin-bottom:.6rem;
}
@media (max-width:1000px) {
  .role-priority-grid,
  .role-course-steps {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .role-header .role-main-nav {
    order:3;
    flex-basis:100%;
  }
  .role-session {
    margin-left:auto;
  }
}
@media (max-width:760px) {
  .role-entry,
  .role-phase-strip {
    grid-template-columns:minmax(0,1fr);
    gap:1rem;
  }
  .role-entry {
    margin:1rem auto;
  }
  .role-entry-form {
    padding:1.1rem;
  }
  .role-entry-context {
    padding:.5rem;
  }
  .role-project-state {
    flex-direction:column;
    align-items:stretch;
  }
  .role-project-nav {
    position:static;
  }
  .role-teacher main [id] {
    scroll-margin-top:1rem;
  }
  .role-session {
    max-width:55%;
    gap:.35rem;
  }
}
@media (max-width:400px) {
  .role-priority-grid,
  .role-course-steps {
    grid-template-columns:minmax(0,1fr);
  }
  .role-header .role-main-nav a {
    white-space:normal;
  }
}
@media print {
  .role-section-nav,
  .role-entry-switch {
    display:none;
  }
}