/* owner: THEME (theme pass 2026-10-19) | the look switch (js/themeswitch.js): Light | Evening | Auto, and the style picker.
   Plain stylesheet: classes and tokens only (strict CSP). Touch targets are at least 44 px. Pink and purple, never yellow. */
.kw-look{display:inline-flex;align-items:center;flex:none;color:var(--kw-ink-2)}
.kw-look__seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--kw-r-pill);border:1px solid var(--kw-line-2);background:var(--kw-chrome-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kw-look__opt{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 12px;border:0;border-radius:var(--kw-r-pill);background:transparent;color:var(--kw-ink-2);font:600 14px/1 var(--kw-font-ui);cursor:pointer;transition:background var(--kw-t-fast) var(--kw-ease),color var(--kw-t-fast) var(--kw-ease)}
.kw-look__opt:hover{background:rgb(var(--kw-accent-rgb,224 88 159) / .12);color:var(--kw-ink)}
.kw-look__opt[aria-checked="true"]{background:var(--kw-foil);color:var(--kw-on-accent);cursor:default}
.kw-look__icon{flex:none;width:20px;height:20px}
.kw-look__txt{white-space:nowrap}
.kw-look__cycle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--kw-line-2);background:var(--kw-chrome-bg);color:var(--kw-t-accent);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kw-look__cycle:hover{background:rgb(var(--kw-accent-rgb,224 88 159) / .14);color:var(--kw-ink)}
.kw-look__cycle-icon{display:grid;place-items:center}
/* the round button for phones and for the cramped division header; the three-way switch for everything wider */
.kw-look--cycle .kw-look__cycle{display:inline-flex}
.kw-look--auto .kw-look__cycle{display:inline-flex}
.kw-look--auto .kw-look__seg{display:none}
@media (min-width:900px){
  .kw-look--auto .kw-look__seg{display:inline-flex}
  .kw-look--auto .kw-look__cycle{display:none}
}
/* on the sign-in and landing screens it floats in the top right corner, under the MOCK ribbon */
.kw-look--float{position:fixed;top:calc(env(safe-area-inset-top,0px) + 34px);right:max(12px,env(safe-area-inset-right,0px));z-index:calc(var(--kw-z-saver) + 10)}
@media (max-width:520px){ .kw-look--float .kw-look__txt{display:none} .kw-look--float .kw-look__opt{padding:0 10px} }
/* on a phone the sign-in screen's switch sits in the flow above the card (top right), so it can never cover the card */
@media (max-width:520px){ .kw-gate .kw-look--float{position:static;align-self:flex-end;margin:26px 0 0} }
/* the global floating switch (landing world) steps aside once the sign-in card or the app brings its own.
   While the screensaver is up (the landing, the idle screen and the Sit Down screen) the switch lives IN its top row, after Sound and Full screen
   (js/boot.js, "screensaver:start"), so it can never cover either button; the floating one only shows in the moment before that row exists. */
html[data-gate="on"] .kw-look--global,html[data-app] .kw-look--global,html[data-saver="on"] .kw-look--global{display:none}
.kw-ss__tools{align-items:center;flex-wrap:wrap;justify-content:flex-end}
.kw-look--saver{flex:none}
.kw-look--saver .kw-look__cycle{background:var(--kw-panel-bg)}
/* the division page header: a quiet round button */
.kw-div__look{flex:none}
.kw-div__look .kw-look__cycle{width:44px;height:44px;border-color:transparent;background:transparent}
.kw-div__look .kw-look__cycle:hover{border-color:var(--kw-line-2)}

/* style picker */
.kw-skinpick{display:block}
.kw-skins{display:flex;flex-wrap:wrap;gap:8px}
.kw-skin{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:8px 14px 8px 8px;border-radius:var(--kw-r-m);border:1px solid var(--kw-line-2);background:var(--kw-bg-3);color:var(--kw-ink);font:600 14px/1.2 var(--kw-font-ui);text-align:left;cursor:pointer}
.kw-skin:hover{border-color:var(--kw-accent)}
.kw-skin[aria-checked="true"]{border-color:var(--kw-accent);box-shadow:var(--kw-glow-accent);cursor:default}
.kw-skin__emblem{width:40px;height:40px;border-radius:10px;flex:none;background:var(--kw-bg-2)}
@media (prefers-reduced-motion:reduce){ .kw-look__opt{transition:none} }
:root[data-motion="calm"] .kw-look__opt{transition:none}
/* Windows high-contrast and similar: the chosen look is shown by an outline, because the fills are replaced by system colours */
@media (forced-colors:active){ .kw-look__opt[aria-checked="true"]{outline:2px solid Highlight;outline-offset:-2px} .kw-skin[aria-checked="true"]{outline:2px solid Highlight} }