/* The dark look of the website and the kiosk page (owner, 2026-11-10: OUTWORQ chooses light or dark in
   Admin → Settings → Look). It is the same page as the light one, with every fix from the 2026-11-09 call, only
   recolored: the edge adds class "theme-dark" to <html> and swaps each *-light.webp photo for its *-dark.webp twin.
   Every rule here starts with html.theme-dark, so this file changes nothing on the light pages. */
html.theme-dark{
  --bone:#0F0E0D; --bone-2:#161513; --paper:#1C1B18;
  --ink:#F1ECE3; --ink-2:#C9C3B5; --grey:#948F84; --line:#2D2B27; --line2:#3B3833;
  --orange:#E8702A; --orange-ink:#F2A06A;
  --deep:#080807;
  color-scheme:dark;
}
html.theme-dark body{background:var(--bone);color:var(--ink)}

/* Blocks that are dark on the light page stay dark (deeper than the page), with light text. */
html.theme-dark .announce,html.theme-dark .ann,html.theme-dark .foot,html.theme-dark .callout,html.theme-dark .calc__out,
html.theme-dark .b--ink,html.theme-dark .card:last-child,html.theme-dark .drawer,html.theme-dark .skip{background:var(--deep);color:var(--ink);border-color:var(--line)}
html.theme-dark .ann b,html.theme-dark .foot__mark .logo,html.theme-dark .foot__base a:hover{color:var(--ink)}
html.theme-dark .ann{color:#bdb7ab;border-bottom:1px solid var(--line)}
html.theme-dark .announce a:hover,html.theme-dark .ann a:hover{color:#fff}
html.theme-dark .drawer .close{border-color:var(--ink);color:var(--ink)}
html.theme-dark .drawer a{border-bottom-color:var(--line)}
html.theme-dark .cf input,html.theme-dark .cf select,html.theme-dark .cf textarea{background:var(--paper);border-color:var(--line2);color:var(--ink)}
html.theme-dark .cf .btn--orange:hover{background:var(--ink);border-color:var(--ink);color:var(--deep)}

/* Inverted buttons and hovers: light on dark becomes dark text on light. */
html.theme-dark .btn--ink,html.theme-dark .btn.ink,html.theme-dark .pk[aria-pressed="true"],html.theme-dark .chip[aria-pressed="true"]{background:var(--ink);color:var(--deep);border-color:var(--ink)}
html.theme-dark .btn--orange:hover{background:var(--ink);border-color:var(--ink);color:var(--deep)}
html.theme-dark .btn--ghost:hover,html.theme-dark .btn:hover,html.theme-dark .sgrid a:hover,html.theme-dark .sbtns a:hover{color:var(--deep)}
html.theme-dark .btn.pri:hover{color:#fff}
html.theme-dark .s:hover{color:var(--deep)}

/* Surfaces that were plain white or cream. */
html.theme-dark .nav{background:rgba(15,14,13,.86)}
html.theme-dark .card:nth-child(odd),html.theme-dark .cl{background:var(--paper)}
html.theme-dark .k__img,html.theme-dark .b--img,html.theme-dark .reveal__frame{background:var(--bone-2)}
html.theme-dark .stats{background:rgba(28,27,24,.86)}
html.theme-dark .hero::before{background:linear-gradient(180deg,var(--bone-2) 0%,var(--bone-2) 38%,rgba(22,21,19,.55) 60%,rgba(22,21,19,0) 78%,rgba(22,21,19,.9) 100%)}
@media (max-width:1100px){html.theme-dark .hero::before{background:linear-gradient(180deg,var(--bone-2) 0%,var(--bone-2) 50%,rgba(22,21,19,0) 64%,rgba(22,21,19,.9) 100%)}}
html.theme-dark .adscreen-frame{background:var(--deep);border-color:var(--line2);box-shadow:0 30px 60px -36px rgba(0,0,0,.8),0 0 0 6px var(--paper),0 0 0 7px var(--line)}
html.theme-dark .dd__menu{box-shadow:0 18px 40px rgba(0,0,0,.5)}
html.theme-dark .cl:hover{box-shadow:0 24px 40px -24px rgba(0,0,0,.8)}
html.theme-dark .tabs{background:var(--paper)}
html.theme-dark .search form{background:var(--paper)}
html.theme-dark .search form:focus-within{box-shadow:0 0 0 4px rgba(241,236,227,.08)}
html.theme-dark img[src$=".svg"]{filter:none}