/* The chrome: the shell, the sidebar that holds the switcher, the
   current-Account indicator, the nav in its three groups and sign out; the
   phone's top bar; flashes.

   Two layouts and one breakpoint — #347. From 1024px the sidebar is docked
   beside the screen, always open, scrolling on its own. Below it the sidebar
   is a drawer over the screen, opened from ☰ in the top bar and shut by the
   backdrop, Esc or a visit (sidebar_controller.js). */

.console-shell {
  display: grid;
  grid-template-columns: var(--console-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

/* `minmax(0, 1fr)` above and `min-width: 0` here are what keep a wide table
   inside its own scroll: without them the column grows to the table and the
   page scrolls sideways. `isolation` keeps a screen's own z-indexes (the
   condition hints' popover sits at 50) beneath the drawer and its backdrop. */
.console-content { min-width: 0; isolation: isolate; }

.console-sidebar {
  position: sticky;
  top: 0;
  z-index: 5;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  background: var(--console-surface);
  border-right: 1px solid var(--console-rule-3);
}
/* Focus lands on the drawer itself when it opens; the drawer sliding in is
   the indication, so it gets no outline. */
.console-sidebar:focus { outline: none; }

.console-sidebar-account {
  display: flex;
  flex-direction: column;
  gap: var(--console-space-3);
  padding: var(--console-space-4);
  border-bottom: 1px solid var(--console-rule-2);
}

/* THE SWITCHER IS THE MOST IMPORTANT CONTROL, so it is first, it fills the
   sidebar's width, and its value is set in the weight of the page's own
   type. Label, select and button each take a line: beside the button, the
   select had some 150px and cut an Account's name off mid-word — and the name
   is what a person reads before switching. */
.console-switcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--console-space-1);
  margin: 0;
}
.console-switcher input[type="submit"] { justify-self: end; margin-top: 2px; }
.console-switcher .console-switcher-label {
  font-size: var(--console-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--console-ink-3);
}
.console-switcher select { width: 100%; min-width: 0; font-weight: 600; }
/* A suspended Account keeps its helper-written label; it is never hidden. */
.console-switcher option { font-weight: 400; }

/* Read from anywhere: the Account the screens beside it are showing, said
   again in words. *All accounts* is a different mode and looks like one —
   dashed edge, cooler ground — not a different colour of the same chip. */
.console-account-indicator {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--console-rule-3);
  border-left: 3px solid var(--console-link);
  border-radius: var(--console-radius);
  background: var(--console-hover);
  color: var(--console-ink);
  overflow-wrap: anywhere;
}
.console-account-indicator strong { font-size: var(--console-text); font-weight: 600; }
.console-account-indicator-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--console-ink-4);
}
.console-account-indicator-note { font-size: var(--console-text-xs); color: var(--console-ink-3); }
.console-account-indicator-all {
  border: 1px dashed #9a9f8f;
  background: #f2f4ee;
  color: #3c4436;
}
.console-account-indicator-all .console-account-indicator-note { color: #5c6455; }

/* Reading, work lists, provisioning — the three things a person comes here to
   do, separated by a rule and a quiet label each. */
.console-nav {
  display: flex;
  flex-direction: column;
  padding: var(--console-space-2) var(--console-space-3);
  font-size: var(--console-text-sm);
}
.console-nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--console-space-1);
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--console-rule-2);
}
.console-nav-group:last-child { border-bottom: 0; }
.console-nav-group-label {
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a09b92;
}
.console-nav-links { display: flex; flex-direction: column; gap: 1px; }
.console-nav a {
  display: block;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--console-radius-sm);
  color: var(--console-ink-2);
}
.console-nav a:hover { background: var(--console-sunken); color: var(--console-ink); }
.console-nav a.console-nav-current {
  background: var(--console-ink);
  color: #f5f2ec;
  font-weight: 600;
}

/* Pinned to the foot when the nav is short, and after it when the sidebar
   scrolls. */
.console-sidebar-foot {
  margin-top: auto;
  padding: var(--console-space-3) var(--console-space-4) var(--console-space-4);
  border-top: 1px solid var(--console-rule-2);
}
.console-sign-out { margin: 0; }
.console-sign-out button { white-space: nowrap; }

/* Phones and tablets only — see the media query below. */
.console-topbar,
.console-backdrop { display: none; }

.flash-alert, .flash-notice {
  margin: 0;
  padding: 10px var(--console-space-5);
  border-bottom: 1px solid var(--console-rule-2);
  font-size: var(--console-text-sm);
  overflow-wrap: anywhere;
}
/* An alert here is a thing that did not happen, not an incident. */
.flash-alert { background: var(--console-batch-bg); border-bottom-color: #e6d9b4; color: #6f5410; }
.flash-notice { background: var(--console-good-bg); border-bottom-color: var(--console-good-rule); color: var(--console-good-ink); }

@media (max-width: 1023px) {
  .console-shell { display: block; }

  /* Off-canvas while shut, and `visibility: hidden` as well as moved away, so
     that a hidden drawer's links take no tab stop. The visibility change waits
     for the slide out to finish. */
  .console-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 20;
    width: var(--console-drawer-width);
    height: auto;
    border-right: 1px solid var(--console-rule-3);
    box-shadow: 0 0 24px rgba(27, 26, 24, 0.18);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .console-shell-open .console-sidebar {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease, visibility 0s;
  }

  /* A thumb's worth of height per link: the drawer is used by touch. */
  .console-nav a { padding: 9px 10px; }

  .console-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(27, 26, 24, 0.36);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .console-shell-open .console-backdrop { opacity: 1; pointer-events: auto; }

  /* The screen behind an open drawer stays where it was. */
  body:has(.console-shell-open) { overflow: hidden; }

  .console-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--console-space-3);
    box-sizing: border-box;
    height: var(--console-topbar-height);
    padding: 0 var(--console-space-4);
    background: var(--console-surface);
    border-bottom: 1px solid var(--console-rule-3);
  }
  .console-menu {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
  }
  /* The name alone, in the weight the indicator gives it; *all accounts* keeps
     the indicator's dashed edge so the mode is still a mode up here. */
  .console-topbar-account {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
  }
  .console-topbar-account-all {
    padding: 2px 10px;
    border: 1px dashed #9a9f8f;
    border-radius: var(--console-radius-sm);
    background: #f2f4ee;
    color: #3c4436;
  }

  .flash-alert, .flash-notice { padding-left: var(--console-space-4); padding-right: var(--console-space-4); }
}

@media (max-width: 759px) {
  .console-topbar { padding: 0 var(--console-space-3); }
  .flash-alert, .flash-notice { padding-left: var(--console-space-3); padding-right: var(--console-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .console-sidebar, .console-backdrop { transition: none !important; }
}