/* ============================================================================
   PRISM — the shell

   The chrome: one sidebar, one toolbar, one scrolling pane. Built once when the
   app starts and never rebuilt, which is most of why navigation feels instant —
   a click replaces the contents of #view and nothing else.

   The sidebar follows the macOS/iCloud pattern rather than a web nav: a
   translucent rail, sections in small grey capitals, rows as rounded rects, and
   the selected row filled with the accent. The workspace switcher sits at the
   top where Apple puts the account, because that is the same kind of control —
   it changes what everything below it is about.

   WHY THIS IS IN `house` AND NOT `base`. The layer order is base < view <
   house, and a view's own <style> is wrapped in `view` by the runtime. The
   ported Veloro screens carry a lot of generic CSS — bare `a`, `body`,
   line-heights — written when each was a document to itself, and in `base` the
   chrome lost every one of those ties on layer order alone: opening Atlas
   visibly changed the row height of the sidebar. The chrome is not a default
   for a view to override; it is the frame the view sits inside. `house` is
   exactly the layer that says so.
   ========================================================================== */

@layer house {

/* ---------------------------------------------------------------- LAYOUT */

body { display: flex; overflow: hidden; }

#shell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#view {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity var(--dur-fast) var(--ease);
}
#view[data-loading] { opacity: .5; }

/* A view's own <main>/.wrap assumes a document to itself; inside the app it is
   just the scroll container's content. */
#view > main,
#view > .wrap { max-width: 1240px; margin: 0 auto; padding: var(--sp-6) var(--sp-10) var(--sp-16); }

/* ---------------------------------------------------------------- SIDEBAR */

#side {
  flex: 0 0 var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-right: .5px solid var(--glass-line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- workspace switcher ---- */

.ws {
  position: relative;
  flex: none;
  padding: var(--sp-1) 0 var(--sp-2);
}

.ws-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: transparent;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.ws-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ws-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* The workspace mark: the one place a brand's own colour is allowed to appear
   in the chrome. Everything else in the rail is grayscale, so this reads as
   identity rather than decoration. */
.ws-mark {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 590;
  letter-spacing: 0;
  color: #fff;
  background: var(--ws-color, var(--ink));
  box-shadow: var(--shadow-1);
}

.ws-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ws-name {
  font-size: var(--fs-meta);
  font-weight: 590;
  letter-spacing: var(--tr-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-role {
  font-size: var(--fs-caption);
  color: var(--ink-4);
  letter-spacing: var(--tr-caption);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ws-chev { margin-left: auto; flex: none; width: 14px; height: 14px; color: var(--ink-4); }

/* ---- the popover ---- */

.ws-pop {
  position: absolute;
  top: calc(100% - 2px); left: var(--sp-1); right: var(--sp-1);
  z-index: 60;
  padding: var(--sp-1);
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--blur-lg);
  backdrop-filter: var(--blur-lg);
  border: .5px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  gap: 1px;
  transform-origin: top center;
  animation: pop var(--dur) var(--spring);
}
.ws-pop[hidden] { display: none; }

@keyframes pop {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.ws-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-meta);
  color: var(--ink);
  text-align: left;
  width: 100%;
  transition: background var(--dur-fast) var(--ease);
}
.ws-opt:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-opt .ws-mark { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.ws-opt .tick { margin-left: auto; width: 14px; height: 14px; color: var(--accent); opacity: 0; }
.ws-opt[aria-current="true"] .tick { opacity: 1; }

.ws-pop .sep { height: .5px; background: var(--glass-line); margin: var(--sp-1) var(--sp-2); }

/* ---- nav ---- */

.nav { display: flex; flex-direction: column; gap: 1px; }

.nav-sec {
  padding: var(--sp-4) var(--sp-2) var(--sp-1);
  font-size: var(--fs-caption);
  font-weight: 590;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.nav-sec:first-child { padding-top: var(--sp-2); }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-2);
  min-height: 30px;
  border-radius: 7px;
  color: var(--ink-2);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-body);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); text-decoration: none; }

/* The selected row is a filled rounded rect — the macOS sidebar signature. */
.nav-item.on {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}
.nav-item.on .nav-ico { color: var(--accent-ink); opacity: 1; }

.nav-ico { flex: none; width: 17px; height: 17px; color: var(--ink-3); opacity: .9; }
.nav-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a child of the row above it: indented to the parent's label, no icon, so the
   column of icons still reads as the list of services */
.nav-item.sub { padding-left: calc(var(--sp-2) + 17px + var(--sp-2)); }

.nav-count {
  margin-left: auto;
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.nav-item.on .nav-count { background: rgba(255,255,255,.22); color: #fff; }

.nav-foot { margin-top: auto; padding-top: var(--sp-3); display: flex; flex-direction: column; gap: 1px; }

/* ---------------------------------------------------------------- TOOLBAR */

#bar {
  flex: none;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-10);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom: .5px solid var(--glass-line);
  z-index: 20;
}
#bar .t {
  font-size: var(--fs-lg);
  font-weight: 590;
  letter-spacing: var(--tr-title);
  white-space: nowrap;
}
#bar .s {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bar .spacer { flex: 1; }

#menu {
  display: none;
  width: 30px; height: 30px;
  flex: none;
  align-items: center; justify-content: center;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  cursor: pointer;
}
#menu:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
#menu svg { width: 17px; height: 17px; }

/* ---- the theme control ----
   Three states, because "system" is a real answer and not the absence of one:
   follow the machine, or override it in either direction. */
.theme {
  display: inline-flex; gap: 2px; padding: 2px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: var(--r-pill);
}
.theme button {
  width: 26px; height: 22px; padding: 0;
  display: grid; place-items: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-3); border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
}
.theme svg { width: 14px; height: 14px; }

/* who you are, at the end of the toolbar */
.me {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.me-dot {
  width: 24px; height: 24px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink-2);
  font-size: 10.5px; font-weight: 600;
}

/* ------------------------------------------------------- ONE VOICE INSIDE
   #view

   The fourteen ported screens were each a document to itself, so several set
   `body`, `html` or their own wrapper's ground and type — and because a view's
   <style> lands in @layer view, those beat the base layer and the application
   changed colour and typeface as you moved through it. That is what stopped it
   reading as one product.

   These rules are in `house`, which outranks `view`, so the page keeps one
   ground and one voice whatever a screen asks for. Deliberately narrow: only
   the things that must agree across screens — the canvas, the typeface, the
   base colour. A view still owns its own layout, spacing and components. */

body, html {
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
}

/* A view's wrapper is content inside the scroller, not a page. */
#view > main, #view > .wrap, #view > .ov {
  background: transparent;
}

/* Ported screens set type in px against their own scales. The family is what
   has to agree; the sizes are theirs. */
#view, #view input, #view select, #view textarea, #view button {
  font-family: var(--sans);
}
#view code, #view kbd, #view pre, #view samp, #view .mono, #view [class*="mono"] {
  font-family: var(--mono);
}

/* --------------------------------------------------------------- MESSAGES */

.view-error, .view-empty {
  margin: var(--sp-16) auto;
  max-width: 460px;
  padding: var(--sp-6);
  text-align: center;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  color: var(--ink-3);
  font-size: var(--fs-meta);
  line-height: 1.55;
}
.view-error h2, .view-empty h2 {
  font-size: var(--fs-title-3);
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

/* ------------------------------------------------------------- RESPONSIVE
   Below 900px the rail becomes a drawer. It keeps its material — a sheet that
   slides over the content is exactly what the vibrancy is for. */

@media (max-width: 900px) {
  #menu { display: flex; }
  #side {
    position: fixed; inset: 0 auto 0 0; z-index: 90;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-3);
  }
  body.side-open #side { transform: none; }
  body.side-open::after {
    content: ""; position: fixed; inset: 0; z-index: 89;
    background: rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  #bar { padding: 0 var(--sp-4); }
  #view > main, #view > .wrap { padding: var(--sp-5) var(--sp-4) var(--sp-12); }
}

} /* @layer house */