/* Top bar · 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: a composed component. */
/* base.css */
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-5);border-bottom:1px solid hsl(var(--border));background:hsl(var(--background)/.86);backdrop-filter:blur(var(--blur-glass));position:relative;z-index:2}
/* base.css */
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
/* base.css */
.p-bar{display:flex;align-items:center;gap:10px;height:var(--pbar-h);padding:0 var(--s-3);border-bottom:1px solid hsl(var(--border));background:hsl(var(--background))}
/* base.css */
.p-bar b{font:var(--w-semibold) 15px/1 var(--font-voice)}
/* base.css */
.p-bar .r{margin-left:auto;display:flex;gap:6px;align-items:center}
/* base.css */
.p-bar .icon-btn{width:var(--control-h-m);height:var(--control-h-m);border:0;background:transparent}
/* families/app-shell/family.css */
.sh-acct b{font-family:var(--font-voice);font-stretch:var(--font-stretch-title);font-variation-settings:normal;letter-spacing:0}
/* families/app-shell/family.css */
.sh-topbar .crumbs a{text-decoration:none;color:inherit;border-radius:var(--r-chip);transition:color var(--motion-hover)}
/* families/app-shell/family.css */
.sh-topbar .crumbs a:hover{color:hsl(var(--foreground))}
/* families/app-shell/family.css */
.sh-banner{display:flex;align-items:center;gap:var(--s-2);height:32px;padding:0 var(--s-5);font-size:var(--text-small);color:hsl(var(--warning));background:hsl(var(--warning)/.08);border-bottom:1px solid hsl(var(--warning)/.25)}
/* families/app-shell/family.css */
.sh-banner a{color:hsl(var(--warning));font-weight:var(--w-semibold)}
/* families/app-shell/family.css */
.sh-notice{display:flex;align-items:center;gap:var(--s-2);min-height:28px;padding:var(--s-1) var(--s-5);font-size:var(--text-small);color:hsl(var(--foreground));background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border))}
/* families/app-shell/family.css */
.sh-notice svg{color:hsl(var(--warning))}
/* families/app-shell/family.css */
.sh-notice .btn{margin-left:auto}
/* families/app-shell/family.css */
.sh-avatar-btn{border-radius:var(--r-pill);transition:box-shadow var(--motion-focus)}
/* families/app-shell/family.css */
.sh-avatar-btn.is-hover .avatar{background:hsl(var(--secondary-border))}
/* families/app-shell/family.css */
.sh-avatar-btn.is-focus{outline:2px solid hsl(var(--ring));outline-offset:2px}
/* families/app-shell/family.css */
.sh-acct{padding:var(--s-3) var(--s-3) var(--s-2);display:flex;gap:10px;align-items:center}
/* families/app-shell/family.css */
.sh-acct b{display:block;font-size:var(--text-card);font-weight:var(--w-semibold)}
/* families/app-shell/family.css */
.sh-acct small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
/* families/app-shell/family.css */
.p-bar .staging{letter-spacing:.02em;padding:5px 6px;flex:none}
/* families/app-shell/family.css */
.p-bar .r{gap:0;flex:none}
/* families/wizard-stepper/family.css */
.p-bar .wz-pbtn{height:var(--control-h-m)}