/* The app shell owns navigation geometry. Page controls belong below it. */
:root { --app-header-height: 60px; --plan-toolbar-height: 52px; }
html { scrollbar-gutter: stable; }
.topbar.app-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--app-header-height);
  min-height: var(--app-header-height);
  padding: 0 24px;
  gap: 24px;
  align-items: center;
  flex-wrap: nowrap;
  container-type: normal;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar.app-header > .brand {
  display: flex;
  flex: none;
  order: 0;
  margin: 0;
  font-size: 17px;
}
.topbar.app-header nav {
  display: flex;
  align-items: center;
  align-self: center;
  flex: 1;
  min-width: 0;
  width: auto;
  height: 44px;
  gap: 6px !important;
  margin: 0;
}
.topbar.app-header nav > button[data-view],
.topbar.app-header nav > .list-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: none;
  order: 0;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 12px;
  gap: 5px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.topbar.app-header nav > button.active,
.topbar.app-header nav > .list-nav[aria-pressed=true] { background: var(--ink); color: #fff; }
.topbar.app-header nav > .list-nav { margin-left: auto; }
.topbar.app-header nav > .settings-nav[data-view] { width: 36px; min-width: 36px; margin-left: 0; padding: 8px; }
.topbar.app-header nav > .settings-nav > span { display: none; }
.topbar.app-header nav > .settings-nav .settings-icon { display: block; }
.signed-out .topbar.app-header nav { display: none; }
.planner-page .planner-controls {
  container: plan-toolbar / inline-size;
  position: sticky;
  top: var(--app-header-height);
  z-index: 15;
  margin: 0;
  padding: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.planner-page .planner-toolbar { min-height: calc(var(--plan-toolbar-height) - 1px); flex-wrap: nowrap; gap: 8px; }
.planner-page .planner-controls .week-nav { display: flex !important; flex: 1; min-width: 0; gap: 2px; margin: 0; }
.planner-page .planner-controls .week-nav h2 { font-size: 16px; }
.planner-page .planner-controls .week-nav #current { margin-left: 6px; }
.planner-page .planner-controls .toolbar-right { flex: none; width: auto; flex-wrap: nowrap; margin: 0; gap: 4px; }
.planner-page .planner-controls .planner-more { margin-left: 0; }
.planner-page .planner-menu { max-height: calc(100dvh - var(--app-header-height) - var(--plan-toolbar-height) - 16px); overflow-y: auto; }
.planner-page .planner-controls .compact-date-actions { display: none; }
.planner-page .selection-bar,
.planner-page .move-banner { top: calc(var(--app-header-height) + var(--plan-toolbar-height)); z-index: 14; }
@container plan-toolbar (max-width: 620px) {
  .planner-controls .week-nav #prev,
  .planner-controls .week-nav #next { display: none; }
  .planner-controls #shuffle .shuffle-label { display: none; }
  .planner-controls #shuffle { width: 44px; min-width: 44px; min-height: 44px; padding: 6px; }
  .planner-controls .week-nav h2 { min-width: 0; overflow: hidden; }
  .planner-controls #choose-week { max-width: 100%; }
  .planner-controls #choose-week-label { overflow: hidden; text-overflow: ellipsis; }
  .planner-controls .planner-menu .compact-date-actions { display: grid; }
}
.planner-page .week-section,
.planner-page .day,
.planner-page .scrolling-weeks .day,
.planner-page .general-week-notes { scroll-margin-top: calc(var(--app-header-height) + var(--plan-toolbar-height) + 12px); }
@media (min-width: 701px) {
  body.list-open > #list-rail { top: var(--app-header-height); height: calc(100dvh - var(--app-header-height)); }
}
@media (max-width: 1099px) {
  .topbar.app-header { padding: 0 16px; gap: 20px; }
}
@media (max-width: 700px) {
  :root { --app-header-height: 58px; --plan-toolbar-height: 48px; }
  .topbar.app-header { padding: 0 12px; gap: 0; }
  .topbar.app-header > .brand { display: none; }
  .signed-out .topbar.app-header > .brand { display: flex; }
  .topbar.app-header nav > button[data-view],
  .topbar.app-header nav > .list-nav { height: 44px; min-height: 44px; padding: 0 9px; border-radius: 0; border-bottom: 2px solid transparent; }
  .topbar.app-header nav > button.active,
  .topbar.app-header nav > .list-nav[aria-pressed=true] { background: transparent; color: var(--ink); border-bottom-color: var(--ink); }
  .topbar.app-header nav > .settings-nav[data-view] { width: 44px; min-width: 44px; padding: 10px; }
  .planner-page .planner-controls { padding: 0 8px; }
  .planner-page .planner-toolbar { gap: 0; }
  .planner-page .planner-controls .week-nav #prev,
  .planner-page .planner-controls .week-nav #next { display: none; }
  .planner-page .planner-controls .week-nav h2 { display: block; flex: 1; min-width: 0; }
  .planner-page .planner-controls #choose-week { font-size: 15px; }
  .planner-page .planner-controls #current { min-width: 44px; margin: 0; font-size: 12px; }
  .planner-page .planner-controls .compact-date-actions { display: grid; }
  .planner-page .planner-controls #shuffle,
  .planner-page .planner-controls .planner-more summary { width: 44px; min-width: 44px; min-height: 44px; }
}