/* ============================================================
   App shell — sidebar, topbar, page chrome
   ============================================================ */
.app{display:flex;min-height:100vh}

/* ---------- sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--white);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;height:100vh;z-index:30;
  transition:width .18s ease,flex-basis .18s ease;
}
.app.collapsed .sidebar{width:var(--sidebar-w-collapsed);flex-basis:var(--sidebar-w-collapsed)}
.main{
  flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0;
  transition:margin-left .18s ease;
}
.app.collapsed .main{margin-left:var(--sidebar-w-collapsed)}

.brand{height:var(--topbar-h);display:flex;align-items:center;justify-content:center;padding:0 12px;flex:0 0 auto}
.brand .logo-full{width:150px;height:auto}
.brand .logo-mark{width:26px;height:26px;display:none}
.app.collapsed .brand .logo-full{display:none}
.app.collapsed .brand .logo-mark{display:block}

.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:8px}
.nav-section{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);
  padding:14px 16px 6px;white-space:nowrap;
}
.nav-section.dim{color:var(--text-4)}
.nav-section .ph{
  margin-left:auto;font-style:normal;font-size:10px;font-weight:600;line-height:15px;
  min-width:16px;height:16px;border-radius:8px;text-align:center;padding:0 5px;
}
.nav-section .ph-ready{background:#E7F6EC;color:#237804}
.nav-section .ph-next{background:var(--blue-bg);color:var(--blue)}
.nav-section .ph-planned{background:#F0F0F0;color:var(--text-4)}
.nav-phase{
  margin-left:auto;font-size:9.5px;font-weight:600;color:var(--text-4);background:#F5F5F5;
  border-radius:6px;padding:1px 5px;line-height:14px;
}
.nav-item.active .nav-phase{background:#fff;color:var(--blue)}
.app.collapsed .nav-section{visibility:hidden;height:18px;padding:0}

.nav-item{
  display:flex;align-items:center;gap:12px;height:var(--nav-item-h);padding:8px 16px;
  font-size:14px;color:var(--text);cursor:pointer;white-space:nowrap;
  border-right:2px solid transparent;
}
.nav-item:hover{background:var(--hover)}
.nav-item.active{background:var(--blue-bg);color:var(--blue);border-right-color:var(--blue);font-weight:500}
.nav-item .ico{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;color:currentColor}
.nav-item .ico svg{width:19px;height:19px}
.nav-item .chev{margin-left:auto;font-size:10px;color:var(--text-3);transition:transform .16s}
.nav-item.open .chev{transform:rotate(180deg)}
.nav-sub{display:none}
.nav-sub.open{display:block}
.nav-sub .nav-item{padding-left:56px}
.app.collapsed .nav-item .lbl,
.app.collapsed .nav-phase,
.app.collapsed .nav-item .chev,
.app.collapsed .nav-sub{display:none}
.app.collapsed .nav-item{padding:8px 14px}

.side-foot{
  border-top:1px solid var(--border);padding:10px 12px 14px;display:flex;align-items:center;gap:10px;position:relative;
}
.side-foot .av{width:38px;height:38px;border-radius:50%;flex:0 0 38px}
.side-foot .who{min-width:0;line-height:1.25}
.side-foot .who b{display:block;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who small{color:var(--text-3);font-size:12px;white-space:nowrap}
.side-foot .arw{margin-left:auto;color:var(--text-3)}
.side-foot .ver{position:absolute;left:12px;bottom:1px;font-size:9px;color:var(--text-4);letter-spacing:.3px}
.app.collapsed .side-foot .who,
.app.collapsed .side-foot .arw{display:none}

/* ---------- topbar ---------- */
.topbar{
  height:var(--topbar-h);background:var(--white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;padding:0 24px 0 16px;position:sticky;top:0;z-index:20;
}
.hamburger{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius)}
.hamburger:hover{background:var(--hover)}
.search{
  display:flex;align-items:center;gap:8px;width:220px;height:32px;padding:0 10px;
  border:1px solid #E5E7EB;border-radius:var(--radius);color:var(--text-3);background:#fff;
}
.search input{border:0;outline:0;font-size:13px;width:100%;background:none}
.top-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius);position:relative;color:var(--text)}
.icon-btn:hover{background:var(--hover)}
.icon-btn .badge{
  position:absolute;top:-4px;right:-6px;background:var(--blue);color:#fff;font-size:10px;font-weight:500;
  min-width:22px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 4px;
}
.theme-toggle{
  width:44px;height:24px;border-radius:12px;background:var(--blue);position:relative;display:flex;align-items:center;padding:0 3px;
}
.theme-toggle .knob{width:18px;height:18px;border-radius:50%;background:#fff;margin-left:auto}
.theme-toggle .sun{position:absolute;left:7px;top:5px;color:#fff;font-size:11px;line-height:1}
.me{display:flex;align-items:center;gap:8px;font-size:14px}
.me img{width:32px;height:32px;border-radius:50%}

/* The topbar role switcher was removed on 14-Sep-2026 — the live ESS has no such
   control, and it was the single widest thing in .top-right (631px of overflow
   at 400px). It now lives in the Run a flow panel; see .flow-as in tour.css.
   These rules are kept ONLY because .role-badge in modules.css shares the
   `.role-switch img` sizing; nothing renders `.role-switch` any more. */
.role-switch{
  display:flex;align-items:center;gap:0;border:1px solid var(--border-input);border-radius:var(--radius);overflow:hidden;height:30px;
}
.role-switch button{
  display:flex;align-items:center;gap:6px;padding:0 11px;height:100%;font-size:12px;color:var(--text-3);background:#fff;
  border-right:1px solid var(--border-input);white-space:nowrap;
}
.role-switch button:last-child{border-right:0}
.role-switch button.on{background:var(--blue-bg);color:var(--blue);font-weight:500}
.role-switch img{width:18px;height:18px;border-radius:50%}

/* ---------- page ---------- */
.page{padding:0 24px 34px;flex:1}
.crumbs{display:flex;align-items:center;gap:10px;height:52px;font-size:14px}
.crumbs .sep{color:var(--text-4)}
.crumbs .cur{display:flex;align-items:center;gap:8px;font-weight:500}
.crumbs svg{width:17px;height:17px}
.card{background:var(--white);border:1px solid var(--border-2);border-radius:var(--radius)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
@media (max-width:1240px){ .split{grid-template-columns:1fr} }

/* Phone widths: the signed-in NAME is the last thing in .top-right and the only
   remaining source of horizontal overflow once the role switch is gone (411px
   right edge in a 400px viewport). The avatar stays — it is what identifies the
   session — and the two decorative icon buttons go, as they do on the live app. */
@media (max-width:560px){
  .top-right{gap:10px}
  .me span{display:none}
  .topbar .icon-btn[title="Full screen"],
  .topbar .icon-btn[title="Theme settings"]{display:none}
}