/* =============================================================================
   AiBLE CRM — shell chrome
   PR 2 of 6.  Loads after tokens.delta.css.

   Covers: sidebar (expanded + 64px rail), nav groups and active state,
   utility bar, avatar menu, crumb, top bar.
   Pairs with the markup changes in core.js (startClock, buildNav) and
   ui.js (mountUtil, mountMenu, applyRail, paintCrumb).

   Revert = delete this file, its <link>, and the two JS commits.
   ========================================================================== */

/* ------------------------------------------------------------- SIDEBAR */

.side-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
}
.brand-cx { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.brand-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #fff;
}
.brand-app {
  font-size: 9.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper-on-sidebar);   /* set in tokens.delta.css */
}

/* --- nav groups ---
   Left-aligned labels on a tinted block. The previous pass left these
   right-ragged and its own comment conceded that was preference rather than a
   reasoned call; against a left-aligned column of module links the labels sat
   at the opposite margin, so the sidebar had two edges to read down.

   justify-content is what actually positions them — the box is a flex row, so
   text-align alone does nothing. Both are set so neither can be the surprise
   when someone changes the display property later.

   The caret is gone. That removes the only explicit "this collapses" cue, so
   the block carries the state instead: an open section takes the lighter
   surface, full-strength ink and a brand-coloured left edge; a closed one
   recedes. If sections get missed as clickable in real use, the fix is a caret
   back on the LEFT, not a return to the right margin.

   Load order matters here: app.css (line 33) and theme.css (35) both carry
   their own .nav-group / .nav-caret / .nav-items rules, and shell.css (37)
   loads after both, so these win on source order at equal specificity. Moving
   shell.css earlier in index.html would silently revert this block. */
.nav-group {
  display: flex; align-items: center; gap: 0;
  width: calc(100% - 16px); margin: 10px 8px 2px; padding: 7px 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sidebar-ink-2);
  border: 0; cursor: pointer;
  text-align: left; justify-content: flex-start;
  background: var(--sidebar-2);
  border-left: 2px solid transparent;
  border-radius: 3px;                /* a block, not a pill */
  opacity: 1;                        /* group labels are structure */
  transition: background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.nav-group:not(.closed) {
  background: var(--sidebar-3);
  color: var(--sidebar-ink);
  border-left-color: var(--primary);
}
.nav-group:hover { background: var(--sidebar-3); color: var(--sidebar-ink); }
.nav-group:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.nav-group:first-child { margin-top: 4px; }

/* Kept in the DOM rather than removed from buildNav(): it is aria-hidden and
   decorative, and leaving the markup alone keeps this a CSS-only change.
   Rail mode hides .nav-group wholesale (line ~117 below), so the wider block
   can never overflow the 64px rail. */
.nav-caret { display: none; }

.nav-items { padding-left: 2px; }

/* --- nav items ---
   The active item was a solid blue slab, which fought the brand mark for
   attention at the top of the same column. It becomes a quiet ground with a
   copper edge: the chip says WHAT, the edge says WHERE YOU ARE. */
.nav a {
  padding: 5px 16px;
  border-left: 2px solid transparent;
  border-radius: 0;
  font-size: 12.5px;
  color: var(--sidebar-ink);
}
.nav a:hover {
  background: color-mix(in srgb, var(--sidebar-2) 60%, transparent);
  color: #fff;
}
.nav a.active {
  background: var(--sidebar-2);
  border-left-color: var(--copper);
  color: #fff; font-weight: 500;
}
/* theme.css drew the copper rail as an ::before pseudo-element offset by
   -8px, which assumed the old rounded slab. The border-left above is the
   same rail in one fewer moving part. */
.nav a.active::before { content: none; }
.nav a.active .nav-ico { box-shadow: none; }

.nav-ico {
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 4px; font-size: 9.5px;
}

/* --- count badges ---
   Mono, because they are compared. Neutral by default; red only when the
   number means someone is late. */
.nav-badge {
  margin-left: auto;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 500;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .09);
  color: #dbe3ec;
  box-shadow: none;
}
.nav-badge.is-late {
  background: color-mix(in srgb, var(--red) 18%, transparent);
  color: #f0a39c;
}

/* --- footer identity --- */
.side-foot { padding: 12px 16px; gap: 10px; }
.who-name { font-size: 12px; font-weight: 500; color: #fff; }
.who-role { font-size: 10.5px; color: var(--sidebar-ink-2); }

/* ---------------------------------------------------- COLLAPSED RAIL */
/* 64px. Labels, group headers, badges and the identity block all go; the
   chips and the copper edge stay, because those are the two things that
   carry position and state. */

/* .app is a GRID - `grid-template-columns: 236px 1fr`. Narrowing the aside
   alone left it floating in a 236px column with a 172px hole beside it. The
   column is what has to move. */
:root[data-rail="on"] .app { grid-template-columns: 64px 1fr; }
:root[data-rail="on"] .sidebar { width: 64px; }
:root[data-rail="on"] .sidebar .brand-name,
:root[data-rail="on"] .sidebar .brand-app,
:root[data-rail="on"] .nav-group,
:root[data-rail="on"] .nav a > :not(.nav-ico),
:root[data-rail="on"] .nav-label,
:root[data-rail="on"] .nav-badge,
:root[data-rail="on"] .who { display: none; }

:root[data-rail="on"] .side-brand { justify-content: center; padding: 14px 0; }
:root[data-rail="on"] .side-foot  { justify-content: center; padding: 12px 0; }

/* A closed group must not hide its items in the rail — there are no group
   headers to reopen them with. */
:root[data-rail="on"] .nav-items.closed { display: block; }

:root[data-rail="on"] .nav a {
  justify-content: center;
  padding: 6px 0;
}
:root[data-rail="on"] .nav-ico {
  width: 24px; height: 24px; flex: 0 0 24px; font-size: 11px;
  border-radius: 5px; opacity: .72;
}
:root[data-rail="on"] .nav a.active .nav-ico { opacity: 1; }

/* Below 900px the sidebar is already an overlay drawer, so the rail is
   meaningless there and must not fight it. */
@media (max-width: 900px) {
  :root[data-rail="on"] .sidebar { width: auto; }
  :root[data-rail="on"] .sidebar .brand-name,
  :root[data-rail="on"] .sidebar .brand-app,
  :root[data-rail="on"] .nav-group,
  :root[data-rail="on"] .nav a > :not(.nav-ico),
  :root[data-rail="on"] .nav-label,
  :root[data-rail="on"] .nav-badge,
  :root[data-rail="on"] .who { display: revert; }
  :root[data-rail="on"] .app { grid-template-columns: 1fr; }
  :root[data-rail="on"] .nav a { justify-content: flex-start; padding: 5px 16px; }
  :root[data-rail="on"] .nav-ico { width: 18px; height: 18px; flex: 0 0 18px; opacity: 1; }
  #cxUtil [data-a="rail"] { display: none; }
}

/* ---------------------------------------------------------- UTILITY BAR */

.utilbar {
  height: 48px; gap: 12px; padding: 0 16px;
  background: var(--surface);    /* was --surface-2; the bar and the top bar
                                    are one plane, split by a hairline */
  position: relative;            /* anchors the avatar menu */
}
.cx-util { display: flex; align-items: center; gap: 6px; }

/* app.css styles .tm-i as a STROKED 13px icon (fill:none). The new pin is a
   10x12 FILLED path — under the old rule it renders as nothing at all. */
.tm-loc .tm-i {
  width: 10px; height: 12px;
  fill: currentColor; stroke: none;
  margin-right: 0; vertical-align: baseline;
}

.gs { max-width: 560px; }
#cxUtil [data-a="rail"].on { color: var(--primary); background: var(--primary-50); }

/* --- the four slots --- */
.top-meta { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.tm-sep { width: 1px; height: 20px; background: var(--line); flex: none; }

.tm-loc {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-3);
}
.tm-loc .tm-i { flex: none; }

.tm-clock {
  /* flex-direction:row is NOT redundant. app.css:403 ships
     `.tm-clock{display:flex;flex-direction:column;text-align:right}` for the
     old stacked date-over-time block. Re-declaring display and align-items
     here did not clear it, so the date and the time kept stacking and the
     bar grew past its 48px - which is what shipped. Reset both. */
  display: flex; flex-direction: row; text-align: left;
  align-items: baseline; gap: 5px;
  font-size: 11.5px; color: var(--ink-3); cursor: default;
}
.tm-d   { white-space: nowrap; }
.tm-dot { color: var(--line); }
.tm-t   {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-2);
  /* Holds its box when seconds appear on hover, so the bar does not jump. */
  min-width: 8.4ch; text-align: right;
}
.tm-tz  { font-size: 10px; letter-spacing: .06em; }

/* --- avatar trigger --- */
.tm-user {
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 8px 0 4px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); cursor: pointer;
}
.tm-user:hover { background: var(--surface-2); border-color: var(--line); }
.tm-user[aria-expanded="true"] {
  background: var(--primary-50); border-color: var(--primary);
}
.tm-av {
  width: 24px; height: 24px; flex: none;
  border-radius: var(--r-pill);
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
}
.tm-caret { font-size: 11px; color: var(--ink-3); }
.tm-user[aria-expanded="true"] .tm-caret { color: var(--primary-600); }

@media (max-width: 820px) {
  .tm-loc, .tm-clock, .tm-sep { display: none; }
}

/* ---------------------------------------------------------- AVATAR MENU */

.cx-menu {
  position: absolute; top: 52px; right: 14px; z-index: 60;
  width: 258px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--e3);
}
.cx-menu.hidden { display: none; }

.cx-menu-id {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px; border-bottom: 1px solid var(--line-2);
}
.cx-menu-av {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-pill);
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600;
}
.cx-menu-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.cx-menu-nm { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.cx-menu-em {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-menu-rl { font-size: 10.5px; color: var(--ink-3); }

.cx-menu-prefs {
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px 13px; border-bottom: 1px solid var(--line-2);
}
.cx-menu-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--ink-2);
}

/* --- segmented control --- */
.cx-seg {
  display: flex; padding: 2px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 5px;
}
.cx-seg-o {
  font: inherit; font-size: 11px; line-height: 1.4;
  padding: 2px 8px; border: 0; border-radius: 3px;
  background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.cx-seg-o:hover { color: var(--ink-2); }
.cx-seg-o.on {
  background: var(--surface); color: var(--ink); font-weight: 500;
  box-shadow: 0 1px 1px rgba(16, 24, 38, .07);
}
:root[data-theme="dark"] .cx-seg-o.on { box-shadow: none; border: 1px solid var(--line); padding: 1px 7px; }

.cx-menu-foot { padding: 7px; }
.cx-menu-out {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 12px; color: var(--ink-2);
  padding: 6px 7px; border: 0; border-radius: 5px;
  background: transparent; cursor: pointer; text-align: left;
}
.cx-menu-out:hover { background: var(--hover); color: var(--ink); }
.cx-menu-out svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--ink-3);
}
.cx-menu-out:hover svg { color: var(--red); }

/* ---------------------------------------------------------------- CRUMB */
/* Was uppercase, tracked out, in copper — the default admin-template
   gesture, and it put the app's smallest tracked text in its lowest-contrast
   colour. Hierarchy now comes from a fullwidth slash and one colour step. */

.crumb {
  display: flex; align-items: center; gap: 0;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-3);
}
.cr-sep { color: var(--ink-4); padding: 0 2px; }
.cr-seg.is-here { color: var(--ink-2); }

.page-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 22px; font-weight: 600; line-height: 1.15;
  letter-spacing: -.01em; color: var(--ink);
}
.topbar { padding: 12px 24px 14px; align-items: flex-end; }

/* ------------------------------------------------------------- MOTION */
@media (prefers-reduced-motion: reduce) {
  .nav-caret, .cx-seg-o { transition: none; }
}


/* ------------------------------------------------- RAIL vs HAMBURGER

   The utility bar was carrying two controls for the same job. `#menuBtn` is
   the sidebar hamburger; a previous change made it visible at every width
   (it had been mobile-only), and PR 2 then added its own rail toggle without
   knowing that. Live shipped with [rail][Ctrl K][hamburger][search] where the
   design has [Ctrl K][search].

   The rail toggle wins above 900px - it collapses to icons, which is the
   better behaviour on a wide screen and the one the design specifies. Below
   900px the sidebar is an overlay drawer and the rail is disabled, so the
   hamburger is the only thing that can open it and must come back. */
.utilbar .menu-btn { display: none; }
@media (max-width: 900px) {
  .utilbar .menu-btn { display: inline-flex; }
  .cx-util [data-a="rail"] { display: none; }
}

/* ---------------------------------------------- FRAME 2f — 390px shell
   Below 820px the location and clock are already gone (above). What was left
   was the Ctrl K chip holding ~70px of a 390px bar while the search box - the
   only control anyone uses on a phone - was squeezed beside it. The chip keeps
   its icon and drops its label; a keyboard shortcut has nothing to say on a
   device with no keyboard. Everything personal is already behind the avatar
   from PR 2, so nothing else needs to move. */
@media (max-width: 640px) {
  .cx-util .cx-kbd span { display: none; }
  .cx-util .cx-kbd { padding: 0 7px; }
  .utilbar { gap: 8px; padding: 0 10px; }
  .gs { flex: 1 1 auto; max-width: none; }
  /* the avatar keeps its target size; the caret is decoration at this width */
  .tm-caret { display: none; }
}