/* Study light × aspetto × tema. Loaded last.
   1) Controls that hard-coded the default gold follow the skin/theme tokens.
   2) Giorno rules written for cream panes are re-aimed at the (always dark) skin panes.
   3) Each light reshapes the page, not only the paper (token shifts live in flyleaf-look.js). */

/* —— 1. Sync with aspetto / tema —— */
html[data-look] {
  --stack-glass: color-mix(in srgb, var(--gold) 11%, transparent);
  --stack-glass-line: color-mix(in srgb, var(--gold) 32%, transparent);
}
html[data-look] .stage {
  border-color: color-mix(in srgb, var(--gold) 22%, transparent);
}
html[data-look] .modepick {
  border-color: color-mix(in srgb, var(--gold) 22%, transparent);
}
html[data-look] .mob-quick .mob-quick-paste,
html[data-look] .modepick .chip.on,
html[data-look] .stage .chip.on,
html[data-look] .stage .tone button.on,
html[data-look] #voce .listen-play,
html[data-look] #cookieBar #cookieOk,
html[data-look] #a2hsBar #a2hsAdd {
  background: var(--th-btn, linear-gradient(165deg, var(--btn), color-mix(in srgb, var(--btn) 80%, #000)));
  color: var(--th-btn-ink, #1a1610);
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
}
html[data-look] .mob-quick button:active {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
}
html[data-look] .keptcard.on {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 32%, transparent);
}
html[data-look] .sheet .handle {
  background: color-mix(in srgb, var(--gold) 45%, transparent);
}
html[data-look] .toast:not([data-kind="drop"]) {
  background: var(--card);
  color: var(--card-ink);
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
}
html[data-look] article.pane:has(#sourcePage):focus-within {
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--gold) 32%, transparent),
    0 0 16px color-mix(in srgb, var(--gold) 18%, transparent);
}
html[data-look] .fid {
  background: color-mix(in srgb, var(--pane) 70%, var(--paper));
  color: var(--card-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 14%, transparent);
}
html[data-look] #voce .listen-progress .bar i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, #000), var(--gold));
}

/* Espandi (Libro / Studio / Ascolta): same palette as the aspetto + tema, not the fixed forest plate.
   #voce .listen-read .expand-shell is (1,2,0) in flyleaf-listen.css — beat it when expanded. */
html[data-look] .expand-shell.is-expanded,
html[data-look] #voce .listen-read .expand-shell.is-expanded,
html[data-look] #listenPop .listen-read .expand-shell.is-expanded {
  border: 1px solid var(--th-edge, color-mix(in srgb, var(--gold) 26%, transparent));
  background:
    radial-gradient(ellipse 70% 40% at 12% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, var(--paper)), color-mix(in srgb, var(--card) 70%, var(--paper)));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 12%, transparent),
    0 14px 36px rgba(0, 0, 0, 0.42);
}
html[data-look] .expand-shell.is-expanded .page,
html[data-look] .expand-shell.is-expanded .voce-body,
html[data-look] .expand-shell.is-expanded #result,
html[data-look] .expand-shell.is-expanded #sourcePage {
  color: var(--card-ink);
}
html[data-look] #voce .listen-read .expand-shell:not(.is-expanded),
html[data-look] #listenPop .listen-read .expand-shell:not(.is-expanded) {
  background: color-mix(in srgb, var(--paper) 28%, var(--pane));
  border-color: color-mix(in srgb, var(--card-ink) 10%, transparent);
}
html[data-look] .expand-shell.is-expanded .expand-disk,
html[data-look] .expand-disk[aria-expanded="true"],
html[data-look] #voce .expand-shell.is-expanded .expand-disk {
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  color: var(--card-ink);
}
html[data-theme="pixel"] .expand-shell.is-expanded,
html[data-theme="pixel"] #voce .listen-read .expand-shell.is-expanded { border-radius: 2px; }
html[data-theme="acquerello"] .expand-shell.is-expanded,
html[data-theme="acquerello"] #voce .listen-read .expand-shell.is-expanded { border-radius: 22px; }
html[data-theme="neon"] .expand-shell.is-expanded,
html[data-theme="neon"] #voce .listen-read .expand-shell.is-expanded {
  box-shadow: 0 0 0 1px var(--th-edge), 0 0 26px -8px rgba(94, 240, 255, 0.5), 0 14px 36px rgba(0, 0, 0, 0.42);
}

/* Breathing room: circlet rings clear viewport edges (same 24px pad as the help ball),
   and the last controls clear the help ball / cookie bar without fading under the paper wash. */
html[data-look] .wrap {
  width: calc(100% - 48px);
  max-width: 430px;
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 880px) {
  html[data-look] .wrap {
    max-width: 1080px;
    width: calc(100% - 56px);
    padding-top: calc(28px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 1100px) {
  /* Desktop circ-inset reaches -42%; give rings a full clear of the side gutters */
  html[data-look] .wrap {
    width: calc(100% - 64px);
    padding-top: calc(32px + env(safe-area-inset-top, 0px));
  }
}
/* Soften the solid paper bands so the edge wash does not look like a hard cut */
html[data-look] body::after {
  background:
    linear-gradient(to bottom, var(--paper) 0%, transparent 120px),
    linear-gradient(to top, var(--paper) 0%, transparent 140px);
}
/* Status-bar strip stays solid so scrolled text never shows through the notch area */
html[data-look] body::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--paper);
  z-index: 40;
  pointer-events: none;
}

/* Cursor, caret and selection in the aspetto/tema colours (cursor images built by flyleaf-cursor.js) */
@media (pointer: fine) {
  html[data-look],
  html[data-look] body {
    cursor: var(--fl-cur-default, auto);
  }
  html[data-look] :is(a, button, [role="button"], [role="option"], label, select, summary, .keptcard, .kept-bar, .fid, .look-open-btn) {
    cursor: var(--fl-cur-pointer, pointer);
  }
  html[data-look] :is(textarea, input:not([type]), input[type="text"], input[type="email"], input[type="search"], [contenteditable="true"], #sourcePage, .page) {
    cursor: var(--fl-cur-text, text);
  }
  html[data-look] :is(button, [role="button"])[disabled] { cursor: not-allowed; }
  html[data-look] #hbHelpBtn.hb-dragging { cursor: grabbing; }
}
html[data-look] :is(textarea, input, [contenteditable="true"], #sourcePage) {
  caret-color: var(--gold);
}
html[data-look] ::selection {
  background: color-mix(in srgb, var(--gold) 38%, transparent);
  color: inherit;
}

/* No frame around the four study lights */
#lights.slab,
html[data-look] #lights.slab,
html[data-theme] #lights.slab {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0;
}

/* —— 2. Giorno on dark skin panes —— */
html[data-look][data-light="day"] .modepick .sub,
html[data-look][data-light="day"] .pane-h,
html[data-look][data-light="day"] .stage .label,
html[data-look][data-light="day"] .stage .modepick .sub {
  color: color-mix(in srgb, var(--card-ink) 78%, transparent);
}
html[data-look][data-light="day"] .modepick .now { color: var(--gold); }
html[data-look][data-light="day"] .stage .chip:not(.on),
html[data-look][data-light="day"] .stage .tone button:not(.on),
html[data-look][data-light="day"] .stage .ghost {
  background: color-mix(in srgb, var(--pane) 70%, transparent);
  color: var(--card-ink);
  border: 1px solid color-mix(in srgb, var(--card-ink) 30%, transparent);
}
html[data-look][data-light="day"] #copyAll,
html[data-look][data-light="day"] .copy-in-study,
html[data-look][data-light="day"] #voce #voceRewind {
  color: var(--card-ink);
  border-color: color-mix(in srgb, var(--card-ink) 30%, transparent);
}
html[data-look][data-light="day"] .toast[data-kind="drop"] {
  background: var(--card);
  color: var(--card-ink);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}
html[data-look][data-light="day"] #accountPop .leave-easy { color: var(--muted); }
html[data-look][data-light="day"] .expand-disk {
  background: rgba(14, 24, 18, 0.42);
  border-color: rgba(212, 203, 176, 0.42);
  color: #d4cbb0;
  box-shadow: 0 0 0 1px rgba(14, 24, 18, 0.25), inset 0 1px 0 rgba(212, 203, 176, 0.08);
}
html[data-look][data-light="day"] #cookieBar,
html[data-look][data-light="day"] #a2hsBar {
  background: var(--pane);
  color: var(--card-ink);
  border-color: color-mix(in srgb, var(--gold) 28%, transparent);
}

/* —— 3. Each light reshapes the look —— */
html[data-look] .forest {
  filter: var(--rar-filter,) var(--th-filter,) var(--lt-filter,);
}

/* Giorno: brighter scene, crisper edges for daylight and outdoors */
html[data-look][data-light="day"] .forest { --lt-filter: brightness(1.18) saturate(1.08); }
html[data-look][data-light="day"] .ghost,
html[data-look][data-light="day"] .slab button:not(.on),
html[data-look][data-light="day"] .sizes button:not(.on),
html[data-look][data-light="day"] .mob-quick button:not(.mob-quick-paste),
html[data-look][data-light="day"] .study-opts-toggle {
  border-color: color-mix(in srgb, var(--card-ink) 38%, transparent) !important;
  color: var(--card-ink);
}
html[data-look][data-light="day"] .pane,
html[data-look][data-light="day"] .kept-bar {
  outline: 1px solid color-mix(in srgb, var(--card-ink) 16%, transparent);
  outline-offset: -1px;
}
html[data-look][data-light="day"] .brand { color: #ffffff; }

/* Tarda notte: warm, low blue, softer decorations */
html[data-look][data-light="night"] .forest { --lt-filter: sepia(0.35) saturate(0.75) brightness(0.8); }
html[data-look][data-light="night"] .beam { opacity: 0.5; }
html[data-look][data-light="night"][data-theme] .forest::before { opacity: 0.6; }
html[data-look][data-light="night"][data-theme] .forest::after { opacity: calc(var(--th-tile-op, 0.6) * 0.55); }
html[data-look][data-light="night"] .brand { color: #f0dcc0; }
html[data-look][data-light="night"] .wrap > header .chrome-circlet--lang,
html[data-look][data-light="night"] .wrap > header .chrome-circlet--account,
html[data-look][data-light="night"] #hbHelpBtn.chrome-circlet {
  --circ-on: #f0dcc0;
  color: #f0dcc0;
}

html[data-look][data-light="night"][data-theme] .gold,
.look-stage[data-light-preview="night"][data-theme-preview]:not([data-theme-preview=""]) .look-stage-cta { filter: brightness(0.88) saturate(0.85); }
html[data-look][data-light="black"][data-theme] .gold,
.look-stage[data-light-preview="black"][data-theme-preview]:not([data-theme-preview=""]) .look-stage-cta { filter: brightness(0.8) saturate(0.8); }

/* Scuro: the skin as designed (no shift) */

/* Nero pieno: true black, quiet background — keep orbit specks and FX motion */
html[data-look][data-light="black"] .forest { --lt-filter: brightness(0.4) saturate(0.6); }
html[data-look][data-light="black"] .beam { display: none; }
html[data-look][data-light="black"][data-theme] .forest::before { opacity: 0.35; }
html[data-look][data-light="black"][data-theme] .forest::after {
  opacity: calc(var(--th-tile-op, 0.6) * 0.3);
  animation-play-state: paused;
}
html[data-look][data-light="black"] .pane,
html[data-look][data-light="black"] .kept-bar {
  outline: 1px solid color-mix(in srgb, var(--card-ink) 10%, transparent);
  outline-offset: -1px;
}

/* Preview in the Aspetto sheet follows the same light */
.look-stage[data-light-preview="night"]::before,
.look-stage[data-light-preview="night"] .look-stage-deco { filter: sepia(0.35) saturate(0.75) brightness(0.8); }
.look-stage[data-light-preview="night"] .look-stage-tile { opacity: calc(var(--th-tile-op, 0.6) * 0.55); }
.look-stage[data-light-preview="day"]::before,
.look-stage[data-light-preview="day"] .look-stage-deco { filter: brightness(1.18) saturate(1.08); }
.look-stage[data-light-preview="black"]::before,
.look-stage[data-light-preview="black"] .look-stage-deco { filter: brightness(0.4) saturate(0.6); }
.look-stage[data-light-preview="black"] .look-stage-tile { opacity: calc(var(--th-tile-op, 0.6) * 0.3); animation-play-state: paused; }
.look-stage[data-theme-preview="noir"][data-light-preview]::before,
.look-stage[data-theme-preview="noir"][data-light-preview] .look-stage-deco { filter: grayscale(1) contrast(1.15); }