/* Preview controls for the mock sites (the owner, 22 Oct). Master copy: work/mock-controls/, copied into each site by install.py.
   1. Pictures: Rendered | Your Photos (bottom-left on a computer, at the top of the footer on a phone).
   2. Colours: one tab in the bar, Dark | Light, for the whole site (23 Oct). The section dots are gone.
   The three themes set the same tokens every site uses. Every text colour passes 4.5:1 (work/mock-controls/contrast.py).
   Uses the site's own text size (--s4) and a button height the site already has (--mc-h), so the design lint stays clean. */

[data-theme="dark"] {
  --ink: #0B1117; --ink-2: #121A22; --ink-3: #18222C;
  --stone: #F2F1EE; --muted: #A9B3BB;
  --line: rgba(242, 241, 238, .14); --line-strong: rgba(242, 241, 238, .42);
  --accent: #22709F; --on-accent: #FFFFFF; --accent-text: #9CC4E2; --error: #FF9C8F;
}
[data-theme="light"] {
  --ink: #FFFFFF; --ink-2: #F1F3F5; --ink-3: #F7F8FA;
  --stone: #12181E; --muted: #4E5862;
  --line: rgba(18, 24, 30, .12); --line-strong: rgba(18, 24, 30, .5);
  --accent: #22709F; --on-accent: #FFFFFF; --accent-text: #1C5F8A; --error: #A8321F;
}
[data-theme="blue"] {
  --ink: #17577F; --ink-2: #134B6E; --ink-3: #1C6390;
  --stone: #FFFFFF; --muted: #DCEAF4;
  --line: rgba(255, 255, 255, .2); --line-strong: rgba(255, 255, 255, .6);
  --accent: #FFFFFF; --on-accent: #134B6E; --accent-text: #CFE7F8; --error: #FFDAD4;
}
[data-mc][data-theme] { color: var(--stone); }
[data-mc] { position: relative; }

/* The three dots */
.mc-dots { display: inline-flex; align-items: center; gap: 0; padding: 0 4px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(11, 17, 23, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mc-dots button { display: inline-flex; align-items: center; justify-content: center; width: var(--mc-h, 40px); height: var(--mc-h, 40px); padding: 0; border: 0; background: none; cursor: pointer; }
.mc-dots button::before { content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); transition: box-shadow .2s, transform .2s; }
.mc-dots button[data-set="dark"]::before { background: #0B1117; }
.mc-dots button[data-set="light"]::before { background: #FFFFFF; }
.mc-dots button[data-set="blue"]::before { background: #22709F; }
.mc-dots button[aria-pressed="true"]::before { box-shadow: 0 0 0 2px #0B1117, 0 0 0 4px #FFFFFF; transform: scale(1.05); }
.mc-dots button:hover::before { transform: scale(1.15); }
.mc-dots button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; border-radius: 50%; }
/* in each section: top right, small */
.mc-sec { position: absolute; z-index: 30; top: 16px; right: 16px; }
[data-mc-host] > .mc-sec { top: calc(var(--head-h, 72px) + 16px); }

/* The bar */
.mc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 4px 4px 4px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(11, 17, 23, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #F2F1EE; font: 500 var(--s4)/1.2 var(--text, system-ui); letter-spacing: 0; }
.mc-label { color: #C9D1D8; }
.mc-seg { display: inline-flex; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.mc-seg button { height: var(--mc-h, 40px); padding: 0 16px; border: 0; border-radius: 999px; background: none; color: #F2F1EE; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }
.mc-seg button[aria-pressed="true"] { background: #F2F1EE; color: #0B1117; }
.mc-seg button:focus-visible { outline: 2px solid #9CC4E2; outline-offset: 2px; }
.mc-bar .mc-dots { border: 0; background: none; padding: 0; }
/* 23 Oct: folded on a computer (View Options), always open in the phone's footer */
.mc-panel { display: contents; }
.mc-toggle { height: var(--mc-h, 40px); padding: 0 16px; border: 0; border-radius: 999px; background: none; color: #F2F1EE; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mc-toggle:hover { background: rgba(255, 255, 255, .1); }
.mc-toggle:focus-visible { outline: 2px solid #9CC4E2; outline-offset: 2px; }
@media (min-width: 761px) {
  .mc-bar:not(.open) .mc-panel { display: none; }
  .mc-bar:not(.open) { padding: 4px; gap: 4px; }
}
@media (max-width: 760px) { .mc-toggle { display: none; } }
.mc-back { display: inline-flex; align-items: center; height: var(--mc-h, 40px); padding: 0 16px; border-radius: 999px; background: #22709F; color: #FFFFFF; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mc-back:hover { background: #2A82B6; }
.mc-back:focus-visible { outline: 2px solid #9CC4E2; outline-offset: 2px; }
@media (min-width: 761px) {
  .mc-bar { position: fixed; z-index: 45; left: 16px; bottom: 16px; }
}
@media (max-width: 760px) {
  .mc-bar { margin: 0 0 40px; border-radius: 24px; padding: 8px 8px 8px 16px; }
  .mc-sec, [data-mc-host] > .mc-sec { top: 8px; right: 8px; }
}