/* The Display (Aa) button and panel on the product sites (/lexvoca/, /claravoca/, /itspecta/).
   Loaded after home/display.css. The product sites use fewer colour tokens than the main site,
   so the panel's extra tokens are set here; cream and mist from display.css still win. */
:root:not([data-theme=cream]):not([data-theme=mist]){--head:var(--ink);--card:#1d1a16;--raised:#2a2621;--hair:rgba(255,248,235,.08);--acc-text:var(--acc)}
:root[data-theme=cream],:root[data-theme=mist]{--edge2:color-mix(in srgb,var(--ink) 22%,transparent)}
:root[data-theme=cream] body,:root[data-theme=mist] body{background:var(--bg)}
:root[data-theme=cream] .top,:root[data-theme=mist] .top{background:color-mix(in srgb,var(--bg) 90%,transparent)}
.aa-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px 0 6px;margin-left:14px;border-radius:999px;border:1px solid var(--edge2);background:none;color:var(--sub);font:700 13px var(--sans);cursor:pointer;transition:color .25s,background .25s}
.aa-btn:hover{color:var(--ink);background:rgba(255,248,235,.09)}
.aa-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.aa-btn .aa{display:grid;place-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,248,235,.09);font:400 15px var(--serif);color:var(--ink)}
.top .aa-btn+.btn{margin-left:8px}
@media (max-width:980px){.top .aa-btn{order:2;margin-left:auto}}
@media (max-width:640px){.aa-btn{padding:0 6px}.aa-btn .lbl{display:none}}
/* Reduce movement */
:root.still *,:root.still *::before,:root.still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
/* Light themes: the product sites' glass and status colours, darker for contrast on cream and mist */
:root[data-theme=cream]{--glass:rgba(255,250,240,.8);--ok:#2f7d45;--ai:#4c7a64}
:root[data-theme=mist]{--glass:rgba(250,252,253,.82);--ok:#2f7d45;--ai:#4c7a64}
:is(:root[data-theme=cream],:root[data-theme=mist]) kbd{background:var(--raised)}
/* App windows and videos stay dark in every theme: they show the apps as they are */
:is(:root[data-theme=cream],:root[data-theme=mist]) :is(.hero-demo .page,.try-device,.shot){--bg:#120f0c;--bg2:#1a1612;--ink:#f5eee0;--head:#f5eee0;--sub:#c9bfae;--muted:#8f8676;--edge:rgba(245,238,224,.10);--edge2:rgba(245,238,224,.18);--glass:rgba(38,32,26,.72);--ok:#7cd38f;--ai:#8fb7a3;--raised:#2a2621;color:var(--ink)}
:is(:root[data-theme=cream],:root[data-theme=mist]) :is(.proof li,.jobs button:not([aria-selected=true])){background:var(--glass)}
:is(:root[data-theme=cream],:root[data-theme=mist]) .proof li.ai-item{background:linear-gradient(160deg,color-mix(in srgb,var(--ai) 16%,transparent),var(--glass))}
/* Phones: Display moves into the menu so the header stays on one line */
.aa-nav{display:none}
@media (max-width:520px){
  .top .aa-btn{display:none}
  .aa-nav{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
  .aa-nav .aa{display:grid;place-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,248,235,.09);font:400 15px var(--serif)}
}