/* ============================================================================
   The shell: the left nav, the top bar, the main column, the page header, the
   mobile drawer and the command palette.

   ONE RULE GOVERNS EVERY COLOUR IN THIS FILE, and it is the reason the token
   set has two families in it. Anything inside #nav uses the --c-nav-* tokens.
   Anything outside it uses the content tokens. They are not two shades of the
   same palette: in the saffron look the nav is near-black aubergine and the
   workspace beside it is white paper, and a single surface scale cannot say
   that. Reaching for --c-surface-2 inside the nav is the mistake that makes
   four of the five looks go grey and flat at once.
   ========================================================================= */

/* ============================================================================
   NAV
   ========================================================================= */

#nav {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: var(--c-nav-bg);
  color: var(--c-nav-text);
  border-right: var(--bw) solid var(--c-nav-border);
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
  padding-left: var(--safe-l);
}

/* The brand block is the same height as the top bar next to it so the two
   rules line up across the seam. When they did not, the nav border ran past
   the top bar's and drew a one-pixel step across the whole window that was
   invisible in a full-page screenshot and obvious at 400% zoom. */
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--header-h);
  flex: none;
  padding: 0 var(--s-6);
  border-bottom: var(--bw) solid var(--c-nav-border);
}
.nav-mark {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--c-nav-brand);
}
.nav-wordmark {
  font-family: var(--t-display);
  font-size: var(--t-lg);
  font-weight: var(--t-bold);
  letter-spacing: var(--t-track-tight);
  color: var(--c-nav-text-active);
  min-width: 0;
}
.nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-6) var(--s-5) var(--s-8);
}
.nav-group + .nav-group { margin-top: var(--s-7); }
.nav-group-head {
  padding: 0 var(--s-5) var(--s-4);
  color: var(--c-nav-text-2);
  font-size: var(--t-2xs);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-track-caps);
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 34px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  color: var(--c-nav-text);
  font-size: var(--t-base);
  font-weight: var(--t-medium);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition:
    background var(--m-fast) var(--m-ease),
    color var(--m-fast) var(--m-ease);
}
.nav-item:hover { background: var(--c-nav-hover); color: var(--c-nav-text-active); text-decoration: none; }
.nav-item-icon { flex: none; width: 18px; height: 18px; opacity: 0.85; }
.nav-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* aria-current is the state, so it is also the selector. Styling a .active
   class instead lets the two drift, and the one that is wrong is always the
   one a screen reader is reading. */
.nav-item[aria-current="page"] {
  background: var(--c-nav-active);
  color: var(--c-nav-text-active);
  font-weight: var(--t-semibold);
}
.nav-item[aria-current="page"] .nav-item-icon { opacity: 1; }
/* The marker is inset rather than a left border so it does not change the row's
   box and shift the label by a pixel when the selection moves. */
.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(var(--s-1) * -1);
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: var(--r-full);
  background: var(--c-nav-brand);
}
.nav-item:focus-visible {
  outline: 2px solid var(--c-nav-text-active);
  outline-offset: -2px;
}

.nav-count {
  flex: none;
  min-width: 20px;
  padding: 0 var(--s-3);
  border-radius: var(--r-full);
  background: var(--c-nav-hover);
  color: var(--c-nav-text-2);
  font-size: var(--t-2xs);
  font-weight: var(--t-semibold);
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-item[aria-current="page"] .nav-count { background: var(--c-nav-bg-2); color: var(--c-nav-text-active); }

/* The footer explains what the nav above it is, which is the one thing a
   capability-filtered menu has to say out loud. Somebody who cannot see the
   recruit screens should be told that the list is shorter for them, not left
   to conclude the feature does not exist. */
.nav-foot {
  flex: none;
  padding: var(--s-5) var(--s-6) calc(var(--s-6) + var(--safe-b));
  border-top: var(--bw) solid var(--c-nav-border);
  color: var(--c-nav-text-2);
  font-size: var(--t-2xs);
  line-height: var(--t-snug);
}

/* ============================================================================
   MAIN COLUMN
   ========================================================================= */

#main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--c-bg);
}

#topbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: none;
  height: calc(var(--header-h) + var(--safe-t));
  padding: var(--safe-t) var(--s-6) 0 var(--s-6);
  border-bottom: var(--bw) solid var(--c-border);
  background: var(--c-bg);
  min-width: 0;
}

#screen {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: calc(var(--s-12) + var(--safe-b));
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { #screen { scroll-behavior: auto; } }

/* Every screen is laid out inside this. The horizontal padding is the one place
   the page gutter is set, so a screen can never accidentally run its content
   into the window edge, and --reading-max stops a roster smearing across a 27
   inch monitor. */
.page {
  width: 100%;
  max-width: var(--reading-max);
  margin: 0 auto;
  padding: var(--s-8) var(--s-8) 0;
  min-width: 0;
}
.page-wide { max-width: none; }

.page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding-bottom: var(--s-7);
  margin-bottom: var(--s-8);
  border-bottom: var(--bw) solid var(--c-border);
}
.page-head-text { min-width: 0; flex: 1 1 280px; }
.page-title {
  font-size: var(--t-2xl);
  font-weight: var(--t-bold);
  letter-spacing: var(--t-track-tight);
  line-height: var(--t-tight);
  color: var(--c-text);
}
.page-sub {
  margin-top: var(--s-3);
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: var(--t-snug);
}
.page-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

.section { margin-bottom: var(--s-9); min-width: 0; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.section-title {
  font-size: var(--t-md);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-track-display);
}
.section-note { color: var(--c-text-2); font-size: var(--t-sm); }

/* ============================================================================
   TOP BAR CONTROLS
   ========================================================================= */

/* The org switcher is the context for everything on screen, so it is the
   left-most thing and it carries the org's own mark. A person who belongs to
   one org still sees it, disabled, because "which organisation am I looking
   at" is a question the screen should answer without being asked. */
.orgswitch {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 34px;
  max-width: 260px;
  padding: var(--s-2) var(--s-4);
  border: var(--bw) solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: var(--t-base);
  font-weight: var(--t-semibold);
  cursor: pointer;
  min-width: 0;
  box-shadow: none;
}
.orgswitch:hover { background: var(--c-surface-2); border-color: var(--c-border); }
.orgswitch:disabled { opacity: 1; cursor: default; }
.orgswitch:disabled:hover { background: transparent; border-color: transparent; }
.orgswitch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgswitch-caret { flex: none; width: 14px; height: 14px; color: var(--c-text-3); }
.orgswitch:disabled .orgswitch-caret { display: none; }

/* The org mark is a monogram rather than an uploaded logo, because an org that
   has not uploaded one still needs something in this slot, and a lettered tile
   is better than a grey square. The hue comes from the org id so the same org
   is the same colour on every device without storing a choice nobody made. */
.orgmark {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: var(--c-accent);
  color: var(--c-accent-text);
  font-family: var(--t-display);
  font-size: var(--t-xs);
  font-weight: var(--t-bold);
  letter-spacing: 0;
  line-height: 1;
}
.orgmark-lg { width: 34px; height: 34px; border-radius: var(--r-md); font-size: var(--t-base); }

/* The palette trigger doubles as the discoverability for cmd+K. It shows the
   shortcut because a command palette nobody knows about is a command palette
   nobody uses, and it collapses to the icon alone under 920px where there is
   no room for the hint and no keyboard to press it with. */
.palette-trigger {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 32px;
  min-width: 180px;
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-3);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--t-normal);
  cursor: pointer;
  box-shadow: none;
}
.palette-trigger:hover { background: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text-2); }
.palette-trigger kbd { margin-left: auto; }
.palette-trigger svg { width: 15px; height: 15px; flex: none; }

.navtoggle { display: none; }

/* The scrim exists only for the drawer. Without this it is a grid item at every
   width: an unstyled button sitting in the nav column under the nav, painting a
   block of default chrome across the bottom of the sidebar. It was visible in
   every desktop screenshot and invisible in the markup, which is the shape of
   bug this whole audit exists to catch. */
.scrim { display: none; }

/* ============================================================================
   MOBILE: the nav becomes a drawer
   ========================================================================= */

@media (max-width: 920px) {
  #app { grid-template-columns: minmax(0, 1fr); }

  #nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-drawer);
    width: min(var(--sidebar-w), 84vw);
    transform: translateX(-102%);
    transition: transform var(--m-slow) var(--m-out);
    box-shadow: var(--e-4);
  }
  #app[data-drawer="open"] #nav { transform: none; }
  /* A closed drawer is off screen, not merely invisible, so nothing in it can
     take focus behind the scrim. visibility is what removes it from the tab
     order; transform alone leaves every nav item tabbable off screen. */
  #nav[aria-hidden="true"] { visibility: hidden; }
  #app[data-drawer="open"] #nav { visibility: visible; }

  .scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--c-scrim);
    border: 0;
    padding: 0;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--m-base) var(--m-ease);
  }
  #app[data-drawer="open"] .scrim { opacity: 1; pointer-events: auto; }

  .navtoggle { display: inline-flex; }
  /* Collapsed to the icon alone, but still a 32px square. A control that
     shrinks to 25px because its label went away is a control that is harder to
     hit on the one device where it matters most. */
  .palette-trigger { min-width: 32px; width: 32px; padding: 0; justify-content: center; }
  .palette-trigger .palette-hint { display: none; }
  .orgswitch { max-width: 42vw; }
  .page { padding: var(--s-7) var(--s-6) 0; }
  .page-title { font-size: var(--t-xl); }
}

@media (max-width: 480px) {
  .page { padding: var(--s-6) var(--s-5) 0; }
  .page-head { margin-bottom: var(--s-7); }
  .orgswitch-name { display: none; }
  .orgswitch { max-width: none; }
  #topbar { padding-left: var(--s-4); padding-right: var(--s-4); gap: var(--s-3); }
}

/* ============================================================================
   COMMAND PALETTE
   Cmd/Ctrl+K. It is the keyboard route to every screen and every person, which
   is what lets the nav stay short: a capability-filtered menu of nine items
   plus a palette beats a menu of thirty.
   ========================================================================= */

.palette-back {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--s-9) var(--s-6) var(--s-6);
  background: var(--c-scrim);
  animation: fade-in var(--m-base) var(--m-ease);
}
@media (max-width: 600px) { .palette-back { padding: var(--s-6) var(--s-5); } }

.palette {
  width: min(560px, 100%);
  max-height: min(520px, calc(100% - var(--s-4)));
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-overlay);
  box-shadow: var(--e-4);
  overflow: hidden;
  animation: pop-in var(--m-slow) var(--m-out);
}
.palette-field {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex: none;
  padding: var(--s-5) var(--s-6);
  border-bottom: var(--bw) solid var(--c-border);
}
.palette-field svg { flex: none; width: 17px; height: 17px; color: var(--c-text-3); }
.palette-field input {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 28px;
  font-size: var(--t-md);
  box-shadow: none;
}
.palette-field input:focus { box-shadow: none; border-color: transparent; }

.palette-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-4);
}
.palette-group-head {
  padding: var(--s-5) var(--s-5) var(--s-3);
  color: var(--c-text-3);
  font-size: var(--t-2xs);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-track-caps);
  text-transform: uppercase;
}
.palette-row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  width: 100%;
  min-height: 38px;
  padding: var(--s-4) var(--s-5);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: var(--t-base);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
.palette-row svg { flex: none; width: 16px; height: 16px; color: var(--c-text-3); }
.palette-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-row-hint { margin-left: auto; color: var(--c-text-3); font-size: var(--t-xs); flex: none; }
/* Selection is driven by the arrow keys, so it is an attribute the JS owns and
   NOT :hover. Letting hover paint the same state means the row under a
   stationary mouse pointer fights the row the keyboard is on, and two rows look
   chosen at once. */
.palette-row[data-sel="1"] { background: var(--c-selected); color: var(--c-text); }
.palette-row[data-sel="1"] svg, .palette-row[data-sel="1"] .palette-row-hint { color: var(--c-text-2); }
.palette-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-6);
  border-top: var(--bw) solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-3);
  font-size: var(--t-xs);
  flex-wrap: wrap;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}