/* =========================================================================
   Self-service shell — overrides on top of /core/css/core.css. "Harbor".

   No sidebar, one centred column, the nav in the toolbar — and the one
   gesture of this surface: a gun-metal band (the logo, the nav and the page
   title on one field) that the content cards lift over. Every colour is a
   token from tokens-account.css; see .agent/docs/aesthetic.md.
   ========================================================================= */

#app.no-sidebar {
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-areas:
    "brand toolbar"
    "main  main";
}

#app.no-sidebar #main {
  grid-area: main;
}

/* -- The band: logo, nav and page title on one gun-metal field ----------- */
.toolbar-brand, #toolbar { background: var(--band); border-color: transparent; }
/* The company's own logo (from eastwestcommunities.com, in its white frame).
   The name stays in the text, pushed out of view, so screen readers and a
   failed image still say "East West Communities". */
.brand-name {
  display: block;
  width: 138px;
  height: 61px;
  overflow: hidden;
  background: url('ewc-logo.jpg') left center / contain no-repeat;
  text-indent: 100%;
  white-space: nowrap;
}

/* Reuse .sidebar-nav / .nav-item for the toolbar nav so the active-item
   treatment and the router's #updateNav both work unchanged — only the
   axis, the colours and the active marker differ. */
#topnav {
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 0;
}
#topnav .nav-item { padding: 6px 12px; color: var(--band-mute); font-size: 15px; font-weight: 500; }
#topnav .nav-item .nav-dot { display: none; }
#topnav .nav-item:hover, #topnav .nav-item.active { background: transparent; color: var(--band-fg); }
#topnav .nav-item.active::before {
  inset: auto 0 -1px 0;
  width: auto;
  height: 2px;
  background: var(--horizon);
}
.user-menu-trigger { color: var(--band-mute); }
.user-menu-trigger:hover { background: transparent; border-color: var(--band-mute); color: var(--band-fg); }

/* The band continues under the page title; the first card overlaps its edge.
   `local` so it scrolls with the page rather than staying put. */
#main {
  background: linear-gradient(var(--band) 0 176px, var(--bg-0) 176px);
  background-attachment: local;
}

/* One comfortable reading measure — this shell is a handful of forms, not a
   directory browser. */
#main > #page-content {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 40px;
}

.page-header { margin-bottom: 28px; padding-bottom: 0; border-bottom: none; }
.page-header h1 {
  color: var(--band-fg);
  font: 600 38px/1.15 var(--f-display);
  letter-spacing: -0.01em;
}
.page-header h1::first-letter { color: inherit; }

/* -- Cards: white, lifted, titled in the serif — no grey header bar ------- */
.card { border: none; box-shadow: var(--shadow-md); margin-bottom: 20px; }
.card-header { padding: 22px 26px 0; background: transparent; border-bottom: none; }
.card-header span:not(.badge) { color: var(--fg); font: 600 21px/1.3 var(--f-display); }   /* the title, not a status badge beside it */
.card-body { padding: 8px 26px 26px; }
.toggle-row strong { font-size: 16px; }
.toggle-row .toggle-note { font-size: 14px; }

/* -- Sign-in: the logo top-left over the horizon (--login-texture) ------- */
/* Full-bleed. Inside the reading column its background was clipped to a
   760px box — a visible square behind the card. */
#app.login-active #page-content { max-width: none; padding: 0; }
#app.login-active .toolbar-brand {
  display: flex; position: fixed; top: 32px; left: 36px;
  padding: 0; background: transparent; border: none;
}
#app.login-active .brand-name { width: 168px; height: 74px; }
.login-card { border: none; box-shadow: var(--shadow-lg); padding: 38px 36px 34px; }
.login-card::before { display: none; }
.login-title {
  margin-bottom: 4px;
  color: var(--fg);
  font: 600 28px/1.2 var(--f-display);
  letter-spacing: 0; text-align: left; text-transform: none;
}
.login-title::before { content: none; }
.login-sub { margin-bottom: 26px; font-size: 15px; text-align: left; }
.login-card .btn-primary { padding: 12px; font-size: 16px; letter-spacing: 0; text-transform: none; }

@media (max-width: 680px) {
  #app.no-sidebar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "toolbar"
      "main";
    grid-template-rows: var(--toolbar-h) var(--toolbar-h) 1fr;
  }
  .toolbar-brand { border-right: none; border-bottom: none; }
  #main { background: linear-gradient(var(--band) 0 132px, var(--bg-0) 132px); background-attachment: local; }
  #main > #page-content { padding-top: 28px; }
  .page-header h1 { font-size: 30px; }
  #app.login-active .toolbar-brand { top: 24px; left: 24px; }
}