/* Shared control recipe; the containing shell supplies the canonical tokens. */
.theme-control { display:inline-flex; flex:none; align-items:center; gap:6px; color:var(--ink-2); font:var(--t-body-2)/1.4 var(--sans); white-space:nowrap }
.theme-control select { min-height:32px; max-width:100%; padding:4px 6px; border:1px solid var(--ink-3); border-radius:7px; background:var(--panel); color:var(--ink); font:inherit; cursor:pointer }
.theme-control select:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.theme-icon-control { position:relative; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:8px; color:var(--ink-2) }
.theme-icon-control:hover { background:var(--panel-2); color:var(--ink) }
.theme-icon-control:focus-within { outline:2px solid var(--accent); outline-offset:2px }
.theme-icon-control svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; pointer-events:none }
.theme-icon-control select { position:absolute; inset:0; width:100%; height:100%; min-height:0; padding:0; opacity:0; cursor:pointer }
.theme-icon-control [data-theme-icon] { display:none }
:root:not([data-theme]) .theme-icon-control [data-theme-icon="system"],
:root[data-theme="light"] .theme-icon-control [data-theme-icon="light"],
:root[data-theme="dark"] .theme-icon-control [data-theme-icon="dark"] { display:block }
@media (pointer:coarse), (max-width:48rem) {
  .theme-control select { min-height:44px }
  .theme-icon-control { width:44px; height:44px }
}