/* The application shell (§4).
 *
 * §4 describes a 1440×940 canvas with overflow:hidden. That is the design
 * tool's preview frame, not a spec: C4 replaces it with a responsive app that
 * fills the viewport. The three regions — sidebar, main, overlays — and every
 * value inside them are unchanged.
 */

.app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

/* ---- Sidebar (§4.1) ---- */
.sidebar {
  flex: none;
  width: 244px;
  display: flex;
  flex-direction: column;
  background: var(--p-surface);
  border-inline-end: 1px solid var(--p-line);
  transition: width 140ms ease;
}
.sidebar.is-collapsed { width: 68px; }

.sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px 16px;
}
.sidebar__mark {
  flex: none; width: 32px; height: 32px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-grad);
  /* The mark sits on the brand gradient, which is identical in both themes,
     so its ink is the fixed on-accent token rather than a theme-dependent one. */
  color: var(--text-on-accent);
}
.sidebar__brand-text { min-width: 0; flex: 1; }
.sidebar__brand-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
  white-space: nowrap;
}
.sidebar__brand-firm {
  font-size: 10px; color: var(--p-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__collapse {
  flex: none; width: 26px; height: 26px; border-radius: var(--radius-xs);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--p-line);
  color: var(--p-ink-3); cursor: pointer;
}
.sidebar__collapse:hover { color: var(--p-ink); }

.sidebar__nav {
  flex: 1; overflow-y: auto; padding: 4px 12px 12px;
}
.sidebar__footer {
  flex: none; padding: 8px 12px 14px;
  border-top: 1px solid var(--p-line);
}

.nav-btn {
  display: flex; align-items: center; gap: 11px;
  width: 100%; box-sizing: border-box;
  background: transparent; border: none; border-radius: var(--radius-pill);
  padding: 9px 11px; margin-bottom: 2px;
  color: var(--p-ink-2); font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.nav-btn:hover { color: var(--p-ink); text-decoration: none; }
.nav-btn.is-active {
  background: var(--p-brand-soft); color: var(--p-brand-ink); font-weight: 600;
}
.nav-btn__icon { flex: none; }
.nav-btn__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-btn__badge {
  flex: none; font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--p-surface-2); color: var(--p-ink-2);
}
.nav-btn__badge--warn { background: var(--p-warn-soft); color: var(--p-warn); }

/* Collapsed: label and badge go, the icon centres. */
.sidebar.is-collapsed .sidebar__brand-text,
.sidebar.is-collapsed .nav-btn__label,
.sidebar.is-collapsed .nav-btn__badge { display: none; }
.sidebar.is-collapsed .nav-btn { justify-content: center; padding: 9px 0; }
.sidebar.is-collapsed .sidebar__brand { padding: 20px 8px 16px; flex-direction: column; gap: 8px; }

/* ---- Main ---- */
.main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}

/* ---- Header (§4.2) ---- */
.header {
  flex: none;
  background: var(--p-surface);
  border-bottom: 1px solid var(--p-line);
}
.header__row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
}
.header__cluster {
  display: flex; align-items: center; gap: 10px;
  margin-inline-start: auto;
}

.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.crumbs__item { color: var(--p-ink-3); font-weight: 500; text-decoration: none; }
.crumbs__item:hover { color: var(--p-ink-2); text-decoration: none; }
.crumbs__item.is-current { color: var(--p-ink); font-weight: 600; }
.crumbs__sep { color: var(--p-ink-3); }

.command {
  width: 300px; flex: none;
  display: flex; align-items: center; gap: 8px;
  margin-inline: auto;
  background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-pill); padding: 8px 12px;
  color: var(--p-ink-3); font-size: 13px; cursor: pointer;
}
.command__placeholder {
  flex: 1; text-align: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.command__kbd {
  flex: none; font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 600;
  background: var(--p-surface); border: 1px solid var(--p-line);
  border-radius: 5px; padding: 2px 5px;
}

.profile { position: relative; }
.profile__trigger {
  display: flex; align-items: center; gap: 8px;
  border-radius: var(--radius-md); padding: 3px 5px;
  cursor: pointer; list-style: none;
}
.profile__trigger::-webkit-details-marker { display: none; }
.profile__trigger:hover { background: var(--p-surface-2); }
.profile__trigger:focus-visible { outline: 2px solid var(--p-brand); outline-offset: 2px; }
.profile__avatar {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-brand-soft); color: var(--p-brand);
  font-size: 12px; font-weight: 700;
}
.profile__text { display: grid; }
.profile__name { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.profile__role { font-size: 10.5px; color: var(--p-ink-3); white-space: nowrap; }
.profile__chevron { color: var(--p-ink-3); transition: transform 120ms ease; }
.profile[open] .profile__chevron { transform: rotate(180deg); }
.profile__menu {
  position: absolute; z-index: 60; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
  width: 190px; padding: 6px;
  background: var(--p-surface); border: 1px solid var(--p-line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xl);
}
.profile__menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
  border: 0; border-radius: var(--radius-sm); padding: 9px 10px;
  background: transparent; color: var(--p-ink-2); font: inherit; font-size: 12.5px;
  text-align: start; text-decoration: none; cursor: pointer;
}
.profile__menu-item:hover { background: var(--p-surface-2); color: var(--p-ink); text-decoration: none; }
.profile__menu-item:focus-visible { outline: 2px solid var(--p-brand); outline-offset: -2px; }
.profile__sign-out { color: var(--p-danger); }

/* ---- Client nav, inside the sidebar (§4.1) ---- */
.sidebar__rule {
  height: 1px; background: var(--p-line); margin: 12px 11px 10px;
}
.sidebar__eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--p-ink-3);
  padding: 0 11px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar.is-collapsed .sidebar__eyebrow { display: none; }
@media (max-width: 1199px) { .sidebar .sidebar__eyebrow { display: none; } }
@media (max-width: 899px)  { .sidebar .sidebar__eyebrow { display: revert; } }

/* ---- Client context bar — header row two (§4.2) ----
   Lives in the header, which is flex:none outside the scrolling content
   region. "This bar must never scroll away." */
.ctxbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px 12px;
}
.ctxbar__ident { min-width: 0; }
.ctxbar__name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ctxbar__name {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctxbar__meta {
  font-size: 11.5px; color: var(--p-ink-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctxbar__chips {
  display: flex; align-items: center; gap: 8px;
  margin-inline-start: auto; flex-wrap: wrap;
}
.ctxbar__chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-md); padding: 6px 10px;
  /* not-allowed, per §8.6. These chips describe the grant in force and none
     of them switches; `pointer` promised an action that has never existed. */
  font-size: 11.5px; cursor: not-allowed; white-space: nowrap;
}
.ctxbar__chip-label { color: var(--p-ink-3); }
.ctxbar__chip-value { color: var(--p-ink); font-weight: 600; }

/* The engagement chip is the ONE control in this bar that acts, so it is the
   one allowed to look like it: pointer, a hover state, and the chevron the
   other three had removed precisely because they promised a menu that did not
   exist. Here the menu does exist — it is the grant picker. Shown only when the
   client holds more than one grant. 44px so it is a real target on touch. */
.ctxbar__chip--live {
  cursor: pointer; min-block-size: 44px;
  border-color: var(--p-line-2); background: var(--p-surface);
}
.ctxbar__chip--live:hover { background: var(--p-surface-2); }
.ctxbar__chip--live:focus-visible { outline: 2px solid var(--p-brand); outline-offset: 2px; }
.ctxbar__chip-caret { color: var(--p-ink-3); }

@media (max-width: 899px) {
  .ctxbar { padding: 0 16px 12px; flex-wrap: wrap; }
  .ctxbar__chips { margin-inline-start: 0; width: 100%; }
}

/* ---- Content (§4.3) ---- */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px 40px;
}

/* ---- Overlay drawer scrim, used below 900px ---- */
.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: var(--p-scrim); border: none; padding: 0;
  display: none;
}

/* ---- Responsive (C4) ------------------------------------------------- */

/* Below 1200px the sidebar collapses to 68px and stays there. */
@media (max-width: 1199px) {
  .sidebar { width: 68px; }
  .sidebar .sidebar__brand-text,
  .sidebar .nav-btn__label,
  .sidebar .nav-btn__badge { display: none; }
  .sidebar .nav-btn { justify-content: center; padding: 9px 0; }
  .sidebar .sidebar__brand { padding: 20px 8px 16px; flex-direction: column; gap: 8px; }
  .sidebar__collapse { display: none; }
}

/* Below 900px it becomes an overlay drawer, and the command trigger becomes
   an icon button. Tables scroll inside their card — see .card__scroll. */
@media (max-width: 899px) {
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50;
    width: 244px;
    transform: translateX(-100%);
    box-shadow: var(--shadow-xl);
  }
  html[dir='rtl'] .sidebar { transform: translateX(100%); }
  .app.is-drawer-open .sidebar { transform: none; }
  .app.is-drawer-open .scrim { display: block; }

  /* Expanded content returns inside the drawer. */
  .sidebar .sidebar__brand-text,
  .sidebar .nav-btn__label,
  .sidebar .nav-btn__badge { display: revert; }
  .sidebar .nav-btn { justify-content: flex-start; padding: 9px 11px; }
  .sidebar .sidebar__brand { flex-direction: row; padding: 20px 18px 16px; }

  .command { width: 36px; padding: 8px; margin-inline: 0; }
  .command__placeholder, .command__kbd { display: none; }

  .header__row { padding: 12px 16px; gap: 10px; }
  .content { padding: 18px 16px 40px; }
  .profile__text { display: none; }
}

/* The drawer toggle only exists below 900px. */
.drawer-toggle { display: none; }
@media (max-width: 899px) { .drawer-toggle { display: inline-flex; } }

/* ---- A table that must not widen the page (C4) ---- */
.card__scroll { overflow-x: auto; }

/* ---- Directional icons under RTL ----
 *
 * A chevron that means "forward" or "collapse" points the wrong way once the
 * layout mirrors. Two call sites hardcode a side — the sidebar collapse toggle
 * (sidebar.js) and Client overview's gap affordance — and the layout really
 * does mirror: the shell uses logical properties and the drawer above carries
 * its own `html[dir='rtl']` transform.
 *
 * Done in CSS rather than by swapping the icon name in JS, because CSS reacts
 * to the `dir` attribute the instant `setLocale` sets it, with no dependence on
 * anything re-rendering.
 *
 * MATCHED BY NAME, NOT BLANKET. `[dir='rtl'] l-icon { transform: scaleX(-1) }`
 * would mirror every icon in the app, including `chevron-down` on the profile
 * menu, which points DOWN and is rotated 180° when open — horizontally
 * flipping it does nothing visible and only muddles that rotate. Only the two
 * horizontal chevrons are listed here; `arrow-left-right` is symmetric and
 * deliberately absent.
 *
 * `l-icon` sets `display: inline-flex` on itself, so `transform` applies —
 * on a default inline element it would silently do nothing.
 *
 * Lives here rather than in primitives.css, which is the tidier home for a
 * rule about a core UI primitive: that file was mid-edit in another session
 * and committing it would have carried their work. Worth moving later.
 */
[dir='rtl'] l-icon[name='chevron-left'],
[dir='rtl'] l-icon[name='chevron-right'] {
  transform: scaleX(-1);
}