/*
 * face.css — WITH A FLY: the chrome recedes. [ours] 9 Oct 2026.
 *
 * Copyright (C) 2026 CRAITR (https://craitr.no) (see ../NOTICE.html).
 * This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public
 * License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later
 * version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the
 * implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See ../LICENSES/GPL-3.0.html
 * SPDX-License-Identifier: GPL-3.0-or-later
 *
 * Restyles (does not replace) Jellyfin's OSD, sheets and dialogs from css/player.css: the same markup, behaviour, keys
 * and timings (show on movement, hide 3 s after it), drawn as little as possible: hairline sliders, white icons at 80 %,
 * no blue, a faint shade only where the controls are, glass sheets. Loaded after player.css, so these rules win.
 */

:root { --accent: #a6dcff; --chrome: rgba(255, 255, 255, 0.82); --chrome-dim: rgba(255, 255, 255, 0.5); }
html { background-color: #000; }

/* ---------------------------------------------------------------- the top bar: the film's name, small, and the back arrow */
.skinHeader-withBackground.osdHeader { background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 100%); height: 6em; color: var(--chrome); }
.osdHeader .osdTitleTop { font-family: var(--cin-display); text-transform: uppercase; font-size: calc(1.15rem * var(--cin-display-scale)); letter-spacing: 0.2em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.9; padding-left: 0.4em; }
.osdHeader .MuiIconButton-root:hover { background-color: rgba(255, 255, 255, 0.1); }

/* ---------------------------------------------------------------- the bottom controls */
.videoOsdBottom { background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0) 100%); padding-top: 5.5em; color: var(--chrome);
  font-family: var(--cin-read); font-weight: 300; }
.videoOsdBottom .osdTextContainer { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; font-size: 0.92em; color: var(--chrome); }
.videoOsdBottom .endsAtText { color: var(--chrome-dim); }
.videoOsdBottom .paper-icon-button-light { color: var(--chrome); }
@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) { color: #fff; background-color: rgba(255, 255, 255, 0.1); }
}
.paper-icon-button-light:active:not(:disabled) { color: #fff; background-color: rgba(255, 255, 255, 0.16); }
.btnPip.cinemaActive { color: var(--accent) !important; }

/* hairline sliders, a small white thumb, white chapter ticks */
.mdl-slider { color: #fff; }
.mdl-slider::-webkit-slider-thumb { background: #fff; width: 0.8em; height: 0.8em; box-shadow: 0 0 0.6em rgba(0, 0, 0, 0.4); }
.mdl-slider::-moz-range-thumb { background: #fff; width: 0.8em; height: 0.8em; }
.mdl-slider-background-flex { background: rgba(255, 255, 255, 0.2); height: 0.13em; margin-top: -0.065em; }
.mdl-slider-background-lower { background-color: #fff; }
.mdl-slider-background-upper { background: rgba(255, 255, 255, 0.34); }
.sliderMarker { width: 1px; height: 9px; }
.sliderMarker.unwatched { background-color: rgba(255, 255, 255, 0.45); }
.sliderMarker.watched { background-color: rgba(0, 0, 0, 0.55); }
.sliderBubble { background: rgba(10, 10, 12, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--cin-read); }
.chapterThumbText { font-family: var(--cin-read); font-weight: 300; }
.chapterThumbText-dim { font-size: 0.85em; letter-spacing: 0.06em; }

/* ---------------------------------------------------------------- sheets and dialogs: glass */
.dialog { background-color: rgba(10, 10, 12, 0.74); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 2vh 6vh rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.86); font-family: var(--cin-read); font-weight: 300; }
.dialogBackdropOpened { opacity: 0.42; }
.actionSheetTitle { font-family: var(--cin-display); text-transform: uppercase; font-size: calc(1.05em * var(--cin-display-scale)); letter-spacing: 0.22em; }
.actionSheetMenuItem { font-family: var(--cin-read); font-weight: 300; letter-spacing: 0.02em; }
.actionSheet[data-multiselect="true"] .actionSheetItemText { font-family: var(--cin-read); letter-spacing: 0.12em; }
.actionsheetMenuItemIcon { color: var(--accent); }
.listItem:hover { background-color: rgba(255, 255, 255, 0.07); }
.listItem:focus { background-color: rgba(255, 255, 255, 0.11); }
.formDialogHeaderTitle { font-family: var(--cin-display); text-transform: uppercase; font-weight: 400; letter-spacing: 0.16em; font-size: calc(1.5em * var(--cin-display-scale)); line-height: 1.35; }
.formDialogContent { font-family: var(--cin-read); font-weight: 300; line-height: 1.55; }
.formDialogContent b { font-weight: 500; color: #fff; }
.formDialogContent h3 { font-family: var(--cin-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: calc(0.82em * var(--cin-display-scale)); margin: 1.4em 0 0.4em; color: #fff; }
.raised { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); font-family: var(--cin-read); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
.raised:hover { background: rgba(255, 255, 255, 0.12); }
.raised:focus { background: rgba(255, 255, 255, 0.16); }
.button-submit, .button-submit:focus { background: #fff; color: #000; box-shadow: none; }
.button-submit:hover { background: var(--accent); color: #000; }
#startDialog .dialogContentInner, #startDialog .formDialogFooter { font-size: 130%; }
#startDialog .formDialogHeaderTitle { font-size: calc(2.1em * var(--cin-display-scale)); }

/* ---------------------------------------------------------------- the fly's door: the same thin top bar */
.flyDoor .skinHeader-withBackground.osdHeader { background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); }
.flyDoor .osdHeader .MuiTypography-root { font-family: var(--cin-display); text-transform: uppercase; letter-spacing: 0.24em; font-size: calc(0.86rem * var(--cin-display-scale)); }