/* Keep identity data nodes for rendering, but edit personal details in the Om tab. */
main .grid > aside:has(#aboutName) { display: none; }
main .grid:has(#aboutName) { grid-template-columns: minmax(0, 1fr); }
.top {
  background: #fff;
  height: calc(70px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.top .tools { margin-left: auto; flex-shrink: 0; }
.top .bell { min-width: 44px; min-height: 44px; }
.modal {
  padding-top: max(18px, env(safe-area-inset-top, 0px));
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}
.profile-preferences { display: grid; gap: 18px; margin: 20px 0; }
.profile-preferences fieldset { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.profile-preferences fieldset label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.profile-preferences input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; }
.profile-preferences > label { display: grid; gap: 8px; }
.profile-preferences textarea,.profile-preferences select,.profile-preferences input[type=number] {
  width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit;
}
@media (min-width: 851px) {
  main { max-width: 1440px; padding: 28px 32px 72px; }
  main .grid:has(#aboutName) > section { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
  main .grid:has(#aboutName) > section > .card { margin-top: 0 !important; min-height: 190px; }
  .quickgrid button { min-height: 82px; padding: 20px; text-align: left; }
  .cover { min-height: 260px; }
  .coverInsight { padding-left: 32px; }
  .card h2 { font-size: 20px; }
}
@media (max-width: 850px) {
  .top { height: calc(68px + env(safe-area-inset-top, 0px)); gap: 10px; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .top .brand { min-width: 0; flex: 1; font-size: clamp(16px, 4.8vw, 19px); gap: 8px; }
  .top .brand .mark { flex-shrink: 0; }
  .top .brand #appName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top .tools { margin-left: 0; }
  .dialog { max-height: calc(100dvh - max(18px, env(safe-area-inset-top, 0px)) - max(18px, env(safe-area-inset-bottom, 0px))); }
}

.course-browser-toolbar [hidden]{display:none!important}
.course-browser-month-nav{display:flex;flex-wrap:wrap;gap:8px}
.course-browser-content{overflow-x:auto}

.publishedCardGridSection{margin:20px 0}
.publishedCardGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;align-items:stretch}
.publishedDataCard{min-width:0;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card,#fff);box-shadow:0 4px 16px rgba(16,47,38,.08)}
.publishedDataCard h4{margin:0 0 8px;overflow-wrap:anywhere}
.publishedDataCard p{margin:0;color:var(--muted,#52665e);overflow-wrap:anywhere}
@media (max-width:600px){.publishedCardGrid{grid-template-columns:1fr}.publishedDataCard{padding:16px}}

/* Desktop dialogs should use the available workspace instead of the
   mobile-sized 560px default. Invitation dialogs stay compact; long forms
   and overview content get room for their two-column layouts. */
@media (min-width:851px) {
  .modal .dialog { width: min(1080px, calc(100vw - 64px)); max-height: calc(100vh - 48px); }
  #personModal .dialog, #acceptModal .dialog { width: min(720px, calc(100vw - 64px)); }
  #courseModal .dialog { width: min(1280px, calc(100vw - 64px)); max-width: 1280px; }
  #courseModal #courseForm { max-width: none; }
  #viewModal .dialog { width: min(1080px, calc(100vw - 64px)); }
}