/* The frame around signed-in screens: the navy top bar, the module bar, the view bar and the main area. Tokens only. */

.mb3 {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
}
.mb3 button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
.mb3 input, .mb3 select, .mb3 textarea { font-family: inherit; font-size: 13px; color: var(--text); }

.navstack { flex-shrink: 0; background: var(--card); box-shadow: var(--shadow-bar); z-index: 20; }

/* ── the top bar ── */
.top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 18px;
  flex-shrink: 0;
  color: var(--on-navy);
  background: linear-gradient(90deg, var(--navy-deep), var(--navy) 55%, var(--navy-2));
  border-bottom: 1px solid color-mix(in srgb, var(--on-navy) 8%, transparent);
}
.top :focus-visible { outline-color: var(--green); }
.top__spacer { flex: 1; }

.logo-slot { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--on-navy); text-decoration: none; }
.mark {
  width: 32px;
  height: 32px;
  flex: none;
}
.mark img { width: 100%; height: 100%; display: block; }
/* A firm's own logo keeps its shape: as tall as the built-in mark, and as wide as it needs up to a limit. */
.mark--firm { width: auto; max-width: 120px; }
.mark--firm img { width: auto; max-width: 120px; height: 32px; object-fit: contain; }
.logo-slot b { display: block; font-family: var(--display); font-size: 14px; line-height: 1.15; }
.logo-slot small { display: block; font-size: 10px; letter-spacing: .05em; color: var(--on-navy-3); }

/* Buttons on the navy bar. */
.btn.btn--on-navy { background: color-mix(in srgb, var(--on-navy) 10%, transparent); border-color: color-mix(in srgb, var(--on-navy) 18%, transparent); color: var(--on-navy); }
.btn.btn--on-navy:hover { background: color-mix(in srgb, var(--on-navy) 18%, transparent); }

.account { position: relative; }
.account__button { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 4px; border-radius: 5px; }
.mb3 .account__button { color: var(--on-navy); }
.account__button:hover { background: color-mix(in srgb, var(--on-navy) 8%, transparent); }
.account__who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.account__name { font-size: 11.5px; font-weight: 600; }
.account__role { font-size: 10px; color: var(--on-navy-3); }
.account__button .icon:last-child { color: var(--on-navy-3); }

/* ── the module bar ── */
.primarynav {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 48px;
  padding: 0 18px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}
.primarynav::-webkit-scrollbar, .contextnav::-webkit-scrollbar { display: none; }
.primarynav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 47px;
  padding: 0 14px;
  border-bottom: 3px solid transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.primarynav a:hover { color: var(--navy); background: var(--hover); }
.primarynav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--green); font-weight: 700; }

/* A menu item whose screen is not built yet: greyed, with a small tag. */
.primarynav a.is-soon, .subtab.is-soon { color: var(--faint); }
.primarynav a.is-soon[aria-current="page"], .subtab.is-soon[aria-current="page"] { color: var(--muted); }
.soon-tag {
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--sunk);
  color: var(--muted);
}

/* ── the view bar ── */
.contextnav {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 7px 18px;
  overflow-x: auto;
  background: var(--tint);
  border-bottom: 1px solid var(--rule);
}
.context-group { display: flex; align-items: center; gap: 5px; min-width: max-content; }
.context-title { margin-right: 5px; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; }
.subtab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.subtab:hover { background: var(--card); border-color: var(--rule); color: var(--navy); }
.subtab[aria-current="page"] { background: var(--card); border-color: var(--rule-strong); color: var(--navy); box-shadow: var(--shadow-tab); }
.context-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: max-content; }
.scope-note { padding-left: 8px; border-left: 1px solid var(--rule); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.scope-note strong { color: var(--text); }

/* ── the main area ── */
.shell { display: flex; flex: 1; min-height: 0; }
.main { flex: 1; min-width: 0; overflow-y: auto; background: var(--surface); }
.main:focus { outline: none; }

.page { padding: 20px 24px 70px; max-width: 1600px; margin: 0 auto; }
.page--narrow { max-width: 460px; margin: 48px auto 0; }
.page__note { color: var(--muted); }
.phead { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.phead__title { flex: 1; min-width: 0; }
.phead h1 { font-size: 24px; }
.psub { margin-top: 4px; font-size: 13px; color: var(--muted); }

/* Keyboard users can jump past the navigation. Hidden until focused. */
.skip-link {
  position: absolute;
  left: 18px;
  top: -100px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 5px;
  background: var(--green);
  color: var(--on-accent);
  font-weight: 700;
}
.skip-link:focus { top: 8px; }

/* Shown only while the device is offline. Empty means online, so it is hidden. */
.offline-notice {
  flex-shrink: 0;
  padding: 8px 18px;
  background: var(--danger);
  color: var(--card);
  font-size: 13px;
  text-align: center;
}
.offline-notice:empty { display: none; }

@media (max-width: 1000px) {
  .primarynav { padding: 0 8px; }
  .primarynav a { padding: 0 10px; }
  .contextnav { padding: 7px 8px; }
  .context-actions .scope-note { display: none; }
  .page { padding: 14px 12px 70px; }
  .hsm { display: none !important; }
}