/* Encore for clients: the shell (addendum 1). Loads after system.css, encore-wordmark.css, report.css,
   artist-picker.css, receiving.css, daily.css, chart-cursor.css and report-nav.css. Every type role is system.css's
   (body 16, detail 15, panel 20, section 28, title 36; weights 400/500/700); this sheet adds layout only.
   Motion law: one curve, two durations (--ease, --fast 180 ms, --slow 320 ms); transform and opacity only (plus
   measured height for in-place transforms); the curve moves, plain ease fades; reduced motion is opacity at --fast.
   Navigation is one switch on <html data-nav="rail|top">. Rail: a 14 rem rail in Encore's ink with the wordmark, the
   organization switcher card, the user's views, the four buckets with their sub-reports opening in place. Top: the
   production masthead and pill nav. Ask Mika is the Alcove stage: a full-width stage over the page, revealed from the
   right with a clip-path over 420 ms while the asked-from object travels into its evidence pane (FLIP, same curve);
   exit runs backward over 480 ms; the page is inert meanwhile. */
@import url("legal.css");
:root{--ease:cubic-bezier(.16,1,.3,1);--fast:180ms;--slow:320ms;--rail-w:15.5rem;--mika-enter:320ms;--mika-exit:240ms;--stage-left:0px;
  /* The sentiment palette is defined once in sentiment-palette.css (contract section 5: positive jade, negative plum, neutral
     slate; berry stays "needs you"). The shell reads those names with the same values as a fallback for a page that has not loaded it. */
  --sent-positive:var(--sentiment-positive,var(--available));--sent-negative:var(--sentiment-negative,var(--partial));--sent-neutral:var(--sentiment-neutral,var(--slate))}
html{height:100%}
body{min-height:100%;transition:padding-left var(--slow) var(--ease)}
/* ---- Rail (desktop). The page keeps its .wrap; the rail takes the first 14 rem. */
@media(min-width:761px){
  html[data-nav=rail] body{padding-left:var(--rail-w)}
  html[data-nav=rail]{--stage-left:var(--rail-w)}
  html[data-nav=rail] .masthead{display:none}
}
/* The rail is a surface, not a flat panel (Naveen, round 3): Encore's sky wash (--streak-sky as the ground, --band-sky
   as the soft field) sits behind the items; selection stays on the pill track's surface. */
.rail{position:fixed;z-index:50;inset:0 auto 0 0;display:flex;flex-direction:column;width:var(--rail-w);overflow:hidden;background:var(--streak-sky,var(--surface));color:var(--ink);border-right:1px solid var(--line)}
.rail::before{content:"";position:absolute;inset:0;background:var(--band-sky);opacity:.55;pointer-events:none}
.rail>*{position:relative}
/* Live items: a "needs you" count chip (berry) and a hue wash on a bucket whose state changed since the user last
   looked (amber: a receiving shortfall or a shipment not moving; plum: a negative topic grew; berry: a product ran
   out, on the Inventory sub-item; jade: a campaign landed). The wash arrives at the page beat with the pulse sweep
   token, its one allowed use, then holds as a steady tint until the user opens that bucket. */
:root{--pulse-plum:linear-gradient(135deg,color-mix(in srgb,var(--partial) 32%,#fff),color-mix(in srgb,var(--partial) 12%,#fff) 45%,transparent 88%)}
.rail-item{position:relative;overflow:hidden}
.rail-item.is-washed{background:var(--wash,transparent)}
.rail-item.is-washed:hover{background:var(--wash,transparent),var(--slate-soft)}
.rail-item[data-wash=amber]{--wash:var(--pulse-amber)}.rail-item[data-wash=plum]{--wash:var(--pulse-plum)}.rail-item[data-wash=berry]{--wash:var(--pulse-berry)}.rail-item[data-wash=jade]{--wash:var(--pulse-jade)}
.rail-item.is-sweeping::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--pulse-sweep) no-repeat;background-size:300% 100%;background-position:120% 0;animation:rail-sweep 900ms ease both;pointer-events:none}
@keyframes rail-sweep{from{background-position:120% 0}to{background-position:-120% 0}}
.rail-chip{display:inline-grid;place-items:center;margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--danger-ink);color:var(--surface);font-size:var(--font-detail);line-height:var(--line-detail);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
.rail-chip[hidden]{display:none}
.rail-item .rail-count+.rail-chip{margin-left:8px}
.rail-sub a{position:relative;overflow:hidden}
.rail-sub a.is-washed{background:var(--wash,transparent)}
.rail-sub a[data-wash=berry]{--wash:var(--pulse-berry)}.rail-sub a[data-wash=amber]{--wash:var(--pulse-amber)}.rail-sub a[data-wash=jade]{--wash:var(--pulse-jade)}.rail-sub a[data-wash=plum]{--wash:var(--pulse-plum)}
.rail-sub a.is-sweeping::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--pulse-sweep) no-repeat;background-size:300% 100%;animation:rail-sweep 900ms ease both;pointer-events:none}
.rail-sub a .rail-chip{height:20px;min-width:20px}
@keyframes menu-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rail-item.is-sweeping::after,.rail-sub a.is-sweeping::after{animation:none;content:none}}
html[data-nav=top] .rail{display:none}
/* The lockup as on the masthead (the phone masthead's compact rule so the wordmark's ink stays inside 14 rem). */
.rail-brand{display:flex;align-items:center;gap:12px;min-height:70px;padding:0 16px;border-bottom:1px solid var(--line)}
.rail-brand>*{zoom:.7}
.rail-brand .masthead-product{--encore-ink-height:18.567px;--encore-midline:.240875px}
.rail-brand img{display:block;width:130px;height:auto}
/* The client card (Naveen, 10/11: "you need to show which client it is"): a "Client" label in the rail's label grammar,
   then a light card on the violet pulse token (addendum 2) with the organization's mark (its logo, else the initial)
   and its name on up to two lines, never truncated, no artist count (rule 4), no sales line. With more than one
   organization the card is a button: a chevron at its right, the hover wash under the violet, and the list opens
   below it. With one it is static: no chevron, no hover. */
.rail-org{padding:10px 8px 8px}
.rail-org>.rail-label{margin:0 0 2px}
.org-button{display:grid;width:100%;min-height:52px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 10px;padding:10px 10px;border:0;border-radius:12px;background:var(--pulse-violet),var(--surface);color:var(--ink);text-align:left;font:inherit;transition:background-color var(--fast) ease}
button.org-button:hover,button.org-button[aria-expanded=true]{background:var(--pulse-violet),var(--slate-soft)}
/* The chevron follows the name's last word (a column would push the name to three lines at the rail's width). */
button.org-button .org-copy strong>svg{display:inline-block;width:14px;height:14px;margin-left:4px;vertical-align:-2px;color:var(--muted)}
.org-mark{display:grid;width:28px;height:28px;place-items:center;overflow:hidden;border-radius:50%;background:var(--ink);color:var(--surface);font-size:var(--font-detail);line-height:var(--line-detail);font-weight:var(--weight-bold)}
.org-mark img{display:block;width:100%;height:100%;object-fit:cover}
.org-copy{display:flex;flex-direction:column;min-width:0}
.org-copy strong{display:block;overflow-wrap:normal;word-break:normal;hyphens:none;font-weight:var(--weight-bold)}
.org-copy span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:var(--font-detail);line-height:var(--line-detail)}
.rail-nav{display:flex;flex:1;flex-direction:column;gap:14px;overflow-y:auto;padding:8px 12px 16px;scrollbar-width:thin}
.rail-group{display:flex;flex-direction:column;gap:2px}
.rail-label{padding:3px 10px;color:var(--muted);font-size:var(--font-detail);line-height:var(--line-detail);font-weight:var(--weight-medium)}
/* Items in the nav's own language: muted at rest, the pill track's surface under the pointer, and the selected item on
   the track's surface with ink text and the selection's weight (report-nav.css). */
.rail-item{display:flex;width:100%;min-height:40px;align-items:center;gap:10px;padding:7px 10px;border:0;border-radius:12px;background:transparent;color:var(--muted);text-align:left;text-decoration:none;transition:background-color var(--fast) ease,color var(--fast) ease}
.rail-item:hover{background:var(--slate-soft);color:var(--ink)}
/* Naveen's hard rule (every Sparkart surface): no left-side border, accent edge, inset stripe or rail line on a navigation item.
   Selection is the filled pill surface only; state is the chip and the wash only. */

.rail-item[aria-current=page]{background:var(--slate-soft);color:var(--ink);font-weight:var(--weight-medium);box-shadow:none} /* TYPOGRAPHY.md: the selected rail item is Body medium; the filled pill carries the selection */
.rail-item svg{width:18px;height:18px;flex:none}
.rail-item .rail-count{margin-left:auto;color:var(--muted);font-size:var(--font-detail)}
.rail-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms var(--ease)}
.rail-sub[data-open="1"]{grid-template-rows:1fr}
.rail-sub>ul{min-height:0;overflow:hidden}
.rail-sub ul{margin:0;padding:2px 0 4px 28px;list-style:none}
.rail-sub a{display:flex;min-height:36px;align-items:center;padding:6px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:var(--font-detail);line-height:var(--line-detail)}
.rail-sub a:hover{background:var(--slate-soft);color:var(--ink)}
.rail-sub a[aria-current=location]{color:var(--ink);font-weight:var(--weight-medium)}
/* Organization menu (both navs): a small list under the control. */
.org-menu{position:absolute;z-index:60;min-width:260px;margin:0;padding:4px;list-style:none;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-popover)}
.org-menu[hidden]{display:none}
.org-menu button{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-height:48px;padding:6px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left}
.org-menu button:hover{background:var(--slate-soft)}
.org-menu button[aria-current=true]{background:var(--accent-soft)}
.org-menu .org-mark{background:var(--ink);color:var(--surface)}
.org-menu .org-copy span{color:var(--muted)}
.rail-org{position:relative}
.rail .org-menu{left:8px;right:8px;top:calc(100% - 4px);width:auto;min-width:0}
.rail .org-menu .org-copy span{white-space:normal}
.rail .org-menu button{align-items:start}
.org-menu .org-mark{background:var(--ink);color:var(--surface)}
/* ---- Top masthead (the production pattern). The nav's row follows the masthead's own width. */
.masthead{container-type:inline-size}
@media(min-width:761px){
  @container (min-width:1181px){
    .masthead .encore-masthead{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
    .encore-masthead>.masthead-tools{grid-column:3}
    .encore-masthead .encore-nav-slot{grid-column:2;grid-row:1}
  }
  @container (max-width:1180px){
    .masthead .encore-masthead{grid-template-columns:minmax(0,1fr) auto}
    .encore-masthead>.masthead-tools{grid-column:2}
    .encore-masthead .encore-nav-slot{grid-column:1/-1;grid-row:2}
  }
}
.masthead-tools{gap:12px}
@media(min-width:1381px){.masthead-tools>.encore-search{width:240px}}
.mika-button{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:1px solid var(--line-dark);border-radius:var(--radius-control);background:var(--surface);color:var(--accent);white-space:nowrap;font-weight:var(--weight-medium);transition:border-color 100ms ease}
.mika-button:hover{border-color:var(--accent)}
.mika-button svg{width:18px;height:18px;flex:none}
.masthead-user{position:relative;display:flex;align-items:center;min-width:0}
.masthead-user>button{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 4px;border:0;background:transparent;color:var(--ink)}
.masthead-org{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.masthead-initial{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--surface);font-weight:var(--weight-bold)}
.masthead-user .org-menu{right:0;top:calc(100% + 4px)}
@media(max-width:1599px){.masthead-org{display:none}}
/* Phone top bar: shared by both navs. In the rail mode the hamburger opens the rail as a sheet from the left. */
.rail-toggle{display:none}
@media(max-width:760px){
  html[data-nav=rail] .masthead{display:block}
  html[data-nav=rail] .encore-nav-slot{display:none}
  html[data-nav=rail] .rail-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--ink)}
  .rail-toggle svg{width:22px;height:22px}
  .rail{transform:translateX(-100%);transition:transform var(--slow) var(--ease);width:min(20rem,86vw);box-shadow:none}
  html[data-nav=rail] body.rail-open .rail{transform:none;box-shadow:var(--shadow-popover)}
  .rail-scrim{position:fixed;inset:0;z-index:49;background:var(--backdrop);opacity:0;pointer-events:none;transition:opacity var(--fast) ease}
  body.rail-open .rail-scrim{opacity:1;pointer-events:auto}
  /* The phone bar holds three 44 px controls beside the lockup (Ask Mika, menu, search in the rail mode; Ask Mika,
     the organization, search in the top mode); the organization lives in the rail sheet. */
  /* 36 px icon controls (the Explorer's field tag size) so the five fit beside the 184 px lockup at 390: Ask Mika,
     the initial, the menu, the search. Below 361 px the initial lives in the rail sheet's organization card. */
  /* The wordmark paints 60 px past its slot (encore-wordmark.css); the brand reserves that room so no control
     lands on the ink. */
  .masthead-inner>.masthead-brand{padding-right:60px}
  .encore-masthead>.masthead-tools{gap:4px}
  .masthead-tools>.encore-search{order:4}
  .masthead-tools>.mika-button{order:1;width:36px;min-height:36px;padding:0;justify-content:center}
  .masthead-tools>.mika-button span{display:none}
  .masthead-user{order:2}
  /* In the rail mode the account control is the drawer's foot, so the bar keeps Ask Mika, the menu and the search. */
  html[data-nav=rail] .masthead-user{display:none}
  .masthead-user>button{min-height:36px;padding:0}
  .masthead-initial{width:32px;height:32px}
  html[data-nav=rail] .rail-toggle{order:3;width:36px;height:36px;min-height:36px}
}
/* ---- Search answer card (both navs). */
.search-card{position:absolute;top:calc(100% + 6px);right:0;z-index:50;width:360px;max-width:calc(100vw - 32px);padding:16px 20px 20px;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--surface);box-shadow:var(--shadow-popover)}
.search-card[hidden]{display:none}
.search-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.search-card-head h3{margin:0}
.search-card-head p{margin:2px 0 0;color:var(--muted)}
.search-card-close{min-height:36px;padding:0 10px;border:0;background:transparent;color:var(--muted);font-size:var(--font-panel);line-height:var(--line-panel)}
.search-card-close:hover{color:var(--ink)}
.search-card-state{margin:0 0 12px}
.search-card ul{margin:0;padding:0;list-style:none}
.search-card li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line)}
.search-card li span:last-child{flex:none;color:var(--muted)}
@media(max-width:760px){.search-card{position:fixed;left:16px;right:16px;top:64px;width:auto}}
/* ---- Page head and filter row. In the rail mode the page head carries the search field and Ask Mika (the masthead
   is gone), as Alcove's page header carries its Ask control. */
.client-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding:14px 0 8px}
.client-head h1{margin:0}
.client-head-tools{display:none;align-items:center;gap:12px}
@media(min-width:761px){html[data-nav=rail] .client-head{grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
  html[data-nav=rail] .client-head-tools{display:flex}
  html[data-nav=rail] .client-head-tools .encore-search{position:relative;width:240px;margin:0}
  html[data-nav=rail] .client-head-tools .encore-search input{width:100%;min-height:48px;border:1px solid var(--line-dark);border-radius:var(--radius-control);background:var(--surface);padding:10px 16px}}
/* The filter row: God Mode's tracking bar in Encore's tokens (IA reset, rule 1). Search, the switch, the chips; no
   popover, no menu; a focused chip in the accent, the others dimmed; no left-side marks on anything. */
.client-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:0 0 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.filter-search{position:relative;flex:0 0 220px}
.filter-search input{width:100%;min-height:40px;padding:6px 12px;border:1px solid var(--line-dark);border-radius:var(--radius-control);background:var(--surface)}
.filter-results{top:calc(100% + 4px);left:0;right:0;width:auto}
.filter-results li{display:block;padding:8px 12px}
.filter-results li[aria-selected=true]{background:var(--slate-soft)}
.filter-mode{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--slate-soft)}
.filter-mode button{min-height:34px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:var(--font-detail);line-height:var(--line-detail);font-weight:var(--weight-medium)}
.filter-mode button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-nav)}
.filter-mode button:disabled{opacity:.5}
.filter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.filter-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 0 0 12px;border:1px solid var(--line-dark);border-radius:999px;background:var(--surface);color:var(--ink);white-space:nowrap;transition:opacity 150ms ease,border-color 100ms ease,background-color 150ms ease}
.filter-chip.is-dim{opacity:.45}
.filter-chip.is-focused{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.filter-chip>button{min-height:38px;padding:0;border:0;background:transparent;color:inherit;font:inherit}
.filter-chip-name{padding-right:4px}
.filter-chip-remove{width:32px;color:var(--muted);font-size:var(--font-panel);line-height:1}
.filter-chip-remove:hover{color:var(--danger-ink)}
.filter-chip-more,.filter-clear{min-height:40px;padding:0 12px;border:1px solid var(--line-dark);border-radius:999px;background:var(--surface);color:var(--accent);font-size:var(--font-detail);line-height:var(--line-detail)}
.filter-clear{border-color:var(--accent)}
.filter-hint{color:var(--muted)}
@media(max-width:760px){
  .client-head{padding:16px 0 12px;gap:12px}
  .client-filter{gap:10px;padding-bottom:12px;margin-bottom:16px}
  .client-filter>label,.client-filter .artist-picker{width:100%;min-width:0}
  .client-views{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:2px;scrollbar-width:thin}
}
/* ---- Ask Mika: a side panel (Naveen, 10/10: "more of an X kind of thing"; his original direction). Fixed at the right
   edge, 27 rem wide, header then the conversation; it slides in over 320 ms on the one curve and out over 240 ms while
   the page stays visible and usable. The object asked about stays on the page; its title is the quoted chip at the top
   of the conversation. The X sits in the panel's top-right corner, where the Ask Mika control sits. */
.mika-panel{position:fixed;z-index:70;top:0;right:0;bottom:0;width:27rem;max-width:100vw;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:70px minmax(0,1fr);overflow:hidden;background:var(--surface);color:var(--ink);border-left:1px solid var(--line);box-shadow:var(--shadow-popover);transform:translate3d(100%,0,0);transition:transform var(--mika-enter) var(--ease)}
.mika-panel.is-open{transform:none}
.mika-panel.is-closing{transform:translate3d(100%,0,0);pointer-events:none;transition:transform var(--mika-exit) var(--ease)}
.mika-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 12px 0 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.mika-close{display:grid;place-items:center;flex:none;width:48px;height:48px;min-height:48px;padding:0;border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink);transition:background-color 100ms ease,color 100ms ease}
.mika-close:hover{background:var(--slate-soft);color:var(--accent)}
.mika-close svg{width:18px;height:18px}
.mika-mode{display:flex;flex:1 1 auto;align-items:center;gap:10px;min-width:0;margin:0;color:var(--muted);font-size:var(--font-detail);line-height:var(--line-detail)}
.mika-mode i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--accent)}
.mika-mode strong{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink);font-weight:var(--weight-medium)}
.mika-conv{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto;background:var(--surface-soft)}
.mika-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 8px}
.mika-quote{display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin:0 0 16px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:var(--font-detail);line-height:var(--line-detail)}
.mika-quote[hidden]{display:none}
.mika-quote-mark{display:grid;place-items:center;flex:none;width:18px;height:18px;color:var(--accent)}
.mika-quote-mark svg{width:14px;height:14px}
.mika-quote strong{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink);font-weight:var(--weight-medium)}
.mika-quote-page{flex:none;white-space:nowrap}
.mika-quote-page:not(:empty)::before{content:'· '}
.mika-transcript{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.mika-transcript>li{opacity:0;transform:translateY(8px);transition:opacity 200ms ease,transform 300ms var(--ease)}
.is-open .mika-transcript>li{opacity:1;transform:none}
.is-open .mika-transcript>li.is-new{opacity:0;transform:translateY(8px)}
.mika-you{align-self:flex-end;width:fit-content;max-width:84%;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));border-radius:16px 16px 4px 16px;background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.mika-say{max-width:34rem}
.mika-say p{margin:0 0 10px}
.mika-say p:last-child{margin-bottom:0}
.mika-say ul{margin:6px 0 10px;padding-left:20px}
.mika-say .kpi-detail{color:var(--muted)}
/* Text arrives as one calm block: 360 ms plain ease, laid out before it fades in. */
.mika-say .mika-text{opacity:0;transition:opacity 360ms ease}
.mika-say .mika-text.is-in{opacity:1}
.mika-suggest-wrap{margin:0 32px 12px;opacity:0;transform:translateY(8px);transition:opacity 200ms ease 100ms,transform 260ms var(--ease) 100ms}
.is-open .mika-suggest-wrap{opacity:1;transform:none}
.mika-suggest-wrap[hidden]{display:none}
.mika-suggest-title{margin:0 0 8px;color:var(--muted);font-size:var(--font-detail);line-height:var(--line-detail);font-weight:var(--weight-medium)}
.mika-suggest{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.mika-suggest button{width:auto;min-height:40px;padding:8px 14px;border:1px solid var(--line-dark);border-radius:999px;background:color-mix(in srgb,var(--surface) 74%,transparent);color:var(--ink);text-align:left;transition:border-color 100ms ease,background-color 100ms ease,color 100ms ease}
.mika-suggest button:hover{border-color:var(--accent);background:var(--surface);color:var(--accent)}
.mika-compose{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:12px;margin:0 32px 24px;padding:6px 6px 6px 10px;border:1px solid var(--line-dark);border-radius:14px;background:var(--surface);box-shadow:0 10px 32px #18234710;opacity:0;transform:translateY(12px);transition:opacity 200ms ease 80ms,transform 280ms var(--ease) 80ms,border-color 100ms ease}
.is-open .mika-compose{opacity:1;transform:none}
.mika-compose:focus-within{border-color:var(--accent)}
.mika-compose input{min-height:44px;border:0;background:transparent;padding:0 6px}
.mika-compose input:focus-visible{outline:none}
.mika-compose button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:var(--accent);color:var(--surface)}
.mika-compose button svg{width:18px;height:18px}
.mika-note{margin:12px 0 0;color:var(--muted)}
.mika-suggest-wrap{margin-left:24px;margin-right:24px}
.mika-compose{margin-left:24px;margin-right:24px}
/* Under 760 px the panel is the full width; the X keeps the phone bar's control size. */
@media(max-width:760px){
  .mika-panel{width:100%;border-left:0;box-shadow:none;grid-template-rows:62px minmax(0,1fr)}
  .mika-top{padding:0 8px 0 16px}
  .mika-close{width:36px;height:36px;min-height:36px}
  .mika-scroll{padding:16px 16px 8px}
  .mika-suggest-wrap{margin-left:16px;margin-right:16px}
  .mika-compose{margin-left:16px;margin-right:16px}
}
/* Three-act pivot helpers (encoreClient.pivot). Leavers sink as a group; survivors glide; arrivals rise one after
   another into prepared places. Transform and opacity only. */
.pivot-leave{position:absolute;pointer-events:none;transition:opacity var(--fast) ease,transform var(--fast) ease}
.pivot-leave.is-gone{opacity:0;transform:translateY(8px)}
.pivot-move{transition:transform var(--slow) var(--ease)}
.pivot-new{opacity:0;transform:translateY(24px) scale(.97)}
.pivot-new.is-in{opacity:1;transform:none;transition:opacity 280ms ease,transform 500ms var(--ease)}
.reproject{transition:opacity var(--fast) ease}
.reproject.is-out{opacity:0}
/* Lab-only: the navigation switch for Naveen's evaluation (addendum section 2). Not product UI. */

/* 320 px phones: the lockup takes 60% (the same approved lockup, scaled; a proposal for Naveen, DESIGN.md). */
@media(max-width:360px){.masthead-inner>.masthead-brand{zoom:.6}}
@media(prefers-reduced-motion:reduce){
  body,.rail,.rail-sub,.pivot-move,.pivot-new.is-in,.mika-transcript>li,.mika-suggest-wrap,.mika-compose{transition:opacity 160ms ease}
  .mika-panel,.mika-panel.is-closing{transition:none}
  .pivot-new{transform:none}.pivot-leave.is-gone{transform:none}
}
@media print{.rail,.mika-panel{display:none}}
/* ---- Grid law (IA reset, rule 10). The content column is 12 columns with 24 px gutters inside a 32 px outer gutter;
   the title row, the filter row and every card share one left edge and one right edge; a card is padded 24 on every
   side, flat, with a one-line head (title left, count right) over a 1 px divider; a card's body starts on the same y
   across a row. The lab overlay (?grid=1) draws the columns. */
:root{--grid-gutter:24px;--grid-outer:32px}
@media(min-width:761px){
  html[data-nav=rail] .wrap,html[data-nav=rail] main#report.wrap{width:auto;max-width:none;margin:0;padding:0 var(--grid-outer)}
  html[data-nav=rail] .client-head{grid-template-columns:minmax(0,1fr) auto;padding:24px 0 16px}
  html[data-nav=rail] .client-filter{padding-bottom:16px;margin-bottom:var(--grid-gutter)}
}
.ia-card{box-sizing:border-box;padding:24px;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--surface);box-shadow:none}
.ia-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-width:0;padding:0 0 12px;margin:0 0 16px;border-bottom:1px solid var(--line);white-space:nowrap}
/* The title is never cut; the count takes the rest of the line and truncates at its end. */
.ia-card-head h2,.ia-card-head h3{flex:none;margin:0}
.ia-card-head .ia-card-count{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;font-size:var(--font-detail);line-height:var(--line-detail)} /* Detail: a count, "Coming soon" */
.ia-card-head .ia-card-count strong{color:var(--ink)}
.grid-overlay{position:fixed;z-index:200;top:0;bottom:0;left:calc(var(--stage-left) + var(--grid-outer));right:var(--grid-outer);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gutter);pointer-events:none}
.grid-overlay i{display:block;background:color-mix(in srgb,var(--accent) 9%,transparent);outline:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
@media(max-width:760px){.ia-card{padding:16px}.ia-card-head{flex-wrap:wrap;white-space:normal;gap:2px 16px}.ia-card-head .ia-card-count{flex:1 1 100%;text-align:left;white-space:normal;overflow:visible}}

/* ---- Motion (addendum 9, the motion map; all inherited from Encore, Alcove and God Mode). */
/* A count chip that changes pops once (God Mode's TrackingChip entering: scale from .6, 250 ms, the one curve). */
.rail-chip.is-pop{animation:chip-pop 250ms var(--ease) both}
@keyframes chip-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
/* Rule 12: the selected bucket is the ink pill: one element that slides between items in 180 ms on the one curve;
   the selected item itself is transparent with white text and icon; no wash on it; hover slate-soft elsewhere. */
.rail-reports{position:relative}
.rail-pill{position:absolute;z-index:0;left:0;right:0;top:0;height:40px;border-radius:12px;background:var(--ink);transform:translateY(var(--y,0px));transition:transform 200ms var(--ease),height 200ms var(--ease);pointer-events:none}
.rail-pill.is-still{transition:none}
.rail-pill[hidden]{display:none}
.rail-reports>.rail-item{position:relative;z-index:1}
.rail-item[aria-current=page],.rail-item[aria-current=page]:hover{background:transparent;color:var(--surface)}
.rail-item[aria-current=page].is-washed{background:transparent}
.rail-item[aria-current=page] .rail-chip{background:transparent;color:var(--surface);padding:0;min-width:0}
.rail-sub a[aria-current=location]{color:var(--ink);font-weight:var(--weight-bold)}
/* The current bucket's sub-reports unfold with a 30 ms stagger (Alcove's reveal) and fold the same way. */
.rail-sub li{opacity:0;transform:translateY(-4px);transition:opacity 180ms ease calc(var(--r,0)*30ms),transform 180ms var(--ease) calc(var(--r,0)*30ms)}
.rail-sub[data-open="1"] li{opacity:1;transform:none;transition-delay:calc(var(--i,0)*30ms)}
/* Arrive on every page: the rail, then the title row, then the filter, then the parts top to bottom 40 ms apart, once. */
body.shell-arriving .rail{animation:shell-in 360ms var(--ease) both}
body.shell-arriving .client-head{animation:shell-in 360ms var(--ease) 80ms both}
body.shell-arriving .client-filter{animation:shell-in 360ms var(--ease) 120ms both}
body.shell-arriving main>[data-arrive]{animation:shell-in 360ms var(--ease) calc(160ms + var(--arrive-i,0)*40ms) both}
@keyframes shell-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Filter chips: God Mode's choreography (enter pop 250 ms with a 50 ms stagger; exit 250 ms; a 150 ms pause, then the
   survivors slide into place with a 30 ms stagger). */
.filter-chip.is-entering{animation:chip-pop 250ms var(--ease) both;animation-delay:calc(var(--k,0)*50ms)}
.filter-chip.is-leaving{animation:chip-out 250ms var(--ease) both;pointer-events:none}
@keyframes chip-out{to{transform:scale(.6);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .rail-chip.is-pop,body.shell-arriving .rail,body.shell-arriving .client-head,body.shell-arriving .client-filter,body.shell-arriving main>[data-arrive],.filter-chip.is-entering,.filter-chip.is-leaving{animation:none!important}
  .rail-pill,.rail-sub,.rail-sub li,.filter-chip{transition:none!important}
  .org-menu{animation:none!important}
}

/* The account control is the rail's foot (Naveen, 10/11: "it should be at the bottom of the rail for this product"): a
   row pinned under the sections (the rail is a column; the sections scroll, the foot stays; the phone drawer ends with
   it): the initial in the ink disc, the name on one line (truncated, never wrapped, the body role), a chevron. No
   border; hover and open are the rail's wash; the focus ring is system.css's. Its menu (name and role as the detail
   line, Switch organization only with more than one, Sign out) opens upward from the row, 180 ms from its origin. */
.rail-user{position:relative;flex:none;padding:8px 8px 12px}
.rail-user>button{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:6px 10px 6px 6px;border:0;border-radius:12px;background:transparent;color:var(--ink);text-align:left;transition:background-color var(--fast) ease}
.rail-user>button:hover,.rail-user>button[aria-expanded=true],.rail-user>button[aria-current=page]{background:var(--slate-soft)}
.rail-user>button[aria-current=page] .rail-user-name{font-weight:var(--weight-medium)} /* Body medium, as the selected rail item */
.rail-user .masthead-initial{width:36px;height:36px}
.rail-user-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--weight-medium)}
.rail-user>button>svg{width:16px;height:16px;flex:none;color:var(--muted)}
/* The menu is the rail's width (Naveen, 10/11): one muted line (name · email, or the organization), then plain rows at
   body size: Account, Switch organization (with more than one), Sign out. */
.rail .rail-user .org-menu{left:0;right:0;top:auto;bottom:calc(100% - 4px);width:auto;min-width:0;transform-origin:bottom left;animation:menu-in 180ms var(--ease) both}
.user-menu-who{display:block;overflow:hidden;padding:8px 12px 4px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.rail .user-menu a,.rail .user-menu button{display:flex;width:100%;align-items:center;min-height:44px;padding:6px 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;text-decoration:none;font:inherit}
.rail .user-menu a:hover,.rail .user-menu button:hover{background:var(--slate-soft)}
.org-menu .org-copy.org-row{flex-direction:row;justify-content:space-between;gap:16px;align-items:baseline}
.org-menu .org-row>span:last-child{color:var(--muted);white-space:nowrap}
/* The pace chart's key: text, always (rule 5). */
.ov-pace-key{margin:6px 0 0!important}

.encore-search-ask{display:block;padding:10px 12px;border-top:1px solid var(--line);color:var(--accent);cursor:pointer}
.encore-search-ask:hover{background:var(--slate-soft)}
/* The sheet row at the foot of the field's list, and the field while a file is over it (the Lookup paste frame's
   is-over treatment, report-nav.css). */
.encore-search-csv{display:block;padding:10px 12px;border-top:1px solid var(--line);color:var(--muted);cursor:pointer}
.encore-search-csv:hover{background:var(--slate-soft);color:var(--ink)}
.encore-search.is-over input{border-color:var(--accent);background:var(--accent-soft)}
.encore-search input[type=file][hidden]{display:none}

/* ---- The mark sweeps once (Naveen: "when you first log in it can sweep, just as a cool little thing"): on the first page
   of a session the pulse sweep crosses the Encore wordmark through its mask, once, then the mark is still. No cadence,
   no breath, no connection state on the mark. */
body.brand-sweep .rail-brand .encore-wordmark{background-color:var(--ink);background-image:var(--pulse-sweep);background-size:300% 100%;background-repeat:no-repeat;background-position:120% 0;animation:brand-sweep-once 1.4s linear 600ms both}
@keyframes brand-sweep-once{from{background-position:120% 0}to{background-position:-120% 0}}
/* ---- An outage is a whole-app state: one bar under the masthead on every page, in Encore's issue tokens; the page
   holds its last complete body (the 10/08 ruling). Lab: ?outage=warehouse|shopify|analytics. */
.outage-bar{display:flex;align-items:center;gap:12px;margin:24px 0 0;padding:10px 16px;border:1px solid var(--danger-line);border-radius:var(--radius-control);background:var(--danger-soft);color:var(--danger-ink);font-size:var(--font-detail);line-height:var(--line-detail)}
.outage-bar::before{content:"!";display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;font-weight:var(--weight-bold)}
.outage-bar strong{font-weight:var(--weight-bold)}
@media(prefers-reduced-motion:reduce){body.brand-sweep .rail-brand .encore-wordmark{animation:none!important;background-image:none!important}}
@media(min-width:761px){html[data-nav=rail] .outage-bar+.client-head{padding-top:16px}}
@media(max-width:760px){.outage-bar{margin-top:16px}}
/* ---- The global date range (Naveen, 10/10): a chip at the right end of the tracking bar in the chip grammar; its popover
   is the org menu's surface. Presets are the ink-pill row (the selected preset is the one ink pill, sliding on the one
   curve); the dates are body text, everything else the detail role. Six grid columns wide at 1440, right-aligned on the
   content edge; the full row on a phone. */
.client-filter{position:relative}
.range-chip{margin-left:auto;gap:8px;padding:0 14px 0 12px;color:var(--ink)}
.range-chip svg{width:16px;height:16px;flex:none;color:var(--muted)}
.range-chip[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}
.range-chip[aria-expanded=true] svg{color:var(--accent)}
.range-chip.is-pop{animation:chip-pop 250ms var(--ease) both}
.range-pop{position:absolute;z-index:60;right:0;top:calc(100% - 6px);width:min(552px,100%);padding:16px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-popover);transform-origin:top right;animation:menu-in 180ms var(--ease) both}
.range-presets{position:relative;display:flex;flex-wrap:wrap;gap:4px}
.range-presets button{position:relative;z-index:1;min-height:34px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:var(--font-detail);line-height:var(--line-detail);font-weight:var(--weight-medium);transition:color 150ms ease}
.range-presets button:hover{color:var(--ink)}
.range-presets button[aria-pressed=true]{color:var(--surface)}
.range-pill{position:absolute;z-index:0;top:0;left:0;width:var(--w,0px);height:34px;border-radius:999px;background:var(--ink);transform:translate(var(--x,0px),var(--y,0px));transition:transform 200ms var(--ease),width 200ms var(--ease)}
.range-pill.is-still{transition:none}
.range-pill[hidden]{display:none}
.range-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.range-dates label{display:flex;flex-direction:column;gap:4px;min-width:0}
.range-dates .kpi-detail{color:var(--muted)}
.range-dates input{width:100%;min-height:40px;padding:6px 12px;border:1px solid var(--line-dark);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);font:inherit}
.range-dates input:focus-visible{outline:none;border-color:var(--accent)}
.range-cal{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.range-month-head{margin:0 0 6px;color:var(--ink);font-weight:var(--weight-medium)}
.range-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.range-days>span{text-align:center;color:var(--muted)}
.range-days>i{display:block}
.range-days button{min-height:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:var(--font-detail);line-height:var(--line-detail);transition:background-color 100ms ease,color 100ms ease}
.range-days button:hover{background:var(--slate-soft)}
.range-days button:disabled{color:var(--muted);opacity:.45}
.range-days button.is-in{background:var(--accent-soft);border-radius:0}
.range-days button.is-end{background:var(--ink);color:var(--surface);border-radius:8px}
.range-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.range-apply{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--ink);color:var(--surface);font-weight:var(--weight-medium)}
.range-apply:hover{background:var(--accent)}
@media(max-width:760px){.range-chip{margin-left:0}.range-pop{left:0;right:0;width:auto;padding:12px}.range-cal{grid-template-columns:1fr}.range-month:first-child{display:none}}
.replay-link{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.replay-link:hover{color:var(--ink)}

/* ---- The typography contract, page-wide (TYPOGRAPHY.md; lab-finish lane, 10/11, from tools/type-audit.mjs). Every number
   sets in tabular figures (section 1: dates, counts, axes and chips alike, so a column or a changing count never shifts).
   A bold count inside a muted Label, Detail or key line reads in ink (section 4: a key's count and a count line's numbers
   are ink bold; muted is for the words around them). */
/* The product family (Naveen, 2026-10-11 2:3x PM: "go with Geist. I like it."): Geist, self-hosted by shell/fonts.css, with
   Helvetica Neue as the fallback. The lab overrides the shared token here; next/warehouse/system.css keeps the internal
   product on Helvetica Neue. Sizes, line heights and weights stay the system.css roles. */
:root{--font-family:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif}
body{font-variant-numeric:tabular-nums}
:is(.kpi-detail,.kpi-label,.muted,.rr-key,.catchup-b-chart-key) :is(strong,b){color:var(--ink)}
/* The legal line (shell/legal.js, shell/legal.css). Desktop rail: the rail's last row, under the account control, aligned
   with the items' text (12 px nav padding + 10 px item padding); the rail is a flex column whose nav scrolls, so the line
   and the account control never overlap at any height. Where the rail is not on screen (phones, where it is a sheet; the
   top nav) the line sits at the page's foot instead, so every layout shows it once (rule 8, the lead's ruling of 10/11). */
.rail-legal{--legal-pad:10px;flex:none;margin:0 12px;padding:14px var(--legal-pad) 16px;border-top:1px solid var(--line)}
.page-legal{display:none;margin-top:var(--grid-gutter,24px);padding-bottom:24px}
html[data-nav=top] .page-legal{display:block}
html[data-nav=top] .rail-legal{display:none}
@media(max-width:760px){.rail .rail-legal{display:none}.page-legal{display:block}}