/* Keystone shell. Colours come from ui-kit; the shell and each part set only
   --ui-accent and --ui-accent-text (in shell/base.html). */

/* A thin band in the current accent, so it's clear at a glance which part is open. */
body { border-top: 4px solid var(--ui-accent); }

.ks-no-access { padding: 28px 0; }
.ks-no-access h2 { margin: 0 0 6px; font-size: var(--ui-text-md); }
.ks-no-access p { margin: 0; }

/* One top bar line: home, the part's icon and name, the client picker, the user menu.
   The picker sits between the title and the menu (the bar's own items join this row). */
.ui-header { display: flex; align-items: center; gap: 10px; }
.ui-header > .pr-bar { display: contents; }
.ui-header .pr-bar__title { flex: 1; }
.ui-header .ks-picker { order: 1; min-width: 0; max-width: 55%; }
.ui-header .pr-menu { order: 2; }
/* On a phone the part's name gives way to the picker; its icon stays. */
@media (max-width: 560px) {
  .ui-header:has(.ks-picker .tn-picker) .pr-chip ~ .pr-bar__title,
  .ui-header:has(.ks-picker .tn-picker) .pr-bar__part ~ .pr-bar__title {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ui-header:has(.ks-picker .tn-picker) .ks-picker { flex: 1; max-width: none; }
}