/* App chrome: the Logo, the desktop SideNav and TopBar (1024px and up) and the phone header and tab bar (below
   1024px).  Mirrors navigation/SideNav, TopBar, AppHeader and TabBar in the design system. */

/* Logo (brand/Logo.jsx). */
.logo-gem { overflow: visible; outline: none; flex-shrink: 0; }
.logo-gem.is-interactive { cursor: pointer; }
.logo-gem.is-interactive:focus-visible { box-shadow: none; filter: drop-shadow(0 0 4px var(--gold-400)); }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-md { gap: 12px; }
.logo-lg { gap: 14px; }
.logo-words { display: flex; flex-direction: column; min-width: 0; }
.logo-name { font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-display); line-height: 1.15; color: #FFFFFF; }
.logo-md .logo-name { font-size: 20px; }
.logo-lg .logo-name { font-size: 24px; }
.logo-subtitle { font-size: 12px; color: var(--text-on-chrome-muted); }
.logo-on-light .logo-name { color: var(--text-title); }
.logo-on-light .logo-subtitle { color: var(--text-muted); }

/* Page frame. */
.app { min-height: 100vh; }
.app-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.content { flex-grow: 1; display: flex; flex-direction: column; gap: var(--space-20); }

/* Desktop: SideNav + TopBar. */
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .app-header, .tab-bar { display: none; }
  .content { padding: 28px 36px 48px; }
}

.side-nav {
  position: sticky; top: 0; height: 100vh; width: var(--sidebar-w); background: var(--navy-950); color: #FFFFFF;
  display: flex; flex-direction: column; gap: 28px; padding: 24px 16px;
}
.side-nav-brand { padding: 0 8px; }
.side-nav-items { display: flex; flex-direction: column; gap: 4px; }
.side-nav-item {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: var(--radius-control);
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--navy-100);
}
.side-nav-item:hover { background: var(--navy-900); color: #FFFFFF; }
.side-nav-item[aria-current='page'] { background: var(--navy-700); color: var(--gold-200); font-weight: 700; box-shadow: var(--ring-nav-active); }
.side-nav-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--walnut-700); }
.side-nav-user-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav-user-role { font-size: 12px; color: var(--navy-200); }
.side-nav-sign-out { background: none; border: 0; padding: 4px; font-size: 12px; font-weight: 600; color: var(--navy-200); cursor: pointer; text-decoration: underline; }
.side-nav-sign-out:hover { color: #FFFFFF; }
.side-nav-setup { font-size: 13px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-200); }
.side-nav-edge { position: absolute; top: 0; right: 0; bottom: 0; width: var(--gold-rule); }

.top-bar {
  display: flex; align-items: center; gap: 16px; min-height: 97px; padding: 20px 36px;
  border-bottom: 1px solid var(--paper-300); background: #FFFFFF;
}
/* Every page's bar reads the same way: the title or breadcrumb on the left, then pills, then search last.  Buttons
   never go here; they sit in the page. */
.top-bar-heading { flex: 1 1 auto; min-width: 0; }
.top-bar-pills { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-12); }
.top-bar .search { flex: 0 1 340px; }
.top-bar-pill {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px;
  background: var(--paper-100); font-size: var(--type-meta); font-weight: 600; color: var(--ink-700); white-space: nowrap;
}

.page-bar-text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.page-bar-title {
  font-family: var(--font-display); font-size: var(--type-title-md); font-weight: var(--weight-display);
  color: var(--navy-950); line-height: var(--leading-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-bar-subtitle {
  font-size: var(--type-meta); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-bar-subtitle svg { display: inline-block; vertical-align: -2px; margin-right: var(--space-6); }

.page-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12); min-width: 0;
  font-size: var(--type-body-sm); font-weight: 600;
}
.page-crumb-back { display: flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; }
.page-crumb-link { text-decoration: none; }
.page-crumb-sep { color: var(--paper-700); }
.page-crumb-current { font: inherit; color: var(--ink-900); }

/* Below 1024px the phone header and tab bar take over.  This follows the rules above so it wins over their display. */
@media (max-width: 1023px) { .side-nav, .top-bar { display: none; } }

/* Phone: header, gold rule, walnut binding, content, tab bar. */
.app-header { background: var(--navy-950); color: #FFFFFF; position: sticky; top: 0; z-index: 10; }
.app-header-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 12px 20px; }
.app-header-back { justify-content: flex-start; gap: 4px; padding: 12px 16px 12px 6px; }
.app-header-actions { display: flex; align-items: center; gap: 2px; }
.app-header-icon {
  width: 44px; height: 44px; border-radius: var(--radius-control); display: flex; align-items: center;
  justify-content: center; color: var(--icon-on-chrome); text-decoration: none;
}
button.app-header-icon { padding: 0; border: 0; background: none; cursor: pointer; }
.app-header-title { font-family: var(--font-display); font-size: var(--type-title-sm); font-weight: var(--weight-display); line-height: 1.2; }
.app-header-subtitle { font-size: 12px; color: var(--text-on-chrome-muted); }
.app-header-rule { height: var(--gold-rule); }
.app-header-binding { height: 3px; background: var(--walnut-900); }

@media (max-width: 1023px) {
  .content { padding: 20px 16px calc(var(--tabbar-h) + 24px); }
  .tab-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: var(--tabbar-h); background: var(--navy-950);
    border-top: 1px solid var(--gold-500); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}
.tab-bar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-decoration: none; color: var(--navy-200); font-size: 11px; font-weight: 600;
}
.tab-bar-item:hover { color: var(--navy-100); }
.tab-bar-item[aria-current='page'] { color: var(--gold-200); font-weight: 700; }

/* Pages without chrome: sign-in, setup and invites. */
.bare { min-height: 100vh; }

/* A tab page's title row under the phone header's logo bar (shared/phone_head). */
.phone-head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
  padding: 4px 16px 16px;
}
.phone-head-title { font-family: var(--font-display); font-size: var(--type-title-md); font-weight: var(--weight-display); }
.phone-head-meta { font-size: var(--type-meta); color: var(--navy-200); white-space: nowrap; }