/* the shell (rail, top bar, tab bar, account menu, search palette), the bare pages (sign in, code, terms, join), /more, and
   the system states (offline bar, not found, failed, toasts, skeleton rows, the update bar). Design round: DIRECTION.md.
   One white theme; no prefers-color-scheme. */

.app { min-height: 100vh; min-height: 100dvh; }
.frame { min-width: 0; }
.view { min-width: 0; }
.h-desk { display: none; }
/* Below 1024 px the top bar shows the screen's name; the page's h1 stays for a screen reader, out of sight
   (Codex design look 8). Only headings: a hidden link would still take focus. */
@media (max-width: 1023px) {
  h1.h-desk { display: block; position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1024px) { .h-desk { display: block; } }

.icon { flex: none; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--mist); font-weight: 600; flex: none; }
.row-ic { display: flex; color: var(--steel); flex: none; }
a.row-main, a.need-link { color: inherit; text-decoration: none; }
a.row-main:hover { text-decoration: none; }

/* ---------------------------------------------------------------- top bar */
:root { --tabs: 50px; }   /* the v2 tab bar's height (look v2); old docked bars and page padding read it */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s3);
  height: calc(var(--top) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) calc(var(--pad) - 8px) 0 var(--pad);
  background: var(--white); border-bottom: 1px solid var(--concrete); }

.offline { position: sticky; top: calc(var(--top) + env(safe-area-inset-top)); z-index: 19; min-height: 40px; display: flex;
  align-items: center; justify-content: center; padding: 8px var(--pad); background: var(--ink); color: var(--white);
  font-size: 14px; line-height: 20px; font-weight: 500; text-align: center; }
.offline[hidden] { display: none; }

/* ---------------------------------------------------------------- tab bar (phone) */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabs) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--white); border-top: 1px solid var(--concrete); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 44px;
  color: var(--steel); font-size: 14px; line-height: 18px; font-weight: 500; text-decoration: none; }
.tab:hover { text-decoration: none; }
.tab.on { color: var(--ink); font-weight: 600; }
.tab.on .icon { stroke-width: 2.3; }
.tabs.tabs-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------------------------------------------------------------- left rail (desktop) */
.rail { display: none; }
@media (min-width: 1024px) {
  .rail { display: flex; flex-direction: column; position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: var(--rail);
    padding: 20px 16px 16px; background: var(--white); border-right: 1px solid var(--concrete); overflow-y: auto; }
  .frame { margin-left: var(--rail); }
  .tabs { display: none; }
  .topbar { padding: 0 var(--pad); }

}

/* ---------------------------------------------------------------- account menu */
.menu { position: fixed; z-index: 75; padding: 6px; background: var(--white); border: 1px solid var(--concrete);
  border-radius: var(--r-card); box-shadow: var(--shadow-sheet); animation: ds-rise var(--t-fast) var(--ease); }

/* ---------------------------------------------------------------- search palette */
.pal-scrim { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh var(--s4) 0; background: rgba(14, 17, 22, .32); }
.pal { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 66vh; overflow: hidden;
  background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-sheet); animation: ds-rise var(--t-med) var(--ease); }
.pal-top { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--concrete); color: var(--steel); }
.pal-lens { display: flex; flex: none; }
.pal-input { flex: 1; min-width: 0; min-height: 60px; padding: 0 4px; background: none; border: 0; outline: none; color: var(--ink); font-size: 16px; }
.pal-input::placeholder { color: var(--steel); }
.pal-close { display: none; }
.pal-list { flex: 1; overflow-y: auto; padding: 8px 8px 12px; }
.pal-h { position: relative; margin: 14px 12px 6px; padding-bottom: 8px; font: 700 16px/18px var(--num); letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink); }
.pal-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 20px; height: 3px; border-radius: 2px; background: var(--orange); }
.pal-list > .pal-h:first-child { margin-top: 8px; }
.pal-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px; border-radius: var(--r-ctl); cursor: pointer; }
.pal-item[aria-selected="true"] { background: var(--mist); }
.pal-item[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--ink); }
.pal-ic { display: flex; flex: none; color: var(--steel); }
.pal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pal-1 { font-size: 16px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-2 { font-size: 14px; line-height: 20px; color: var(--steel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-side { flex: none; font: 700 24px/26px var(--num); }
.pal-soft { flex: none; font-size: 14px; line-height: 20px; color: var(--steel); }
.pal-empty { padding: 28px 12px 20px; }
.pal-empty-h { margin: 0 0 4px; font-size: 17px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.pal-empty-p { margin: 0; color: var(--steel); }
.pal-hint { padding: 10px 16px; border-top: 1px solid var(--concrete); font-size: 14px; line-height: 20px; color: var(--steel); }
@media (max-width: 1023px) {
  .pal-scrim { padding: 0; background: var(--white); }
  .pal { max-width: none; max-height: none; height: 100%; border-radius: 0; box-shadow: none; animation: none;
    padding-top: env(safe-area-inset-top); }
  .pal-top { padding-right: 8px; }
  .pal-close { display: inline-flex; flex: none; border: 0; background: none; padding: 0 12px; }
  .pal-list { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .pal-hint { display: none; }
}

/* ---------------------------------------------------------------- the order flow is full screen on the phone */
@media (max-width: 1023px) {
  .app[data-route="order"] .topbar, .app[data-route="order"] .tabs { display: none; }
}

/* ---------------------------------------------------------------- the person's mark */
.avatar { background: var(--live-tint); color: var(--ink); font-weight: 600; }
.avatar-s { width: 36px; height: 36px; font-size: 15px; }
.avatar-l { width: 56px; height: 56px; font: 700 28px/1 var(--num); }

/* ---------------------------------------------------------------- screens without the shell: white, the wordmark, one primary */
.app[data-bare] .rail, .app[data-bare] .topbar, .app[data-bare] .tabs { display: none; }
.app[data-bare] .frame { margin-left: 0; }

/* Six code boxes stay at least 44 px wide on the narrowest phones (Codex design look 2). */
@media (max-width: 359px) {  .code-boxes { gap: 4px; } }
.providers { display: flex; flex-direction: column; gap: var(--s3); }
.provider { gap: 10px; }
.or { display: flex; align-items: center; gap: var(--s3); margin: 20px 0; color: var(--steel); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--concrete); }
.notice { margin: 0 0 20px; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--stop-tint); color: var(--stop);
  font-size: 14px; line-height: 20px; font-weight: 500; }

.code-boxes { display: flex; gap: 8px; }
.code-box { flex: 1; min-width: 0; height: 60px; padding: 0; text-align: center; font: 700 32px/1 var(--num); color: var(--ink);
  background: var(--white); border: 1px solid var(--field); border-radius: var(--r-ctl);
  transition: border-color var(--t-fast) var(--ease); }
.code-box:hover { border-color: var(--steel); }
/* The box being typed in takes the ink border every field takes on focus; the heavier ring waits for a real Tab. */
.code-box:focus { border-color: var(--ink); }
html.kbd .code-box:focus-visible { box-shadow: inset 0 0 0 1px var(--ink); }
.code-box.filled { border-color: var(--ink); }
.code-box:disabled { background: var(--mist); }
.code-error { margin: 12px 0 0; color: var(--stop); font-size: 14px; line-height: 20px; font-weight: 500; }
.code-info { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--steel); }
.code-resend { margin-top: 12px; min-height: 44px; }
.code-resend .link { min-height: 44px; }
.code-again[disabled] { color: var(--steel); cursor: default; text-decoration: none; }
.tm-row { margin-bottom: 8px; min-height: 44px; align-items: center; font-size: 15px; line-height: 22px; }
.tm-row input { width: 24px; height: 24px; }
.tm-row .help { display: block; color: var(--steel); font-size: 14px; line-height: 20px; }
.tm-sender { margin: 16px 0 28px; }
.join-card { margin-bottom: 12px; padding: 16px; border: 1px solid var(--concrete); border-radius: var(--r-card); }
.join-name { font-size: 20px; line-height: 26px; font-weight: 600; }
.join-sub { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--steel); }
.join-card .error { margin: 12px 0 0; color: var(--stop); font-size: 14px; line-height: 20px; }
.join-confirm { margin-top: 12px; }
.join-confirm p { margin: 0 0 12px; }
.join-actions { display: flex; gap: 12px; margin-top: 16px; }
.join-actions .btn { flex: 1; min-height: 48px; }

/* ---------------------------------------------------------------- Home */
.home .card { overflow: hidden; }
.finish-slot[hidden] { display: none; }
.install { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-card); }
.install-text { margin: 0; }
.install-actions { display: flex; align-items: center; gap: var(--s4); }
.install-actions .link { min-height: 44px; padding: 0 8px; }
.how-to { margin: 0 0 var(--s5); padding-left: 20px; }
.how-to li { margin-bottom: var(--s2); }
.row .btn { flex: none; }

/* ---------------------------------------------------------------- /more */
.more { max-width: 640px; padding-top: 20px; }
.more-title { margin: 4px 0 24px; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.005em; }
.more-who { display: flex; align-items: center; gap: 16px; margin: 0 0 var(--sec-gap); }
.more-who-main { min-width: 0; }
.more-name { font-size: 20px; line-height: 26px; font-weight: 600; overflow-wrap: anywhere; }
.more-sub { font-size: 14px; line-height: 20px; color: var(--steel); overflow-wrap: anywhere; }
.more .rows .row { border-top-color: var(--concrete); }
.more .row > .icon:last-child { color: var(--steel); }
.more-acct.on > .icon:last-child { color: var(--ink); }
@media (min-width: 1024px) { .more { padding-top: 32px; } }

/* ---------------------------------------------------------------- system states: toasts, the update bar, skeletons, empty */
#toasts { bottom: calc(var(--tabs) + 32px + env(safe-area-inset-bottom)); }
body:has(.app[data-bare]) #toasts { bottom: calc(16px + env(safe-area-inset-bottom)); }
body.has-update #toasts { bottom: calc(var(--tabs) + 104px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  #toasts, body:has(.app[data-bare]) #toasts { bottom: 24px; }
  body.has-update #toasts { bottom: 96px; }
}
.toast { display: flex; align-items: flex-start; gap: 10px; background: var(--ink); color: var(--white); border-radius: var(--r-ctl);
  padding: 14px 16px; font-size: 15px; line-height: 22px; font-weight: 500; box-shadow: none;
  animation: ds-rise var(--t-fast) var(--ease); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.toast.out { opacity: 0; transform: translateY(6px); }
.toast-ic { display: flex; flex: none; margin-top: 1px; color: #5CC48A; }
.toast-error { background: var(--stop); }
.toast-error .toast-ic { color: var(--white); }
.toast-t { min-width: 0; overflow-wrap: anywhere; }
.update { position: fixed; z-index: 62; left: 50%; transform: translateX(-50%); width: min(92vw, 420px); display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: var(--r-ctl); background: var(--ink); color: var(--white);
  bottom: calc(var(--tabs) + 32px + env(safe-area-inset-bottom)); font-size: 15px; line-height: 22px; font-weight: 500;
  animation: ds-rise var(--t-fast) var(--ease); }
.update .btn { flex: none; min-height: 44px; }
@media (min-width: 1024px) { .update { left: calc(var(--rail) + 24px); transform: none; bottom: 24px; } }
.skeleton .sk-row { animation: sk-pulse 1.4s ease-in-out infinite; }
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .skeleton .sk-row { animation: none; } }
.view > .failed, .page > .nf { padding: 40px var(--pad); max-width: 560px; }
.view > .failed h2, .nf h2 { font-size: 24px; line-height: 30px; }
.view > .failed p, .nf p { font-size: 16px; line-height: 24px; }
/* S10 (Opus): #app carries .v2, so base.css's in-page failed block and skeleton reach a screen the router draws straight
   into the view; there they keep the page's margin as before */
.v2 .view > .empty.failed { padding: 40px var(--v-gut); }
.v2 .view > .empty.failed h2 { font-size: 24px; line-height: 30px; }
.v2 .view > .skeleton { padding: 8px var(--v-gut); }
@media (min-width: 1024px) { .v2 .view > .empty.failed { padding: 40px 48px; } .v2 .view > .skeleton { padding: 28px 48px; } }

/* The sender line under the marketing box on the terms step (O12): kept with the terms rows above. */

/* ================================================================ look v2: the shell (design/v2/SPEC.md 4, 5, 7.19)
   The rail, the top row, the tab bar, the offline line, toasts, the account menu, the palette, the update bar, not found
   and the tenants page. Each root carries .v2 (base.css holds the tokens); #app and .frame never do. The old rules above
   stay until the cleanup (S10), because the bare pages, Home and More still use some of them. */
.app[data-bare] .v-rail, .app[data-bare] .v-top, .app[data-bare] .v-tabs { display: none; }
/* No top bar at 1024 and up: old sticky offsets read --top as its height. */
@media (min-width: 1024px) { :root { --top: 0px; } }
@media (max-width: 1023px) {
  .app[data-route="order"] .v-top, .app[data-route="order"] .v-tabs { display: none; }
}

/* ---------------------------------------------------------------- the phone's top row */
.v2.v-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px;
  height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0 var(--v-gut);
  background: var(--v-white); border-bottom: 1px solid var(--v-hair); }
.v2 .v-top-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; }
.v2 .v-top-back { margin-left: -12px; }
.v2 .v-top-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 24px; font-weight: 600; }
.v2 .v-top-sw { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; max-width: 100%; color: var(--v-ink); }
.v2 .v-top-sw .icon { flex: none; color: var(--v-mute); }
.v2 .v-top-r { display: flex; align-items: center; gap: 2px; }
.v2 .v-av { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.v2 .v-av-i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--v-fill);
  box-shadow: inset 0 0 0 1px var(--v-hair); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--v-ink-2); }
.v2 .v-av.on .v-av-i { box-shadow: inset 0 0 0 2px var(--v-ink); }
.v2 .v-av-dot { position: absolute; top: 8px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--v-ink);
  box-shadow: 0 0 0 2px var(--v-white); }
@media (min-width: 1024px) { .v2.v-top { display: none; } }

.v2.v-offline { position: sticky; top: calc(var(--top) + env(safe-area-inset-top)); z-index: 19; display: flex; align-items: center;
  justify-content: center; min-height: 40px; padding: 8px var(--v-gut); background: var(--v-ink); color: var(--v-white);
  font-size: 14px; line-height: 20px; font-weight: 500; text-align: center; }
@media (min-width: 1024px) { .v2.v-offline { top: 0; } }

/* ---------------------------------------------------------------- the phone's tab bar: Home, Jobs, Order, Insights, Money */
.v2.v-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  height: var(--v-tabs); padding: 0 4px env(safe-area-inset-bottom); background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--v-hair); }
.v2 .v-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 50px;
  color: var(--v-mute); }
.v2 .v-tab .v-t-xs { font-weight: 600; color: inherit; }
.v2 .v-tab.on { color: var(--v-ink); }
.v2 .v-tab.on .icon { stroke-width: 2.3; }
.v2 .v-tab-order { color: var(--v-ink); }
.v2 .v-tab-ord { display: grid; place-items: center; width: 46px; height: 30px; margin-bottom: 1px; border-radius: 10px;
  background: var(--v-orange); color: var(--v-on-orange); transition: transform var(--v-fast) var(--v-ease); }
.v2 .v-tab-order:active .v-tab-ord { transform: scale(.94); }
@media (min-width: 1024px) { .v2.v-tabs { display: none; } }

/* ---------------------------------------------------------------- the rail (1024 and up) */
.v2.v-rail { display: none; }
@media (min-width: 1024px) {
  .v2.v-rail { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: var(--v-rail);
    padding: 20px 14px 16px; overflow-y: auto; background: var(--v-fill); border-right: 1px solid var(--v-hair); }
  .app > .frame { margin-left: 248px; }
  .app[data-bare] > .frame { margin-left: 0; }
}
.v2 .v-rail-logo { display: flex; align-items: center; min-height: 36px; margin: 0 8px 14px; }
.v2 .v-rail-logo img { height: 26px; width: auto; }
.v2 .v-rail-sw { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-bottom: 4px; padding: 6px 8px;
  border-radius: var(--v-r-ctl); color: var(--v-ink); text-align: left; }
.v2 .v-rail-sw:hover { background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-hair); }
.v2 .v-rail-sw .icon { flex: none; margin-left: auto; color: var(--v-mute); }
.v2 .v-rail-sw-dot { flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--v-ink); }
.v2 .v-rail-sw-dot:not([hidden]) + .icon { margin-left: 0; }
.v2 .v-rail-sw-dot[hidden] { display: none; }
.v2 .v-rail-sw-m { display: flex; flex-direction: column; min-width: 0; }
.v2 .v-rail-sw-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 19px; font-weight: 700; }
.v2 .v-rail-sw-r { font-size: 13px; line-height: 17px; color: var(--v-mute); }
/* initials in a circle: the account's on its row, the person's at the foot */
.v2 .v-rail-av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--v-white);
  box-shadow: inset 0 0 0 1px var(--v-hair-2); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .02em; color: var(--v-ink); }
/* Order a repair, the one filled button; Book an inspection outlined under it (base.css .v-btn-line) */
.v2.v-rail .v-btn-o { margin-top: 10px; }
.v2.v-rail .v-btn-line { margin-top: 8px; }
.v2 .v-rail-search { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; margin-top: 10px; padding: 0 10px;
  border-radius: var(--v-r-ctl); color: var(--v-mute); font-size: 14px; line-height: 20px; font-weight: 500; text-align: left; }
.v2 .v-rail-search:hover { background: var(--v-white); color: var(--v-ink); }
.v2 .v-rail-search-w { flex: 1; }
.v2 .v-rail-key { font-size: 13px; line-height: 18px; color: var(--v-soft); }
.v2 .v-rail-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.v2 .v-rail-a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 10px;
  border-radius: 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-ink-2); }
.v2 .v-rail-a:hover { background: var(--v-white); color: var(--v-ink); }
.v2 .v-rail-a.on { background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-hair); font-weight: 600; color: var(--v-ink); }
.v2 .v-rail-w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2 .v-rail-n { flex: none; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--v-mute); }
.v2 .v-rail-gap { height: 14px; }
/* the foot, on a hairline: Call Roundhouse (it dials), the person and their menu, the Nezam logo */
.v2 .v-rail-foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--v-hair); }
.v2 .v-rail-call, .v2 .v-rail-me { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px;
  border-radius: var(--v-r-ctl); color: var(--v-ink); text-align: left; text-decoration: none; }
.v2 .v-rail-call:hover, .v2 .v-rail-me:hover { background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-hair); }
.v2 .v-rail-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--v-white);
  box-shadow: inset 0 0 0 1px var(--v-hair-2); color: var(--v-ink); }
.v2 .v-rail-call-m { display: flex; flex-direction: column; min-width: 0; }
.v2 .v-rail-call-t { font-size: 14px; line-height: 19px; font-weight: 600; }
.v2 .v-rail-call-s { font-size: 13px; line-height: 17px; color: var(--v-mute); white-space: nowrap; }
.v2 .v-rail-me-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 19px; font-weight: 600; }
.v2 .v-rail-me .icon { flex: none; color: var(--v-mute); }
.v2 .v-rail-foot .v-credit { margin: 6px 8px 0; }
.v2 .v-rail-foot .v-credit a { min-height: 36px; }

/* ---------------------------------------------------------------- the account menu */
.v2.v-menu { position: fixed; z-index: 75; padding: 6px; background: var(--v-white); border-radius: var(--v-r-surf);
  box-shadow: 0 0 0 1px var(--v-hair), 0 12px 32px rgba(14, 17, 22, .14); }
.v2 .v-menu-i { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px;
  padding: 6px 10px; border-radius: var(--v-r-ctl); text-align: left; }
.v2 .v-menu-i:hover { background: var(--v-fill); }
.v2 .v-menu-i .icon { flex: none; color: var(--v-mute); }
.v2 .v-menu-i.on .icon { color: var(--v-ink); }
.v2 .v-menu-m { display: flex; flex-direction: column; min-width: 0; }
.v2 .v-menu-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 21px; font-weight: 600; }
.v2 .v-menu-2 { font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2 .v-menu-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2 .v-menu-sep { margin-top: 6px; border-top: 1px solid var(--v-hair); border-radius: 0 0 var(--v-r-ctl) var(--v-r-ctl); }

/* ---------------------------------------------------------------- the search palette */
.v2.v-pal-scrim { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 0; background: rgba(14, 17, 22, .32); }
.v2 .v-pal { display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: 66vh; overflow: hidden; background: var(--v-white);
  border-radius: var(--v-r-surf); box-shadow: 0 0 0 1px var(--v-hair), 0 16px 40px rgba(14, 17, 22, .16); }
.v2 .v-pal-top { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--v-hair); color: var(--v-mute); }
.v2 .v-pal-lens { display: flex; flex: none; }
.v2 .v-pal-in { flex: 1; min-width: 0; min-height: 56px; padding: 0 4px; border: 0; outline: none; background: none; font-size: 16px; color: var(--v-ink); }
.v2 .v-pal-in::placeholder { color: var(--v-mute); }
html.kbd .v2 .v-pal-in:focus-visible { outline: none; }
.v2 .v-pal-x { display: none; }
.v2 .v-pal-list { flex: 1; overflow-y: auto; padding: 6px 8px 10px; }
.v2 .v-pal-h { margin: 12px 10px 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--v-mute); }
.v2 .v-pal-o { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: var(--v-r-ctl); cursor: pointer; }
.v2 .v-pal-o[aria-selected="true"] { background: var(--v-fill); box-shadow: inset 2px 0 0 var(--v-ink); }
.v2 .v-pal-ic { display: flex; flex: none; color: var(--v-mute); }
.v2 .v-pal-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v2 .v-pal-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 21px; font-weight: 600; }
.v2 .v-pal-2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2 .v-pal-soft { flex: none; font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2 .v-pal-side { flex: none; font-size: 15px; line-height: 21px; font-weight: 600; }
.v2 .v-pal-empty { padding: 24px 10px 16px; }
.v2 .v-pal-empty-h { font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.v2 .v-pal-empty-p { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2 .v-pal-hint { padding: 10px 16px; border-top: 1px solid var(--v-hair); }
@media (max-width: 1023px) {
  .v2.v-pal-scrim { padding: 0; background: var(--v-white); }
  .v2 .v-pal { max-width: none; max-height: none; height: 100%; border-radius: 0; box-shadow: none; padding-top: env(safe-area-inset-top); }
  .v2 .v-pal-x { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 16px; font-weight: 500; color: var(--v-ink); }
  .v2 .v-pal-list { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .v2 .v-pal-hint { display: none; }
}

/* ---------------------------------------------------------------- toasts and the update bar */
#toasts.v2.v-toasts { position: fixed; z-index: 95; left: 50%; transform: translateX(-50%); width: min(92vw, 420px); display: grid; align-content: start; gap: 8px;
  bottom: calc(var(--v-tabs) + 16px); pointer-events: none; }
body:has(.app[data-bare]) #toasts.v2.v-toasts { bottom: calc(16px + env(safe-area-inset-bottom)); }
body.has-update #toasts.v2.v-toasts { bottom: calc(var(--v-tabs) + 84px); }
/* An old money screen pins toasts to the top on the phone (money.css); never both insets at once. */
@media (max-width: 1023px) { body:has(.mo-act) #toasts.v2.v-toasts { bottom: auto; } }
/* Over a sheet or a flow, toasts sit at the top, clear of its docked action (after the rules above, so it wins). */
body:has(.v-layer, .v-flow, .v-viewer) #toasts.v2.v-toasts { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
@media (min-width: 1024px) {
  #toasts.v2.v-toasts, body:has(.app[data-bare]) #toasts.v2.v-toasts { left: calc(var(--v-rail) + 24px); transform: none; bottom: 24px; }
  body:has(.app[data-bare]) #toasts.v2.v-toasts { left: 50%; transform: translateX(-50%); }
  body.has-update #toasts.v2.v-toasts { bottom: 88px; }
}
#toasts.v2.v-toasts .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-radius: var(--v-r-ctl);
  background: var(--v-ink); color: var(--v-white); box-shadow: 0 8px 24px rgba(14, 17, 22, .18); font-size: 15px; line-height: 21px; font-weight: 500;
  transition: opacity var(--v-fast) var(--v-ease), transform var(--v-fast) var(--v-ease); animation: v-rise var(--v-fast) var(--v-ease); }
#toasts.v2.v-toasts .toast.out { opacity: 0; transform: translateY(6px); }
#toasts.v2.v-toasts .toast-ic { display: flex; flex: none; margin-top: 1px; color: #7FD39F; }
#toasts.v2.v-toasts .toast-error { background: var(--v-red); }
#toasts.v2.v-toasts .toast-error .toast-ic { color: var(--v-white); }
#toasts.v2.v-toasts .toast-t { min-width: 0; overflow-wrap: anywhere; }
@keyframes v-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.v2.v-update { position: fixed; z-index: 62; left: 50%; transform: translateX(-50%); width: min(92vw, 420px); display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: var(--v-r-ctl); background: var(--v-ink); color: var(--v-white);
  bottom: calc(var(--v-tabs) + 16px); font-size: 15px; line-height: 21px; font-weight: 500; animation: v-rise var(--v-fast) var(--v-ease); }
@media (min-width: 1024px) { .v2.v-update { left: calc(var(--v-rail) + 24px); transform: none; bottom: 24px; } }

/* ---------------------------------------------------------------- not found, the tenants page, More's credit */
.v2.v-nf { display: grid; justify-items: start; gap: 12px; max-width: 560px; padding: 40px var(--v-gut); }
.v2 .v-nf-credit { margin-top: 40px; }
@media (min-width: 1024px) { .v2.v-nf { padding: 56px 48px; } }
.v2.v-tenants { display: flex; justify-content: center; min-height: 100vh; min-height: 100dvh;
  padding: calc(40px + env(safe-area-inset-top)) var(--v-gut) calc(48px + env(safe-area-inset-bottom)); }
.v2 .v-tenants-in { width: 100%; max-width: 440px; display: grid; gap: 14px; align-content: start; }
.v2 .v-tenants-logo { height: 26px; width: auto; margin-bottom: 18px; }
.v2 .v-tenants-acts { display: grid; gap: 8px; margin: 8px 0; }
.v2 .v-tenants-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--v-ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; }
@media (min-width: 640px) { .v2.v-tenants { padding-top: 12vh; } }
.v2.v-more-credit { margin-top: 28px; padding: 0 0 8px; }
/* At 1024 the rail's foot carries the credit, so not found and More do not say it again. */
@media (min-width: 1024px) { .app:not([data-bare]) .v-nf-credit, .v2.v-more-credit { display: none; } }

/* Print: the shell's chrome, the credit with it, never prints (a quote or an invoice prints clean). */
@media print {
  .v-rail, .v-top, .v-tabs, #toasts, .v-update, .v-offline, .v-menu, .v-pal-scrim { display: none !important; }
  .app > .frame { margin-left: 0 !important; }
}
/* A modal layer holds the page still behind it. */
html:has(.v-layer, .v-flow, .v-viewer, .v-pal-scrim) { overflow: hidden; }

/* The person's own photo in place of their initials (portal/photo.py, shell.js face()): it fills the circle it sits in,
   the top bar's, the rail's and More's alike; initials come back when there is none or it does not load. */
.v-has-face { overflow: hidden; padding: 0; }
.v-has-face > .v-face { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }