/* App shell and sidebar · the kit rules for this component, quoted from phase-2/kit (kit v3) by phase-4/src/build_pack.py.
   Tokens come from ../../styles.css. Build it as: Sidebar. */
/* base.css */
.sb-group, .sb-brand b{font-family:var(--font-voice);font-stretch:var(--font-stretch-title);font-variation-settings:normal}
/* base.css */
.frame{border-radius:var(--r-frame);overflow:clip;background:hsl(var(--background));position:relative;box-shadow:var(--e-frame)}
/* base.css */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:640px}
/* base.css */
.sidebar{background:var(--sidebar-sheen);color:hsl(var(--sidebar-foreground));padding:14px 10px;display:flex;flex-direction:column;gap:var(--s-1);position:relative;box-shadow:var(--e-sidebar-edge)}
/* base.css */
.sidebar::before{content:"";position:absolute;left:-40px;top:-60px;width:300px;height:260px;border-radius:50%;background:var(--sidebar-sheen-light);pointer-events:none}
/* base.css */
.sidebar>*{position:relative}
/* base.css */
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 12px}
/* base.css */
.brand-mark{width:30px;height:30px;border-radius:var(--r-control);display:grid;place-items:center;font:var(--w-bold) 12px/1 var(--font-voice);background:var(--brand-mark);color:var(--brand-mark-foreground);box-shadow:var(--e-brand-mark)}
/* base.css */
.sb-brand .who{flex:1;min-width:0;line-height:1.25}
/* base.css */
.sb-brand b{display:block;font-weight:var(--w-semibold);font-size:var(--text-card)}
/* base.css */
.sb-brand small{font-size:var(--text-micro);opacity:.7}
/* base.css */
.sb-group{font-size:var(--text-micro);font-weight:var(--w-medium);opacity:.6;padding:12px 10px 4px}
/* base.css */
.sb-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 2px;font-size:var(--text-small);border-top:1px solid hsl(var(--sidebar-foreground)/.12)}
/* base.css */
.main{display:flex;flex-direction:column;min-width:0;position:relative;overflow:clip}
/* families/app-shell/family.css */
.sh-col{display:flex;flex-direction:column}
/* families/app-shell/family.css */
.sh-col>.frame{flex:1;display:flex;flex-direction:column}
/* families/app-shell/family.css */
.sh-col>.frame>.app{flex:1}
/* families/app-shell/family.css */
.sh-shell .app{min-height:600px}
/* families/app-shell/family.css */
.sh-shell.sh-short .app{min-height:520px}
/* families/app-shell/family.css */
.sh-hq::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:hsl(var(--sidebar-primary)/.9)}
/* families/app-shell/family.css */
.sh-scope{display:flex;align-items:center;gap:6px;margin:-4px 8px 10px;font-size:var(--text-micro);color:hsl(var(--sidebar-primary))}
/* families/app-shell/family.css */
.sh-hqrail{height:3px;background:hsl(var(--sidebar-primary))}
/* families/app-shell/family.css */
.sh-hqrail.navy{background:hsl(var(--primary))}