/* Tabs, day buttons and switches that read as buttons (Ali picked look C, 2026-10-22: "too blended in the theme, hard
   to see they are buttons"). Loaded after every look, so it is the one place these controls get their look:
   - module tabs (.gv-tabs) sit on a dark bar like the bottom dock, the open one solid accent;
   - day buttons and every two-to-five-way switch are one joined switch with a clear accent edge and dividers, the
     chosen part solid accent;
   - "Show on the chart" is an outlined button. */
:root { --sw-bar: #1c1e3a; --sw-bar-text: #d9dbf2; --sw-edge: #8b83f7; --sw-divide: #c7cbe6; --sw-face: #ffffff; }
:root[data-theme="dark"] { --sw-bar: #2a2d55; --sw-bar-text: #e3e4f7; --sw-edge: #8b83f7; --sw-divide: rgba(199, 203, 230, .25); --sw-face: #171a33; }

/* module tabs: the dark bar */
:root[data-theme] .gv-tabs { background: var(--sw-bar); border: 0; padding: 6px; border-radius: 16px; gap: 4px; box-shadow: 0 6px 18px -8px rgba(20, 22, 52, .45); }
:root[data-theme] .gv-tabs a { color: var(--sw-bar-text); font-weight: 600; border-radius: 11px; padding: 9px 15px; }
:root[data-theme] .gv-tabs a svg { color: inherit; opacity: .85; }
:root[data-theme] .gv-tabs a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
:root[data-theme] .gv-tabs a[aria-current="page"] { background: var(--accent-solid); color: #fff; }
:root[data-theme] .gv-tabs .gv-tab-soon { color: rgba(217, 219, 242, .55); }
:root[data-theme] .gv-tabs .gv-tab-soon svg { color: inherit; }

/* one joined switch */
:root[data-theme] .ins-presets, :root[data-theme] .mf-seg, :root[data-theme] .tz-off-sw, :root[data-theme] .cb-seg,
:root[data-theme] .cb-views, :root[data-theme] .wx-switch, :root[data-theme] .sv-seg, :root[data-theme] .am-seg {
  display: inline-flex; flex-wrap: nowrap; gap: 0; padding: 0; border: 1.5px solid var(--sw-edge); border-radius: 12px;
  background: var(--sw-face); overflow: hidden; max-width: 100%; overflow-x: auto; scrollbar-width: none; box-shadow: none; }
:root[data-theme] .ins-presets { flex: 0 1 auto; align-self: center; margin-right: auto; }
:root[data-theme] .ins-presets .chip, :root[data-theme] .mf-seg a, :root[data-theme] .tz-off-sw button,
:root[data-theme] .tz-off-sw > span, :root[data-theme] .cb-seg button, :root[data-theme] .cb-views button,
:root[data-theme] .cb-views a, :root[data-theme] .wx-card .wx-switch button, :root[data-theme] .sv-seg-opt > span,
:root[data-theme] .am-seg .chip {
  flex: none; min-height: 36px; margin: 0; padding: 7px 15px; border: 0; border-right: 1px solid var(--sw-divide);
  border-radius: 0 !important;  /* GUI WOOW rounds every chip; these are parts of one switch */ background: transparent; color: var(--text); font-size: .85rem; font-weight: 600; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
:root[data-theme] .ins-presets .chip:last-child, :root[data-theme] .mf-seg a:last-child, :root[data-theme] .tz-off-sw button:last-child,
:root[data-theme] .cb-seg button:last-child, :root[data-theme] .cb-views > :last-child, :root[data-theme] .wx-card .wx-switch button:last-child,
:root[data-theme] .sv-seg-opt:last-child > span, :root[data-theme] .am-seg .chip:last-child { border-right: 0; }
:root[data-theme] .tz-off-sw > span { color: var(--text-2); background: var(--surface-2); }
:root[data-theme] .ins-presets .chip:not(.on):hover, :root[data-theme] .mf-seg a:not(.on):hover, :root[data-theme] .tz-off-sw button:hover,
:root[data-theme] .cb-seg button:not(.on):hover, :root[data-theme] .cb-views > :not(.on):hover, :root[data-theme] .wx-card .wx-switch button:hover,
:root[data-theme] .sv-seg-opt:hover > span, :root[data-theme] .am-seg .chip:not(.on):hover {
  background: var(--accent-soft); color: var(--text); border-color: var(--sw-divide); filter: none; transform: none; box-shadow: none; }
:root[data-theme] .ins-presets .chip.on, :root[data-theme] .mf-seg a.on, :root[data-theme] .tz-off-sw button[aria-pressed="true"],
:root[data-theme] .cb-seg button.on, :root[data-theme] .cb-views > .on, :root[data-theme] .cb-views > [aria-pressed="true"],
:root[data-theme] .wx-card .wx-switch button[aria-pressed="true"], :root[data-theme] .wx-card .wx-switch button[aria-pressed="true"]:hover,
:root[data-theme] .sv-seg-opt input:checked + span, :root[data-theme] .am-seg .chip.on {
  background: var(--accent-solid); color: #fff; font-weight: 700; box-shadow: none; }
:root[data-theme] .sv-seg-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -3px; }
:root[data-theme] .ins-presets::-webkit-scrollbar, :root[data-theme] .mf-seg::-webkit-scrollbar, :root[data-theme] .am-seg::-webkit-scrollbar { display: none; }

/* "Show on the chart": an outlined button */
:root[data-theme] .tz-pick > summary { border: 1.5px solid var(--sw-edge); background: var(--sw-face); color: var(--accent-strong, var(--accent)); font-weight: 600; }
:root[data-theme] .tz-pick > summary span { color: inherit; }
:root[data-theme] .tz-pick > summary:hover { background: var(--accent-soft); }
:root[data-theme] .tz-pick > summary.on { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }

@media (max-width: 600px) {
  :root[data-theme] .ins-presets { margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  :root[data-theme] .mf-seg { display: inline-flex; flex-wrap: nowrap; border-radius: 12px; }
  :root[data-theme] .mf-seg a { flex: 1 0 auto; padding: 7px 12px; }
}

/* the module's tab bar stays frozen under the top bar while scrolling, on every module with tabs (Ali, 2026-10-22);
   mm.js adds its height to --top-h, so the days and sites bar sticks right under it. The top bar and the dock stay
   above it. */
.app.docked .gv-section.frozen { position: sticky; top: var(--bar-h, 68px); z-index: 150; background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); padding-bottom: 10px; transition: padding .15s ease; }
.app.docked .gv-section.frozen.stuck { padding-top: 10px; clip-path: inset(0 -100vmax -12px); box-shadow: 0 0 0 100vmax var(--bg), 0 10px 12px -10px rgba(20, 22, 52, .18); }
.app.docked .gv-section.frozen.stuck .gv-section-id .dock-tile { width: 36px; height: 36px; border-radius: 11px; }
@media (max-width: 600px) {
  .app.docked .gv-section.frozen.stuck { padding-top: 8px; padding-bottom: 8px; }
  .app.docked .gv-section.frozen.stuck .gv-section-id, .app.docked .gv-section.frozen.stuck .fresh { display: none; }
}