/* ============================================================
   /ui/shell.css - I3, the shell (25.09.2026)

   WHY. The top of every screen was a wrapping row of nine period chips, a period button, the language pills,
   the plan badge, "report a problem" and "sign out", plus the client bar above it: about 184px for an agency
   before the first number. Step I3 of _NIGHT-2026-09-19-LENS-design-system.md folds that into a 56px bar
   (title + path on the left; ONE period menu, the inbox counter and ONE user menu on the right), a 232px
   sidebar on the surface token, content capped at 1200px, a 32px demo strip, and on a phone a 52px bar plus
   a bottom bar with five sections.

   Every value is a token or a layout length; no colour literal lives here. The rules are prefixed with
   .app / an id so they win over the older inline rules in app-v4.html without reordering that file.
   app/gates/w7-i3-shell.test.mjs reads these declarations: the bar heights may not grow past 64px.
   ============================================================ */
:root{--shell-side:232px;--shell-top:56px;--shell-top-phone:52px;--shell-demo:32px;--shell-bot:60px;--shell-max:1200px}

/* ---- frame: sidebar 232 on the surface token, content up to 1200 with a 32px gutter ---- */
@media(min-width:861px){.app{grid-template-columns:var(--shell-side) minmax(0,1fr)}}   /* desktop only: on a phone the sidebar is a fixed drawer and .app is one column */
.app .side,.app .side #sideFoot{background:var(--c-bg-2)}   /* the pinned user card sits on the same surface as the menu */
.app .cont{max-width:calc(var(--shell-max) + 2 * var(--s-6));padding-left:var(--s-6);padding-right:var(--s-6)}

/* ---- top bar: one line, fixed height, nothing in it may wrap ---- */
.app .topb{height:var(--shell-top);max-height:var(--shell-top);min-height:0;box-sizing:border-box;padding:0 var(--s-6);flex-wrap:nowrap;gap:var(--s-3);z-index:var(--z-sticky)}
.app .topb .tb-l{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.app .topb h1{font-size:var(--t-h3);line-height:1.25;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .topb .tb-path{display:flex;align-items:center;gap:var(--s-2);min-width:0;white-space:nowrap;overflow:hidden}
.app .topb .tb-path .s{font-size:var(--t-label);line-height:1.3;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.app .topb .tb-path #dataFresh[hidden]{display:none}
/* the client in the path (agency, a client in scope, any screen but its overview): a link back to the overview */
.app .topb .tb-path .tb-cli{flex:0 1 auto;min-width:0;max-width:60%;padding:0;margin:0;border:0;background:none;font:inherit;font-size:var(--t-label);line-height:1.3;font-weight:700;color:var(--c-accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.app .topb .tb-path .tb-cli[hidden]{display:none}
.app .topb .tb-path .tb-cli:not([hidden])+.s::before{content:"/";margin-right:var(--s-2);color:var(--c-ink-3)}
.app .topb .ctrls{flex:0 0 auto;flex-wrap:nowrap;gap:var(--s-2)}

/* ---- the two menus (period, user): a button and a popover under it ---- */
.tb-menu{position:relative}
.tb-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:var(--z-menu);min-width:240px;max-width:min(380px,calc(100vw - 32px));background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line);border-radius:var(--r-md);box-shadow:var(--e-2);padding:var(--s-3);display:flex;flex-direction:column;align-items:stretch;gap:var(--s-2)}
.tb-pop[hidden]{display:none}
.tb-pop .tb-k{font-size:var(--t-label);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink-2)}
#perPop #dates{flex-wrap:wrap;max-width:none;overflow:visible;border-radius:var(--r-md)}
#perPop #calBtn,#userPop .btn{width:100%;justify-content:flex-start}
#perBtn #perNow{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-weight:600}
/* the phone's short forms (the period's day count, the bare inbox count) exist only on a phone */
#perBtn #perShort,#inboxBadge #inboxBadgeN{display:none}
#userBtn{padding:4px 6px}
#userBtn .av{width:28px;height:28px;border-radius:var(--r-sm);font-size:var(--t-label)}
#userPop .langsw{align-self:flex-start}
#userPop .plan{display:flex;align-items:center;gap:6px}
/* inside a popover every button keeps its words: the phone rule that folds the bar buttons to icons (.topb .ctrls .btxt)
   must not reach the exact-range button of the period menu or the items of the user menu */
.app #userPop .btxt,.app #perPop .btxt{display:inline}

/* ---- demo: a 32px strip above the bar ---- */
.demostrip{height:var(--shell-demo);box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--s-3);padding:0 var(--s-4);background:var(--c-accent-soft);color:var(--c-accent-ink);border-bottom:1px solid var(--c-accent-line);font-size:var(--t-label);font-weight:700;white-space:nowrap;overflow:hidden}
.demostrip[hidden]{display:none}
.demostrip button{height:24px;padding:0 var(--s-3);border-radius:var(--r-pill);border:1px solid var(--c-accent-line);background:var(--c-surface);color:var(--c-accent-ink);font:inherit;cursor:pointer}

/* ---- the client switcher at the top of the sidebar (agency, a client in scope) ---- */
.app .side #cliBar{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:var(--s-2);margin:var(--s-2) 0 var(--s-1);padding:var(--s-2) var(--s-3);background:var(--c-surface);border:1px solid var(--c-line);border-left:3px solid var(--c-accent);border-radius:var(--r-md)}
.app .side #cliBar[hidden]{display:none}
#cliBar .cli-row{display:flex;align-items:center;gap:var(--s-2);min-width:0}
#cliBar #cliBarName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cliBar select,#cliBar #cliBarQ{width:100%;min-width:0;box-sizing:border-box}
#cliBarQ{padding:6px 9px;border:1px solid var(--c-line);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-ink);font:inherit;font-size:var(--t-small)}
#cliBarQ[hidden]{display:none}
#cliBar #cliBarOut{justify-content:center}
.cli-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--c-mut)}
.cli-dot.ok{background:var(--c-ok)}.cli-dot.warn{background:var(--c-warn)}.cli-dot.bad{background:var(--c-bad)}
/* THE AGENCY'S MENU (fix 25.09.2026). The plan's five (Портфолио, Входящи, Отчети, Екип и план, Настройки) in that
   order; with a client in scope the client's own screens stand above them under the switcher; everything else the
   account can open is behind „Други екрани" (syncShell() marks it .nv-more and opens it when the screen in front is there).
   Visual order only (flex order), so every script that walks the sidebar in DOM order is unaffected. */
body.kind-ag .side>#cliBar{order:1}
body.kind-ag .side>.nv{order:3}
body.ag-cl .side>.nv[data-t="client"],body.ag-cl .side>.nv[data-t="studio"],body.ag-cl .side>.nv[data-t="copy"],body.ag-cl .side>.nv[data-t="reports"]{order:2}
body.kind-ag .side>#sideMore{order:4}
body.kind-ag .side>.nv.nv-more{order:5}
body.kind-ag .side>.sp,body.kind-ag .side>#sideDemoFoot,body.kind-ag .side>#sideFoot{order:6}
body.kind-ag .side>.navgroup{display:none}
body.kind-ag:not(.side-more-open) .side>.nv.nv-more{display:none}
body.ag-cl .side>.nv[data-t="portfolio"]{margin-top:var(--s-3)}
.nv .nl-ag,body.kind-ag .nv .nl-own{display:none}
body.kind-ag .nv .nl-ag{display:inline}
.side-more{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:9px 13px;margin:0;border:0;border-radius:12px;background:none;color:var(--c-ink-2);font:inherit;font-size:var(--t-body);font-weight:600;text-align:left;cursor:pointer}
.side-more:hover{background:var(--c-accent-soft);color:var(--c-ink)}
.side-more[hidden]{display:none}
.side-more[aria-expanded="true"]{color:var(--c-ink)}

/* ---- phone: 52px bar and a bottom bar with five sections ---- */
.botbar{display:none}
@media(max-width:860px){
  /* fix 25.09.2026: measured at 375px the bar left the title 30px. The burger goes (the bottom bar's „Още" opens the
     same drawer), so the bar's left pad is its own 12px, not the 62px the fixed burger needed; the period button
     carries the day count, the inbox counter the bare number, and each has a cap, so the controls can never take
     more than 190px of a 375px phone. app/gates/w7-i3-shell.test.mjs sums these caps. */
  .app .topb{height:var(--shell-top-phone);max-height:var(--shell-top-phone);padding-top:0;padding-bottom:0;padding-left:var(--s-3)!important;padding-right:var(--s-3)!important;position:sticky;top:0;gap:var(--s-2)}
  .app .topb h1{font-size:var(--t-small)}
  #navBurger{display:none}
  .app .topb .ctrls{gap:var(--s-1)}
  #perBtn #perNow,#inboxBadge #inboxBadgeTxt{display:none}
  #perBtn #perShort,#inboxBadge #inboxBadgeN{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-weight:700}
  .app .topb #perBtn{max-width:80px;overflow:hidden}
  .app .topb #inboxBadge{max-width:60px;overflow:hidden}
  .app .topb #userBtn{width:42px;max-width:42px;box-sizing:border-box;justify-content:center}
  /* the popovers: on a phone the bar itself (sticky, so a containing block) anchors them, 12px from each edge,
     instead of the button — anchored to the button, the period menu opened at x=-25 and main clipped its chips */
  .app .topb .tb-menu{position:static}
  .app .topb .tb-pop{left:var(--s-3);right:var(--s-3);min-width:0;max-width:none}
  /* nothing that floats at the bottom may sit under the bottom bar */
  .nudge{bottom:calc(var(--shell-bot) + env(safe-area-inset-bottom) + var(--s-3))}
  #planPill{bottom:calc(var(--shell-bot) + env(safe-area-inset-bottom) + var(--s-3))}
  body #backToAdmin{bottom:calc(var(--shell-bot) + env(safe-area-inset-bottom) + var(--s-3))!important}
  body #auditBar{padding-left:var(--s-4)!important}
  .side .side-more{padding:11px 12px;flex:0 0 auto}
  .app .cont{padding-left:var(--s-3);padding-right:var(--s-3);padding-bottom:calc(var(--shell-bot) + env(safe-area-inset-bottom) + var(--s-6))}
  .botbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;height:var(--shell-bot);box-sizing:content-box;padding-bottom:env(safe-area-inset-bottom);background:var(--c-surface);border-top:1px solid var(--c-line);z-index:55}
  .botbar .bb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;background:none;border:0;color:var(--c-ink-2);font:inherit;font-size:var(--t-label);font-weight:600;cursor:pointer;min-width:0}
  .botbar .bb span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .botbar .bb.on{color:var(--c-accent-ink)}
  .botbar .bb.on .ic{stroke:var(--c-accent)}
  .botbar .bb[hidden]{display:none}
}
/* the guided demo hides the period controls on purpose (body.demo-guided #dates,#calBtn); the menu that holds them goes too */
body.demo-guided #perMenu{display:none}
@media print{.botbar,.demostrip{display:none!important}}