/* Enterprise shell (Naja 11-07: "it doesn't come across as one of those enterprise tools. A small portion of the screen
   is utilized with embedded views."). Loaded last, scoped to the v9 shell. The page uses the whole viewport beside the
   sidebar (no 1400 px centered column); one gutter token scales from a phone to 2560 px; the global top bar holds the
   page header, search and data health in one row, with the workspace (business) switcher under it; nested cards are
   flattened so no view sits as a card inside a card; density steps up at 1600 and 2200 px. */
.shell.v9 { --v9-gut: clamp(16px, 1.25vw + 6px, 40px); --side: clamp(220px, 12vw, 264px); }
.shell.v9 .topin, .shell.v9 .subin, .shell.v9 .sbin, .shell.v9 .page { max-width: none; margin: 0; padding-left: var(--v9-gut); padding-right: var(--v9-gut); }
.shell.v9 .page { padding-top: var(--v9-4); gap: var(--v9-4); }

/* Global top bar: header (crumbs, title, workspace) on the left, search in the middle, data health on the right. */
.shell.v9 .topin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 520px) auto; grid-template-areas: "ttl search health"; align-items: center; gap: var(--v9-2) var(--v9-4); padding-top: 10px; padding-bottom: 10px; }
.shell.v9 .topin .ttl { grid-area: ttl; min-width: 0; }
.shell.v9 .topin .search { grid-area: search; max-width: none; margin: 0; width: 100%; }
.shell.v9 .topin > :not(.ttl):not(.search):not(.nv-filters) { grid-area: health; justify-self: end; }
.shell.v9 .topin h1 { font: 650 22px/1.15 'Instrument Sans', system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell.v9 .topin .when { font: var(--v9-f-small); color: var(--v9-mute); }
.shell.v9 .sbin { padding-bottom: 8px; }
.shell.v9 .sbin .pswitch { max-width: 100%; }
.shell.v9 .subnav, .shell.v9 .secnav { border-bottom: 1px solid var(--v9-line); }

/* No card inside a card: an embedded card reads as a section of its parent. */
.shell.v9 .card .card, .shell.v9 .card .cc-card, .shell.v9 .cc-card .card, .shell.v9 .card section.card { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: var(--v9-3) 0 0; border-top: 1px solid var(--v9-line); }
.shell.v9 .card .card:first-child { border-top: 0; padding-top: 0; }

/* Density: more columns as the viewport widens. */
.shell.v9 .g3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.shell.v9 .g4, .shell.v9 .g6 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
@media (min-width: 1600px) {
  .shell.v9 .cc, .shell.v9 .dash { gap: var(--v9-5); }
}
@media (min-width: 2200px) {
  .shell.v9 { font-size: 14.5px; }
  .shell.v9 .br-kpis { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Tablet and phone: the bar stacks; search takes its own row. */
@media (max-width: 1100px) { .shell.v9 .topin { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ttl health" "search search"; } }
@media (max-width: 900px) { .shell.v9 .topin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ttl" "health" "search"; } .shell.v9 .topin > :not(.ttl):not(.search):not(.nv-filters) { justify-self: start; } .shell.v9 .topin h1 { white-space: normal; } }
/* One navigation model (A33, 11-07): the header row's right side holds the filters (date range, business dropdown)
   then the data pill; the sidebar shows areas only. */
.shell.v9 .topin { grid-template-columns: minmax(300px, 1fr) minmax(160px, 380px) auto auto; grid-template-areas: "ttl search filters health"; }
.shell.v9 .topin .nv-sel select { max-width: 12rem; }
.shell.v9 .topin .nv-filters { grid-area: filters; display: flex; gap: 8px; }
.shell.v9 .nv-sel select { appearance: none; font: var(--v9-f-small); color: var(--v9-ink); background: var(--v9-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23898781' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--v9-line2); border-radius: 999px; padding: 6px 28px 6px 12px; cursor: pointer; max-width: 14rem; }
.shell.v9 .nv-sel select:hover { border-color: var(--v9-accent); }
.shell.v9 .nv-sel select:focus-visible { outline: 2px solid var(--v9-accent); outline-offset: 2px; }
@media (max-width: 1100px) { .shell.v9 .topin { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ttl health" "filters filters" "search search"; } }
@media (max-width: 900px) { .shell.v9 .topin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ttl" "health" "filters" "search"; } }

/* Command Center KPI tiles (P0 11-07): the tiles fill every row (a wrapping flex row, 220 px floor, the lead tile twice as wide), so a wide
   screen (or a zoomed-out 2000 px one, 2200+ CSS px) gets more tiles per row and never zero-width columns. The KPIs
   header (Edit targets) spans the row; row flow, never column flow. Phones keep two columns (v9.css). */
@media (min-width: 901px) {
  .shell.v9 .cc-kpis { display: flex; flex-wrap: wrap; align-items: stretch; }
  .shell.v9 .cc-kpis > .cc-kpis-h { flex: 1 1 100%; }
  .shell.v9 .cc-kpis > :not(.cc-kpis-h) { flex: 1 1 220px; min-width: 220px; }
  .shell.v9 .cc-kpis > :not(.cc-kpis-h):first-of-type { flex-grow: 2; flex-basis: 440px; }
}
/* Phone header (CPO review 11-07): the first figure sits in the first screen. Title and data pill share a row, the
   counts line, breadcrumb (the tab bar already says where you are) and workspace tag drop, the search box slims, the brand uses v9 type. */
@media (max-width: 600px) {
  .shell.v9 .topin { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ttl health" "search search"; gap: 6px 10px; padding-top: 8px; padding-bottom: 8px; }
  .shell.v9 .topin > :not(.ttl):not(.search):not(.nv-filters) { justify-self: end; }
  .shell.v9 .topin .when, .shell.v9 .topin .crumbs, .shell.v9 .topin h1 .ws { display: none; }
  .shell.v9 .topin h1 { font-size: 20px; white-space: nowrap; }
  .shell.v9 .search input { padding: 6px 12px; }
  .shell.v9 .mtop b.serif { font: 650 17px/1 'Instrument Sans', system-ui, sans-serif; letter-spacing: -.01em; }
}
/* A33 on a phone: the filters take their own row under the title (after the phone header block, so both apply). */
@media (max-width: 600px) { .shell.v9 .topin .nv-filters { grid-area: auto; grid-column: 1 / -1; } }