/* The sidebar (Instrument look; Peter, 2026-10-28: the sidebar "doesn't really work together with the rest").
   It is a plate like every other panel, darker than the dotted ground and joined to it by the seam, not
   a lighter slab of its own. Where you are is marked the way the app marks state: in ink, square, with a
   bar, no rounded pill. The layout choice is the app's segmented control. Every glyph speaks in dots:
   Home is the mark, Personas a dot and its twin, Templates empty slots, Sources two points joined,
   Company context a dot in its frame, Updates a half-changed dot, Outputs a page of dots. */
html[data-look="instrument"][data-zones] {
  --surface-navigation: var(--plate);
  --navigation-active: color-mix(in oklch, var(--on-surface) 6%, var(--plate));
  --on-navigation: var(--on-surface);
  --on-navigation-muted: var(--on-surface-muted);
  --navigation-line: var(--line-strong);
}
html[data-look="instrument"] .nav-primary { background: var(--plate); box-shadow: inset -2px 0 0 var(--seam); }
html[data-look="instrument"] .nav-primary__link { border-radius: 0 !important; position: relative; }
html[data-look="instrument"] .nav-primary__link:hover { background: color-mix(in oklch, var(--on-surface) 4%, var(--plate)); }
html[data-look="instrument"] .nav-primary__link[aria-current='page'] { background: var(--navigation-active); color: var(--on-surface); font-weight: 600; box-shadow: inset 2px 0 0 var(--on-surface); }
html[data-look="instrument"] .nav-primary__link[aria-current='page']::before { opacity: 1; }

/* Layout, and under it dark or light: one segmented control each, the same as the app's group-by */
html[data-look="instrument"] :is(.layout-preference, .theme-preference) .toolbar { display: inline-flex; gap: 0; padding: 3px; border-radius: 999px; background: color-mix(in oklch, var(--on-surface) 8%, var(--plate)); }
html[data-look="instrument"] .nav-primary :is(.layout-preference, .theme-preference) .filter-chip { min-height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--on-surface-muted); }
html[data-look="instrument"] .nav-primary :is(.layout-preference, .theme-preference) .filter-chip[aria-pressed='true'] { background: var(--on-surface); color: var(--plate); }
html[data-look="instrument"] .nav-primary .theme-preference { margin-top: 4px; justify-self: start; }
html[data-look="instrument"] .nav-primary .theme-preference .filter-chip { display: inline-grid; place-items: center; min-width: 40px; padding: 0 12px; }
html[data-look="instrument"] .nav-primary .theme-preference svg { display: block; }

/* The phone's bars are the same plate */
html[data-look="instrument"] .tabbar { background: var(--plate); box-shadow: inset 0 2px 0 var(--seam); }
html[data-look="instrument"] .tabbar__link[aria-current="page"] { background: var(--navigation-active) !important; }

html[data-look="instrument"] :is(.nav-primary__link, .tabbar__link)[href="/"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='10' cy='3.3' r='2.7'/%3E%3Crect x='4' y='6.6' width='12' height='1.2'/%3E%3Cellipse cx='10' cy='10' rx='2.7' ry='1.4'/%3E%3C/svg%3E"); --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='10' cy='3.3' r='2.7'/%3E%3Crect x='4' y='6.6' width='12' height='1.2'/%3E%3Cellipse cx='10' cy='10' rx='2.7' ry='1.4'/%3E%3C/svg%3E"); }
html[data-look="instrument"] :is(.nav-primary__link, .tabbar__link)[href$="/buyer_personas"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='6.5' cy='6' r='3.4'/%3E%3Ccircle cx='14' cy='6' r='2.7' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='6.5' cy='6' r='3.4'/%3E%3Ccircle cx='14' cy='6' r='2.7' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-look="instrument"] :is(.nav-primary__link, .tabbar__link)[href$="/persona_templates"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='4' cy='6' r='2.1' fill='none' stroke='black' stroke-width='1.3'/%3E%3Ccircle cx='10' cy='6' r='2.1' fill='none' stroke='black' stroke-width='1.3'/%3E%3Ccircle cx='16' cy='6' r='2.1' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E"); --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='4' cy='6' r='2.1' fill='none' stroke='black' stroke-width='1.3'/%3E%3Ccircle cx='10' cy='6' r='2.1' fill='none' stroke='black' stroke-width='1.3'/%3E%3Ccircle cx='16' cy='6' r='2.1' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E"); }
html[data-look="instrument"] :is(.nav-primary__link, .tabbar__link)[href$="/sources"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='4' cy='6' r='2.3'/%3E%3Ccircle cx='16' cy='6' r='2.3'/%3E%3Crect x='6' y='5.4' width='8' height='1.2'/%3E%3C/svg%3E"); --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='4' cy='6' r='2.3'/%3E%3Ccircle cx='16' cy='6' r='2.3'/%3E%3Crect x='6' y='5.4' width='8' height='1.2'/%3E%3C/svg%3E"); }
html[data-look="instrument"] :is(.nav-primary__link, .tabbar__link)[href$="/company_context"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Crect x='5.2' y='1.2' width='9.6' height='9.6' fill='none' stroke='black' stroke-width='1.4'/%3E%3Ccircle cx='10' cy='6' r='2.2'/%3E%3C/svg%3E"); --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Crect x='5.2' y='1.2' width='9.6' height='9.6' fill='none' stroke='black' stroke-width='1.4'/%3E%3Ccircle cx='10' cy='6' r='2.2'/%3E%3C/svg%3E"); }
html[data-look="instrument"] :is(.nav-primary__link, .tabbar__link)[href$="/proposed_updates"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='10' cy='6' r='4' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M10 2a4 4 0 0 0 0 8z'/%3E%3C/svg%3E"); --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='10' cy='6' r='4' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M10 2a4 4 0 0 0 0 8z'/%3E%3C/svg%3E"); }
html[data-look="instrument"] :is(.nav-primary__link, .tabbar__link)[href$="/outputs"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='5' cy='2.5' r='0.95'/%3E%3Ccircle cx='8' cy='2.5' r='0.95'/%3E%3Ccircle cx='11' cy='2.5' r='0.95'/%3E%3Ccircle cx='14' cy='2.5' r='0.95'/%3E%3Ccircle cx='17' cy='2.5' r='0.95'/%3E%3Ccircle cx='5' cy='6' r='0.95'/%3E%3Ccircle cx='8' cy='6' r='0.95'/%3E%3Ccircle cx='11' cy='6' r='0.95'/%3E%3Ccircle cx='14' cy='6' r='0.95'/%3E%3Ccircle cx='17' cy='6' r='0.95'/%3E%3Ccircle cx='5' cy='9.5' r='0.95'/%3E%3Ccircle cx='8' cy='9.5' r='0.95'/%3E%3Ccircle cx='11' cy='9.5' r='0.95'/%3E%3C/svg%3E"); --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='5' cy='2.5' r='0.95'/%3E%3Ccircle cx='8' cy='2.5' r='0.95'/%3E%3Ccircle cx='11' cy='2.5' r='0.95'/%3E%3Ccircle cx='14' cy='2.5' r='0.95'/%3E%3Ccircle cx='17' cy='2.5' r='0.95'/%3E%3Ccircle cx='5' cy='6' r='0.95'/%3E%3Ccircle cx='8' cy='6' r='0.95'/%3E%3Ccircle cx='11' cy='6' r='0.95'/%3E%3Ccircle cx='14' cy='6' r='0.95'/%3E%3Ccircle cx='17' cy='6' r='0.95'/%3E%3Ccircle cx='5' cy='9.5' r='0.95'/%3E%3Ccircle cx='8' cy='9.5' r='0.95'/%3E%3Ccircle cx='11' cy='9.5' r='0.95'/%3E%3C/svg%3E"); }