/* ============================================================
   App shell — sidebar, top bar, phone tab bar, page, sign in

   Two navigations, one set of destinations. From 960px up the
   dark rail is the navigation and it is always on screen. Below
   that the rail is gone and the same destinations sit in a tab
   bar at the bottom of the phone, because an agent standing in a
   kitchen navigates with a thumb and should not have to open a
   drawer to change page.
   ============================================================ */

.layout {
  display: flex;
  height: 100dvh;
  overflow: hidden;
  background: var(--canvas);
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--shell);
  color: var(--shell-ink);
  box-shadow: var(--shadow-shell);
  z-index: var(--z-sticky);
}

.sidebar-brand {
  min-height: var(--topbar-h);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--shell-line-soft);
  flex-shrink: 0;
}

/* Evergreen's circular mark. Identity lives in the mark and the
   wordmark and nowhere else: no brand colour reaches a control. */
.brand-emblem { width: 34px; height: 34px; flex: none; object-fit: contain; }

.brand-fallback {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--shell-ink-faint);
  border-radius: 50%;
  color: var(--shell-ink);
  font-weight: var(--fw-bold);
}

.brand-copy { min-width: 0; overflow: hidden; }

.brand-copy .n,
.brand-copy .s {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.brand-copy .n {
  font-family: var(--font-brand);
  font-size: 1.3rem;
  line-height: 0.9;
  letter-spacing: 0.1em;
  color: var(--shell-ink);
}

.brand-copy .s {
  margin-top: 3px;
  font-size: var(--t-micro);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--track-over);
  color: var(--shell-ink-faint);
}

/* An empty descriptor leaves no gap. A brokerage whose short name is its whole
   name has nothing to put on the second line. */
.brand-copy .s:empty { display: none; }

/* The product's own name, under the brokerage's. */
.sidebar-app {
  padding: 10px 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--shell-line-soft);
  flex-shrink: 0;
}

.sidebar-app-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--shell-ink-soft);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--shell-ink-soft) 15%, transparent);
}

.sidebar-app-name {
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--shell-ink-soft);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-group + .sidebar-group { margin-top: var(--s3); }

.sidebar-grouplabel {
  padding: var(--s3) var(--s3) var(--s1);
  font-size: var(--t-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-over);
  text-transform: uppercase;
  color: var(--shell-ink-faint);
}

.navitem {
  min-height: var(--ctl-md);
  padding: 10px 11px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border-radius: var(--r-md);
  color: var(--shell-ink-soft);
  font-size: var(--t-base);
  font-weight: var(--fw-medium);
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.navitem svg { width: 18px; height: 18px; margin-top: 2px; }
.navitem-label { flex: 1; min-width: 0; line-height: 1.3; }

.navitem[aria-current="page"] {
  background: var(--shell-raised);
  color: var(--shell-ink);
  font-weight: var(--fw-semibold);
}

.navitem[aria-current="page"] svg { color: var(--shell-ink); }

/* The second line says what the page is for, in the same plain words the page
   itself uses. It is one line: the rail is sized so it never wraps. */
.navitem-sub {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  font-size: var(--t-xs);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  color: var(--shell-ink-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navitem[aria-current="page"] .navitem-sub { color: var(--shell-ink-soft); }

/* A count answers "did I miss something" without opening anything,
   so it has to mean exactly what the page it points at means. */
.nav-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  flex: none;
  align-self: flex-start;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--shell-line);
  color: var(--shell-ink);
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.nav-badge.warn { background: var(--attention); color: oklch(26% 0.06 70); }

@media (hover: hover) and (pointer: fine) {
  .navitem:hover { background: var(--shell-raised); color: var(--shell-ink); }
}

.sidebar-foot {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--shell-line-soft);
  flex-shrink: 0;
}

.sysstatus {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-sm);
  color: var(--shell-ink-soft);
}

.sysstatus svg { width: 14px; height: 14px; color: var(--shell-ink-faint); }

/* ============================================================
   Workspace and top bar
   ============================================================ */
.workspace {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: var(--topbar-h);
  flex-shrink: 0;
  padding: var(--s2) var(--s3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  background: var(--shell);
  color: var(--shell-ink);
  border-bottom: 1px solid var(--shell-line-soft);
}

/* The identity yields and the account menu does not. At 200% text zoom the
   wordmark used to grow straight through the avatar; now it gives up width
   and ellipses instead, because losing the second half of "Real Estate
   Partners" costs nothing and losing the way to sign out costs everything. */
.topbar-left { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1 1 auto; }
.topbar-right { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 0 0 auto; }

/* On a phone the bar carries the identity, because the rail that
   normally carries it is not on screen. It is also the way back
   to the home screen, so it is a real target and not just a
   picture: 44px even though the mark inside it is 30. */
.topbar-brand {
  display: none;
  min-height: var(--ctl-md);
  padding: 0 var(--s2);
  margin-left: calc(var(--s2) * -1);
  border-radius: var(--r-md);
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.topbar-brand .brand-emblem,
.topbar-brand .brand-fallback { width: 30px; height: 30px; }
.topbar-brand .brand-copy .n { font-size: 1.15rem; }

.topbar-where {
  font-size: var(--t-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tight);
  color: var(--shell-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roleswap {
  min-height: var(--ctl-md);
  padding: 0 var(--s4);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--shell-line);
  border-radius: var(--r-pill);
  background: var(--shell-raised);
  color: var(--shell-ink);
  font-size: var(--t-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .roleswap:hover { background: var(--shell-hover); }
}

/* ---- User menu ---- */
.usermenu { position: relative; }

.usermenu-trigger {
  min-height: var(--ctl-md);
  min-width: var(--ctl-md);
  padding: 4px 10px 4px 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--shell-ink);
  font-size: var(--t-base);
  font-weight: var(--fw-semibold);
  transition: background var(--t-fast) var(--ease-out);
}

.usermenu-name { display: none; }
.usermenu-chev { color: var(--shell-ink-faint); }

@media (hover: hover) and (pointer: fine) {
  .usermenu-trigger:hover { background: var(--shell-raised); }
}

.usermenu-panel {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 8px);
  right: 0;
  min-width: 232px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  animation: menu-in var(--t-mid) var(--ease-out);
}

.usermenu-panel[hidden] { display: none; }

.usercard { padding: 10px 10px 8px; display: flex; align-items: center; gap: 10px; }
.usercard-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.usercard-name { display: block; font-size: var(--t-base); font-weight: var(--fw-semibold); color: var(--ink); }
.usercard-role { display: block; font-size: var(--t-xs); color: var(--ink-muted); }

.menu-divider { height: 1px; margin: 5px 0; background: var(--line-soft); }

.menu-item {
  width: 100%;
  min-height: var(--ctl-md);
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--r-md);
  color: var(--ink-soft);
  font-size: var(--t-base);
  font-weight: var(--fw-medium);
  text-align: left;
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

/* The shared icon helper emits a bare 24-viewBox svg with no
   intrinsic size, so every place that uses it has to say how big
   it is. Without this the sign-out glyph fills the whole menu. */
.menu-item svg { width: 18px; height: 18px; color: var(--ink-muted); }

@media (hover: hover) and (pointer: fine) {
  .menu-item:hover { background: var(--surface); color: var(--ink); }
}

/* ============================================================
   Phone tab bar

   Words, never icons alone, and at least 64px tall. This is the
   only navigation an agent gets below 960px.
   ============================================================ */
/* In the flow, not fixed over it.

   It used to be `position: fixed` with a matching `padding-bottom` on the
   scroller. That number is a guess, and the guess is wrong the moment the bar
   grows: at 200% text zoom the labels wrapped, the bar got taller, and it began
   covering the last row of every page. As the last flex child of the workspace
   it takes whatever height it needs and the scroller gets the rest, at any text
   size, with no number to keep in step. */
.tabbar {
  display: none;
  flex-shrink: 0;
  grid-auto-flow: column;
  /* minmax(0,...) and not 1fr: a bare `1fr` track refuses to shrink below its
     min-content, so at 320px the third destination was pushed off the edge of a
     fixed bar, where it could not even be scrolled to. */
  grid-auto-columns: minmax(0, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--shell);
  border-top: 1px solid var(--shell-line);
  box-shadow: 0 -6px 20px oklch(18% 0.02 262 / 0.22);
}

.tabbar a {
  min-width: 0;
  min-height: var(--tabbar-h);
  padding: 9px 4px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border-top: 2px solid transparent;
  color: var(--shell-ink-soft);
  transition:
    color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}

.tabbar a svg { width: 22px; height: 22px; }

/* The label wraps rather than truncating. "Needs a host" over two lines is
   still the name of the page; "Needs a…" is not. */
.tabbar .nav-label {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 5px;
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.tabbar a[aria-current="page"] {
  border-top-color: var(--shell-ink);
  background: var(--shell-raised);
  color: var(--shell-ink);
}

/* ============================================================
   Page
   ============================================================ */
.workspace-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s6) var(--s7) var(--s9);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.page-wide { max-width: 1480px; }

.pagehead {
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pagehead .when {
  font-size: var(--t-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-over);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pagehead h1 {
  font-size: var(--t-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-title);
  line-height: 1.1;
}

.pagehead .sub {
  max-width: 68ch;
  font-size: var(--t-md);
  color: var(--ink-muted);
}

/* ---- Section inside a page ---- */
.section { display: flex; flex-direction: column; gap: var(--s3); }

.section > h2 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tight);
}

.section .count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: var(--t-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.section .hint { margin-top: -4px; font-size: var(--t-base); color: var(--ink-muted); max-width: 68ch; }

.group { display: flex; flex-direction: column; gap: var(--s3); }

.group-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  font-size: var(--t-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tight);
}

.group-h span { font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--ink-muted); }

.mini-h {
  margin: var(--s5) 0 var(--s2);
  font-size: var(--t-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-over);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.mini-h:first-child { margin-top: 0; }

/* ============================================================
   Responsive shell
   ============================================================ */
@media (max-width: 959px) {
  .sidebar { display: none; }
  .topbar-brand { display: flex; }
  .topbar-where { display: none; }
  .tabbar { display: grid; }
  .page { padding: var(--s5) var(--s4) var(--s7); }
  .pagehead h1 { font-size: var(--t-2xl); }
  .usermenu-name { display: none; }
}

@media (min-width: 960px) {
  .usermenu-name { display: inline; }
  .toast { left: auto; right: var(--s5); bottom: var(--s5); margin: 0; }
  /* The rail already carries both of the office's destinations at
     this width, so the switch in the bar would be the same door
     twice. It exists for the phone, where there is no rail. */
  .roleswap { display: none; }
}

@media (max-width: 480px) {
  .page { padding: var(--s4) var(--s3) var(--s6); gap: var(--s4); }
  .topbar { padding: var(--s2); }
}

/* ============================================================
   Sign in

   The one screen with no shell. A dark field, a lifted card, and
   the brokerage's mark: the same material as the rail the app is
   about to hand you.
   ============================================================ */
.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s6) var(--s4);
  background: var(--shell);
  position: relative;
  overflow: hidden;
}

.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 75% at 50% -12%, var(--shell-glow) 0%, transparent 58%);
  pointer-events: none;
}

.gate-wrap {
  position: relative;
  z-index: 1;
  width: min(452px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.gate-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  text-align: center;
}

.gate-emblem { width: 60px; height: 60px; object-fit: contain; }

.gate-org {
  font-family: var(--font-brand);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--shell-ink);
}

.gate-app {
  margin-top: -6px;
  font-size: var(--t-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-over);
  text-transform: uppercase;
  color: var(--shell-ink-soft);
}

.gate-step {
  padding: var(--s6) var(--s6) var(--s5);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.gate-h { font-size: var(--t-xl); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); }
.gate-help { margin-top: 7px; font-size: var(--t-base); color: var(--ink-muted); }

.gate-label {
  display: block;
  margin: var(--s5) 0 7px;
  font-size: var(--t-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-soft);
}

.gate-input {
  width: 100%;
  min-height: var(--ctl-lg);
  padding: 11px var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: max(1rem, var(--t-base));
  outline: none;
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}

.gate-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.gate-input.code {
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.32em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.gate-err {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  color: var(--danger-ink);
}

.gate-btn {
  width: 100%;
  min-height: var(--ctl-lg);
  margin-top: var(--s4);
  padding: 0 var(--s4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-strong);
  border-radius: var(--r-md);
  background: var(--accent-strong);
  color: var(--accent-ink);
  font-size: var(--t-base);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-xs);
  transition:
    background var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}

.gate-btn:active { transform: scale(0.98); }

.gate-back {
  width: 100%;
  min-height: var(--ctl-md);
  margin-top: var(--s2);
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: var(--t-sm);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gate-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); }
.gate-welcome .avatar { animation: pop-in var(--t-slow) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .gate-btn:hover { background: var(--accent); }
  .gate-back:hover { color: var(--ink); }
}

/* ---- Demo accounts ---- */
.gate-demo { display: flex; flex-direction: column; gap: var(--s3); }

.gate-demo-t {
  font-size: var(--t-sm);
  color: var(--shell-ink-soft);
  text-align: center;
}

.gate-demo-list { display: grid; gap: var(--s2); }

.gate-demo-list button {
  width: 100%;
  min-height: var(--ctl-md);
  padding: 11px var(--s4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--s3);
  border: 1px solid var(--shell-line);
  border-radius: var(--r-lg);
  background: var(--shell-raised);
  color: var(--shell-ink);
  text-align: left;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}

.gate-demo-list b { font-size: var(--t-base); font-weight: var(--fw-semibold); }
.gate-demo-list span { font-size: var(--t-sm); color: var(--shell-ink-soft); }

.gate-reset {
  min-height: var(--ctl-md);
  border: 0;
  background: none;
  color: var(--shell-ink-faint);
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .gate-demo-list button:hover { background: var(--shell-hover); border-color: var(--shell-ink-faint); }
  .gate-reset:hover { color: var(--shell-ink-soft); }
}