/* Frame: header / sidebar / workspace (tabs bar, stage + right panel, status bar). Desktop-first for
   1920×1080 and 1440×900; single column with a horizontal nav under 900 px. */
.app { height: 100vh; display: grid; grid-template-rows: 72px minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }

.topbar { position: relative; z-index: 30; grid-row: 1; display: flex; align-items: center; gap: 28px; padding: 8px 32px; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, #06111f, #0a1d34 50%, #06111f); }
.brand { display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 4px 6px 4px 0; color: var(--text); cursor: pointer; text-align: left; border-radius: 8px; }
.brand img { display: block; height: 46px; width: auto; object-fit: contain; }
.brand-text { display: grid; gap: 1px; }
.brand .title { font-weight: 800; letter-spacing: -.4px; font-size: 21px; line-height: 1.15; white-space: nowrap; }
.brand .title span { color: var(--accent); }
.subbrand { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.brand:hover .title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.navbtn { position: relative; padding: 10px 14px; border: 0; background: none; color: var(--text); font: 700 15px/1.2 var(--font); white-space: nowrap; border-radius: 6px; cursor: pointer; transition: color .15s; }
/* the underline draws from the left on hover and stays under the current page */
.navbtn::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease-out; }
.navbtn:hover { color: #fff; }
.navbtn:hover::after, .navbtn.active::after { transform: scaleX(1); }
.navbtn.active { color: var(--accent); }
.navbtn:active { transform: translateY(1px); }
.topmeta { display: flex; align-items: center; gap: 8px; }
.topmeta .pill, .topmeta .statuspill { white-space: nowrap; }
.brand-team { height: 46px; width: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .navbtn, .navbtn::after { transition: none; } }

.shell { grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }

.main { min-width: 0; min-height: 0; overflow-y: auto; }
.page { min-width: 0; }
#page-analysis { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 12px; min-height: 620px; }
.workbar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); flex-wrap: wrap; }
.workspace { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 10px; }
.stage { position: relative; min-width: 0; min-height: 420px; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.view { position: absolute; inset: 0; }
.rightpanel { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius); min-height: 0; overflow-y: auto; padding: 14px; }
.statusbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

@media (max-width: 1500px) { .topmeta .statuspill { display: none; } }
@media (max-width: 1280px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 320px; }
  .topmeta { display: none; }
}
@media (max-width: 1100px) { .brand-team { display: none; } .topbar { gap: 16px; padding: 8px 20px; } .navbtn { padding: 10px 9px; font-size: 14px; } .navbtn::after { left: 9px; right: 9px; } }
@media (max-width: 900px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; grid-template-rows: auto 1fr; }
  .topbar { flex-wrap: wrap; padding: 8px 16px 0; gap: 4px 12px; }
  .brand img { height: 34px; }
  .subbrand { display: none; }
  .topnav { margin-left: -9px; width: calc(100% + 18px); overflow-x: auto; scrollbar-width: none; }
  .navbtn { min-height: 44px; }
  .main { overflow: visible; }
  #page-analysis { height: auto; padding: 10px 16px; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .stage { min-height: 70vh; }
  .rightpanel { overflow: visible; }
  .statusbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}