/* The five header controls keep their slots on every page, including home. */
@media screen {
  :root { --topbar-height: 76px; }
  html { scrollbar-gutter: stable; }
  .topbar { height: var(--topbar-height); flex-wrap: nowrap; }
  .topbar .brand { flex: 0 1 auto; min-width: 0; }
  .topbar .brand-icon { flex: 0 0 auto; }
  .topbar .brand > div { min-width: 0; }
  .top-actions {
    display: grid;
    grid-template-columns: 100px 120px 126px 154px 100px;
    grid-template-areas: "home library size theme export";
    gap: 10px;
    flex: 0 0 auto;
    align-items: center;
  }
  .top-actions > [data-action=home] { grid-area: home; }
  .top-actions > [data-action=library] { grid-area: library; }
  .top-actions > [data-action=export-task] { grid-area: export; }
  .top-actions > .display-picker:has([data-preference=size]) { grid-area: size; }
  .top-actions > .display-picker:has([data-preference=theme]) { grid-area: theme; }
  .top-actions > .btn {
    width: 100%; height: 44px; padding: 8px 10px;
    white-space: nowrap;
  }
  .top-actions > .display-picker { width: 100%; height: 38px; gap: 4px; }
  .top-actions .picker-label { flex: 0 0 30px; }
  .top-actions .picker-select-shell { flex: 1 1 0; width: auto; min-width: 0; }
  .top-actions > .btn:disabled:hover { border-color: var(--line); color: #2b4956; }
  .workspace { min-height: calc(100vh - var(--topbar-height)); }
}
@media screen and (min-width: 761px) {
  .workspace { height: calc(100vh - var(--topbar-height)); min-height: 0; }
}
@media screen and (max-width: 1100px) {
  :root { --topbar-height: 128px; }
  .topbar {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 49px 44px; gap: 10px;
    padding: 12px 20px; align-items: center;
  }
  .top-actions { justify-self: end; }
}
@media screen and (max-width: 760px) {
  :root { --topbar-height: 182px; }
  .topbar { grid-template-rows: 49px 92px; gap: 12px; padding: 14px 16px; }
  .topbar .brand small { font-size: clamp(10px, 2.6vw, .72rem); white-space: nowrap; }
  .top-actions {
    width: 100%; grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 42px 42px; gap: 8px;
    grid-template-areas: "home home home home library library library library export export export export" "size size size size size theme theme theme theme theme theme theme";
  }
  .top-actions > .btn { height: 42px; padding: 7px 4px; }
  .top-actions > .display-picker { height: 38px; }
}