/* Client view hides developer controls; developer view hides the client's simplified ones. Ctrl+Shift+D three
 * times switches. Developer view also stays English and left to right, whatever language is chosen: its controls
 * name API fields and model ids. The mark is on <html>, where boot.js puts it before the page is drawn. */
.client-view .dev-only { display:none !important; }
:root:not(.client-view) .client-only { display:none !important; }

/* The markup is written in English. On a page drawn in another language those words stay out of sight until
 * i18n.js has replaced them (boot.js marks lang-pending, applyLang() clears it), rather than showing for as long
 * as the scripts take to arrive. */
.lang-pending :is([data-i18n], .lang-short) { visibility:hidden; }
.lang-pending [data-i18n-placeholder]::placeholder { color:transparent; }

/* Fast response / Deep think: M3's outlined segmented button. The lightning and the brain stay where M3 would put a
 * check on the chosen segment, because here the icons are what tell the two apart. */
.think-toggle { display:inline-flex; height:40px; }
.think-toggle button {
  display:inline-flex; align-items:center; gap:8px; padding-inline:12px 16px; cursor:pointer;
  border:1px solid var(--md-outline); background:transparent; color:var(--md-on-surface);
  font:var(--md-label-large); letter-spacing:var(--md-label-large-track); white-space:nowrap;
}
.think-toggle button:first-child {
  border-start-start-radius:var(--md-shape-full); border-end-start-radius:var(--md-shape-full);
}
.think-toggle button:last-child {
  border-inline-start:0; border-start-end-radius:var(--md-shape-full); border-end-end-radius:var(--md-shape-full);
}
.think-toggle button .ic { font-size:18px; }
.think-toggle button:hover { background-image:var(--md-hover-layer); }
.think-toggle button:active { background-image:var(--md-press-layer); }
.think-toggle button:focus-visible { outline-offset:-3px; }
.think-toggle button.on { background-color:var(--md-secondary-container); color:var(--md-on-secondary-container); }
.think-toggle button:disabled {
  border-color:var(--md-disabled-container); color:var(--md-disabled-content); background-image:none; cursor:not-allowed;
}

@media (max-width: 620px) {
  .think-toggle button { padding-inline:10px; }
  .think-toggle button span { display:none; }        /* the lightning and the brain still say which is which */
}