/* ==========================================================================
   layout.css: brand, site header and footer, screens, and in-screen app chrome
   ========================================================================== */

/* ---- brand ---- */
.logo-chip{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#1E3A8A,#2563EB);color:#fff;font-weight:700;font-size:12px;}
.brand-word{font-weight:600;font-size:14px;letter-spacing:-.005em;}

/* ---- site header / footer ---- */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;height:64px;padding:0 32px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.site-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;}
.site-nav{display:flex;flex:1;gap:4px;}
.site-actions{display:flex;align-items:center;gap:4px;}
.site-nav a,.site-actions a{padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:background .15s,color .15s;}
.site-nav a:hover,.site-actions a:hover{background:var(--surface-alt);color:var(--ink);}
.site-nav a.active{background:var(--brand-soft);color:var(--brand);font-weight:600;}
.site-actions a.logout{border:1px solid var(--line-strong);color:var(--ink);}
.site-actions a.logout:hover{background:var(--surface-alt);}
.role-chip{padding:3px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:600;}
.user-chip{padding:0 8px;font-size:13px;color:var(--ink-soft);}
.site-main{max-width:1280px;margin:0 auto;padding:28px 24px 48px;}
.site-footer{padding:24px;text-align:center;font-size:12.5px;color:var(--ink-faint);}

/* ---- screens (pages inside a portal) ---- */
.screen{position:relative;display:none;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);}
.screen.active{display:block;animation:page-in .2s ease-out;}
@keyframes page-in{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ---- in-screen app chrome ---- */
.app-body{display:flex;min-height:680px;}
.app-main{flex:1;min-width:0;padding:28px 32px;}
.app-main.split{display:flex;gap:36px;}
.app-main.split .col{flex:1;min-width:0;}
.app-main.split .col.narrow{flex:0 0 320px;}
.h2{margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:18px;font-weight:650;letter-spacing:-.01em;}
.hint{margin-top:8px;font-size:12px;color:var(--ink-soft);}