/* PicPlayer's header typography, dropdowns and profile circle, adapted to the
   PlannerPlatform workspace grid. The two header rows span the entire window. */
:root { --networkbar-height: 48px; --ad-rail-width: 316px; }
.hidden { display: none !important; }
.workspace-layout {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: var(--networkbar-height) var(--topbar-height) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
.network-titlebar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
  padding: 0 9px;
  background: #10141b;
  border-bottom: 1px solid #252b35;
  user-select: none;
}
.workspace-header {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  min-width: 0;
  background: #10141b;
  border-bottom: 1px solid #2a3240;
  color: #f6f7fb;
  --text: #f6f7fb;
  --text-soft: #a0adbf;
  --text-faint: #939dac;
  --surface: #202938;
  --surface-muted: #202938;
  --surface-hover: #2a313d;
  --border: #414c5f;
}
.brand-row {
  flex: 0 0 var(--sidebar-width);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
  border-right: 1px solid #2a3240;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.brand-row .brand-mark {
  display: block; flex: 0 0 24px; width: 24px; height: 24px;
  border-radius: 8px; object-fit: cover;
}
.brand-copy {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-width: 0; white-space: nowrap;
}
.brand-copy .brand-name {
  display: inline-flex; align-items: baseline; overflow: visible;
  color: #f6f7fb; font-size: 13px; letter-spacing: -.02em; line-height: 1;
}
.brand-name strong { display: inline; font-size: inherit; font-weight: 800; letter-spacing: inherit; }
.brand-name span { display: inline; overflow: visible; color: inherit; font-size: inherit; font-weight: 400; }
.brand-copy small { color: #939dac; font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: .025em; }
.topbar { flex: 1; min-width: 0; min-height: 0; border: 0; background: transparent; backdrop-filter: none; }
.topbar-actions { flex: 0 0 auto; }
.topbar .search-box input { color: #f6f7fb; }
.topbar .search-box input::placeholder { color: #a0adbf; }
.topbar .search-box input:focus { background: #252f40; }
.topbar .button.primary { color: #fff; }
.sidebar { grid-column: 1; grid-row: 3; height: 100%; min-height: 0; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 9px 16px 0; color: var(--text-soft); }
.sidebar-workspace > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.sidebar-scroll { min-height: 0; }
.main-area { grid-column: 2; grid-row: 3; height: 100%; min-height: 0; container-type: inline-size; }
.content-frame { height: 100%; }
.shared-ad-rail { grid-column: 3; grid-row: 3; display: none; width: 316px; height: 100%; min-height: 0; overflow: hidden; }
@media (min-width: 1280px) {
  .workspace-layout:has(.shared-ad-rail:not([hidden])) { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 316px; }
  .shared-ad-rail:not([hidden]) { display: block; }
}
.profile-button { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #414c5f; border-radius: 50%; background: #202938; color: #cfdbeb; cursor: pointer; padding: 0; transition: background .15s,border-color .15s; }
.profile-button:hover, .profile-button.active { background: #33435a; border-color: #6e9bc7; }
.profile-button.is-signed-in { border-color: #469b81; background: #153b32; color: #a1eed5; }
.profile-initials { font-size: 13px; font-weight: 750; line-height: 1; }
.menu-bar { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.menu-bar::-webkit-scrollbar { display: none; }
.network-menu { margin-left: auto; padding-left: 16px; }
.menu-bar > button { flex: 0 0 auto; height: 30px; border-radius: 5px; border: 0; background: transparent; padding: 0 8px; cursor: pointer; color: #d4d9e1; white-space: nowrap; font-size: 12px; }
.menu-bar > button:hover, .menu-bar > button.active { background: #2a313d; }
.menu-bar > button:focus-visible, .profile-button:focus-visible { outline: 2px solid #58baff; outline-offset: -2px; }
.menu-popovers { position: fixed; inset: 0; pointer-events: none; z-index: 150; color: #dce2eb; font-size: 12px; }
.menu-popover { display: none; position: absolute; min-width: min(245px,calc(100vw - 16px)); max-width: calc(100vw - 16px); padding: 5px; background: #252b35; border: 1px solid #3a424f; border-radius: 7px; box-shadow: 0 18px 50px #000b; pointer-events: auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #566274 #252b35; }
.menu-popover.open { display: block; }
.menu-popover button, .menu-popover a { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; border: 0; background: transparent; padding: 7px 9px; border-radius: 4px; text-align: left; cursor: pointer; color: inherit; text-decoration: none; white-space: nowrap; line-height: 1.35; }
.menu-popover button:hover, .menu-popover a:hover, .menu-popover button:focus-visible, .menu-popover a:focus-visible { background: #3a4656; outline: none; }
.menu-popover button:focus-visible, .menu-popover a:focus-visible { box-shadow: inset 0 0 0 1px #80b7e3; }
.menu-separator { height: 1px; background: #46505f; margin: 5px; }
.current-app-badge { font-size: 9px; color: #86c8f7; font-weight: 500; }
.profile-popover { width: 245px; }
.profile-summary { display: grid; gap: 5px; padding: 8px 9px 9px; overflow-wrap: anywhere; }
.profile-summary strong { font-size: 13px; font-weight: 650; }
.profile-summary > span { font-size: 11px; color: #a0adbf; }
.profile-popover .profile-join { color: #90ceff; }
.profile-popover .profile-legal-link { font-size: 11px; color: #adb9ca; }
/* Adapt to the workspace width, not just the viewport: the rail takes 316px. */
@container (max-width: 850px) {
  .task-row { grid-template-columns: 32px minmax(160px,1fr) 92px 110px 34px; }
  .assignee-cell { display: none; }
  .metric-card { grid-column: span 6; }
  .dashboard-card, .dashboard-card.wide, .dashboard-card.narrow { grid-column: span 12; }
  .view-toolbar { flex-wrap: wrap; }
}
@container (max-width: 650px) {
  .task-row { grid-template-columns: 30px minmax(0,1fr) 80px 30px; padding: 8px; }
  .task-row .priority-badge, .task-row .due-cell { display: none; }
  .view-toolbar { align-items: flex-start; flex-direction: column; }
  .view-tabs { width: 100%; }
  .toolbar-side { width: 100%; justify-content: flex-end; }
  .metric-card { grid-column: span 12; }
}
@media (max-width: 820px) {
  .workspace-layout { grid-template-columns: minmax(0,1fr); }
  .brand-row { flex-basis: 174px; }
  .sidebar { top: calc(var(--networkbar-height) + var(--topbar-height)); height: calc(100dvh - var(--networkbar-height) - var(--topbar-height)); }
  .main-area { grid-column: 1; }
  .mobile-overlay { top: calc(var(--networkbar-height) + var(--topbar-height)); }
  .topbar .search-box input:focus { top: calc(var(--networkbar-height) + 16px); left: 12px; width: calc(100vw - 24px); }
  .profile-button { width: 29px; height: 29px; flex-basis: 29px; }
}
@media (max-width: 600px) {
  .brand-row { flex-basis: 150px; }
  .brand { padding: 0 10px; gap: 8px; }
  .topbar { justify-content: flex-end; gap: 8px; padding: 10px 9px; }
  .topbar-actions { gap: 8px; }
  .topbar .search-box, .topbar .sync-pill { display: none; }
  .topbar .button.primary { padding: 9px; }
  .topbar .button.primary span:not(.icon) { display: none; }
  .page-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .network-titlebar { padding: 0 5px; }
  .network-menu { padding-left: 0; }
  .menu-bar > button { padding: 0 7px; }
}