/* ==========================================================================
   company-shell.css — the application chrome: sidebar, topbar, content.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--co-ground); color:var(--co-ink);
  font-family:var(--co-font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:600}
p{margin:0}
button{font:inherit; color:inherit}
a{color:var(--co-accent-ink)}
:focus-visible{outline:2px solid var(--co-accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.co-skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--co-surface); color:var(--co-ink); padding:10px 16px;
  border:1px solid var(--co-border); border-radius:0 0 var(--co-radius-sm) 0;
}
.co-skip-link:focus{left:0}

.co-shell{display:flex; min-height:100vh}

.co-sidebar{
  width:var(--co-sidebar-w); flex:0 0 var(--co-sidebar-w);
  background:var(--co-surface); border-right:1px solid var(--co-border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.co-brand{
  height:var(--co-topbar-h); display:flex; align-items:center; gap:9px;
  padding:0 18px; border-bottom:1px solid var(--co-border); flex:0 0 auto;
  text-decoration:none; color:inherit;
}
/* The client's own circular monogram. White ground is part of the mark, so it
   keeps its own background in both themes rather than being tinted to match. */
.co-brand-mark{
  width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  display:block; object-fit:contain; background:#ffffff;
}
.co-brand-mark--lg{width:44px; height:44px; flex:0 0 44px}
.co-brand-name{font-family:var(--co-font-display); font-size:17px; font-weight:600; letter-spacing:-.01em}
.co-brand-sub{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--co-ink-3); margin-top:-2px}

.co-nav{flex:1 1 auto; overflow-y:auto; padding:12px 10px 20px}
.co-nav-section{margin-top:14px}
.co-nav-section:first-child{margin-top:2px}
.co-nav-head{
  font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--co-ink-3); padding:6px 10px 5px; font-weight:600;
}
.co-nav-item{
  width:100%; display:flex; align-items:center; gap:9px;
  padding:7px 10px; border:0; background:none; cursor:pointer;
  border-radius:var(--co-radius-sm); color:var(--co-ink-2); font-size:13.5px;
  text-align:left; text-decoration:none; transition:background .12s, color .12s;
}
.co-nav-item:hover{background:var(--co-surface-2); color:var(--co-ink)}
.co-nav-item[aria-current="page"]{background:var(--co-accent-soft); color:var(--co-accent-ink); font-weight:600}
.co-nav-item .bx{width:16px; height:16px; flex:0 0 16px; opacity:.85}
.co-nav-count{
  margin-left:auto; font-size:10.5px; font-weight:600; padding:1px 6px;
  border-radius:20px; background:var(--co-attention-soft); color:var(--co-attention);
  font-variant-numeric:tabular-nums;
}

.co-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.co-topbar{
  height:var(--co-topbar-h); flex:0 0 auto; position:sticky; top:0; z-index:20;
  background:var(--co-surface); border-bottom:1px solid var(--co-border);
  display:flex; align-items:center; gap:14px; padding:0 22px;
}
.co-crumb{font-size:12px; color:var(--co-ink-3)}
.co-crumb b{color:var(--co-ink-2); font-weight:500}
.co-crumb .sep{opacity:.5}
.co-topbar-right{margin-left:auto; display:flex; align-items:center; gap:10px}

.co-iconbtn{
  width:32px; height:32px; border-radius:var(--co-radius-sm);
  border:1px solid var(--co-border); background:var(--co-surface);
  cursor:pointer; display:grid; place-items:center; color:var(--co-ink-2);
}
.co-iconbtn:hover{background:var(--co-surface-2); color:var(--co-ink)}

.co-who{display:flex; align-items:center; gap:8px; padding-left:10px; border-left:1px solid var(--co-border)}
.co-who-name{font-size:12.5px; font-weight:600; line-height:1.15}
.co-who-role{font-size:10.5px; color:var(--co-ink-3); line-height:1.15}

.co-content{flex:1 1 auto; padding:24px 26px 60px; max-width:1460px; width:100%}

.co-env-banner{
  background:var(--co-waiting-soft); color:var(--co-waiting); font-size:11.5px;
  font-weight:600; padding:5px 26px; letter-spacing:.02em;
  border-bottom:1px solid var(--co-waiting);
}

.co-page-header{display:flex; align-items:flex-end; gap:20px; margin-bottom:20px; flex-wrap:wrap}
.co-page-title{font-family:var(--co-font-display); font-size:26px; font-weight:600; letter-spacing:-.015em; line-height:1.15}
.co-page-subtitle{font-size:13px; color:var(--co-ink-3); margin-top:4px}
.co-page-actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}

@media (max-width:880px){
  .co-sidebar{display:none}
  .co-content{padding:18px 14px 50px}
  .co-topbar{padding:0 14px}
  .co-who{display:none}
}