/*
 * Seventy-Five Studio · front: hover effects for edited elements and the color panel.
 * The panel keeps its own fixed colors so it stays readable whatever palette is chosen.
 * © 2026 Mousa Batarseh. All rights reserved.
 */

/* Hover effects set in the Studio. Individual transform properties, so the theme's own transforms are kept. */
[data-sf2s-hover] { transition: translate 260ms cubic-bezier(.16,1,.3,1), scale 260ms cubic-bezier(.16,1,.3,1), rotate 260ms cubic-bezier(.16,1,.3,1), opacity 200ms ease, filter 260ms ease; }
[data-sf2s-hover="lift"]:hover { translate: 0 -6px; }
[data-sf2s-hover="grow"]:hover { scale: 1.04; }
[data-sf2s-hover="shrink"]:hover { scale: .97; }
[data-sf2s-hover="dim"]:hover { opacity: .72; }
[data-sf2s-hover="tilt"]:hover { rotate: -1.5deg; }
[data-sf2s-hover="glow"]:hover { filter: brightness(1.08) saturate(1.15); }
@media (prefers-reduced-motion: reduce) {
	[data-sf2s-hover] { transition: none; }
	[data-sf2s-hover]:hover { translate: none; scale: none; rotate: none; }
}

/* Added blocks start from the theme's own spacing. */
[data-sf2s-block] img { max-width: 100%; height: auto; }
.sf2s-sec { padding-block: clamp(56px, 7vw, 112px); }
.sf2s-stack > * + * { margin-top: 18px; }
.sf2s-split { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .sf2s-split { grid-template-columns: 1fr 1fr; } }
.sf2s-figure img { display: block; width: 100%; height: auto; }
.sf2s-figure figcaption { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.sf2s-quote { max-width: 34ch; font-family: var(--f-voice); font-size: var(--fs-36, 32px); line-height: 1.25; }
.sf2s-quote cite { display: block; margin-top: 14px; font-family: var(--f-ui); font-size: 15px; font-style: normal; color: var(--ink-2); }
.sf2s-spacer { height: 64px; }
.sf2s-video { width: 100%; height: auto; display: block; background: var(--paper-2); border: 1px solid var(--rule); }
.sf2s-list { padding-left: 1.2em; display: grid; gap: 8px; font-size: var(--fs-20, 19px); line-height: 1.5; }
.sf2s-list li { list-style: disc; }

/* ------------------------------------------------------------------ color panel */

.sf2s-pal {
	--p-bg: #FFFFFF; --p-ink: #16181D; --p-ink-2: #555A63; --p-rule: #D5D2CB; --p-acc: #FFD23F; --p-low: #B3261E;
	position: fixed; z-index: 2147483000; bottom: 20px; right: 20px;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.4; color: var(--p-ink);
	display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.sf2s-pal[data-side="left"] { right: auto; left: 20px; align-items: flex-start; }
.sf2s-pal *, .sf2s-pal *::before, .sf2s-pal *::after { box-sizing: border-box; }

.sf2s-pal__fab {
	display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 12px;
	background: var(--p-bg); color: var(--p-ink); border: 1px solid var(--p-ink); border-radius: 999px;
	font: inherit; font-weight: 600; cursor: pointer;
	transition: translate 220ms cubic-bezier(.16,1,.3,1), background-color 160ms ease;
}
.sf2s-pal__fab:hover { translate: 0 -2px; background: #F4F2EC; }
.sf2s-pal__fab:focus-visible, .sf2s-pal button:focus-visible, .sf2s-pal input:focus-visible, .sf2s-pal summary:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 2px; }
.sf2s-pal__dots { display: inline-flex; }
.sf2s-pal__dots i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--p-ink); margin-left: -6px; }
.sf2s-pal__dots i:first-child { margin-left: 0; }

.sf2s-pal__sheet {
	order: -1; width: min(380px, calc(100vw - 32px)); max-height: min(78vh, 720px); overflow: auto; overscroll-behavior: contain;
	background: var(--p-bg); border: 1px solid var(--p-ink); border-radius: 14px; padding: 18px;
	animation: sf2s-pal-in 240ms cubic-bezier(.16,1,.3,1);
}
.sf2s-pal__sheet[hidden] { display: none; }
@keyframes sf2s-pal-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sf2s-pal__sheet { animation: none; } .sf2s-pal__fab { transition: none; } }

.sf2s-pal__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf2s-pal__title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sf2s-pal__x { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 1px solid var(--p-rule); border-radius: 50%; cursor: pointer; color: var(--p-ink); }
.sf2s-pal__x svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
.sf2s-pal__note { margin: 6px 0 14px; color: var(--p-ink-2); font-size: 13px; }

.sf2s-pal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf2s-pal__preset {
	display: grid; gap: 8px; padding: 10px; text-align: left; cursor: pointer;
	background: var(--p-bg); color: var(--p-ink); border: 1px solid var(--p-rule); border-radius: 10px; font: inherit;
	transition: border-color 140ms ease, translate 200ms cubic-bezier(.16,1,.3,1);
}
.sf2s-pal__preset:hover { border-color: var(--p-ink); translate: 0 -1px; }
.sf2s-pal__preset[aria-pressed="true"] { border: 2px solid var(--p-ink); padding: 9px; }
.sf2s-pal__preset[aria-pressed="true"] .sf2s-pal__name::after { content: " · On"; color: var(--p-ink-2); font-weight: 500; }
.sf2s-pal__sw { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--p-rule); }
.sf2s-pal__sw i { flex: 1; }
.sf2s-pal__name { font-size: 13px; font-weight: 600; }

.sf2s-pal__more { margin-top: 14px; border: 1px solid var(--p-rule); border-radius: 10px; }
.sf2s-pal__more summary { padding: 12px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.sf2s-pal__more summary::-webkit-details-marker { display: none; }
.sf2s-pal__more summary::after { content: "+"; font-weight: 400; }
.sf2s-pal__more[open] summary::after { content: "−"; }
.sf2s-pal__rows { display: grid; gap: 6px; padding: 0 12px 12px; }
.sf2s-pal__row { display: grid; grid-template-columns: 1fr 40px 84px; gap: 8px; align-items: center; }
.sf2s-pal__row label { font-size: 13px; }
.sf2s-pal__row.is-minor label { color: var(--p-ink-2); }
.sf2s-pal__row input[type=color] { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--p-rule); border-radius: 6px; background: var(--p-bg); cursor: pointer; }

.sf2s-in { height: 36px; padding: 0 10px; border: 1px solid var(--p-rule); border-radius: 8px; font: inherit; font-size: 13px; color: var(--p-ink); background: var(--p-bg); min-width: 0; }
.sf2s-in--hex { height: 32px; font-variant-numeric: tabular-nums; text-transform: uppercase; }

.sf2s-pal__checks { display: grid; gap: 4px; margin-top: 14px; }
.sf2s-pal__check { margin: 0; display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.sf2s-pal__ratio { font-variant-numeric: tabular-nums; color: var(--p-ink-2); }
.sf2s-pal__check.is-low .sf2s-pal__ratio { color: var(--p-low); font-weight: 600; }

.sf2s-pal__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sf2s-pal__acts--name .sf2s-in { flex: 1; }
.sf2s-btn {
	min-height: 40px; padding: 0 14px; border: 1px solid var(--p-ink); border-radius: 999px; background: var(--p-bg); color: var(--p-ink);
	font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
.sf2s-btn:hover { background: #F4F2EC; }
.sf2s-btn--primary { background: var(--p-acc); }
.sf2s-btn--primary:hover { background: #F5C626; }
.sf2s-btn:disabled { opacity: .55; cursor: progress; }
.sf2s-pal__status { margin: 10px 0 0; min-height: 1.4em; font-size: 12.5px; color: var(--p-ink-2); }

@media (max-width: 767px) {
	.sf2s-pal { bottom: 12px; right: 12px; }
	.sf2s-pal[data-side="left"] { left: 12px; }
	.sf2s-pal__fab { min-height: 44px; }
}
@media print { .sf2s-pal { display: none; } }

/* ------------------------------------------------------------------ bars
 * The theme fills its rulers, score bars and pipeline line with the text color. These tokens give the
 * bars colors of their own (Studio → Colors → Bars). Left unset, each one is the color the theme uses,
 * so nothing changes until a bar color is chosen. --sf2s-ink-root keeps the site's text color for the
 * headings when the body text gets its own color (Studio → Text). */

html {
	--sf2s-ink-root: var(--ink);
	--sf2s-bar: var(--ink);
	--sf2s-bar-hold: var(--ink-2);
	--sf2s-bar-before: var(--rule-2);
	--sf2s-key-before: var(--rule);
	--sf2s-bar-track: var(--paper-2);
	--sf2s-progress: var(--tag);
}
html .ruler__fill,
html .bar--draft > span,
html .pipe__fill,
html .pipe__stop.is-past .pipe__dot,
html .key--draft { background: var(--sf2s-bar); }
html .ruler.is-held .ruler__fill,
html .ruler.is-none .ruler__fill { background: var(--sf2s-bar-hold); }
html .bar--before > span { background: var(--sf2s-bar-before); }
html .key--before { background: var(--sf2s-key-before); }
html .bar { background: var(--sf2s-bar-track); }
html .progress__fill { background: var(--sf2s-progress); }

/* ------------------------------------------------------------------ visitor themes
 * Default is the site as its owner set it: the theme plus the site colors and text colors saved in the
 * Studio (no attribute on <html>). Light and Dark are fixed sets that replace the color tokens, so they
 * read well whatever the owner chose. Dark also needs a few fixes where the theme puts ink-colored text
 * on the yellow tag, because ink turns light in dark mode: those labels keep a dark "on accent" color. */

html { --sf2s-on-tag: var(--ink); }

html[data-sf2s-theme="light"]:root {
	--paper: #FFFFFF; --paper-2: #F2F3F5; --white: #FFFFFF; --ink: #16181D; --ink-2: #4B4F58;
	--rule: #D3D7DE; --rule-2: #8E95A1; --tag: #FFD23F; --tag-tint: #FFF4C2;
	--pass: #1E7A4C; --fail: #C23A2B; --hold: #8A5A00; --fail-tint: #F7DCD7; --hold-tint: #F4E8CF;
}

/* The fixed themes use their own bar colors too. */
html[data-sf2s-theme]:root {
	--sf2s-bar: var(--ink); --sf2s-bar-hold: var(--ink-2); --sf2s-bar-before: var(--rule-2);
	--sf2s-key-before: var(--rule); --sf2s-bar-track: var(--paper-2); --sf2s-progress: var(--tag);
}

html[data-sf2s-theme="dark"]:root {
	color-scheme: dark;
	--paper: #121418; --paper-2: #1A1D23; --white: #20242B; --ink: #F1EEE7; --ink-2: #B4AFA5;
	--rule: #343941; --rule-2: #565D68; --tag: #FFD23F; --tag-tint: #3A331C;
	--pass: #4CC38A; --fail: #FF8A7A; --hold: #E6B450; --fail-tint: #3A1F1C; --hold-tint: #352A15;
	--sf2s-on-tag: #16181D;
}
html[data-sf2s-theme="dark"] .btn--primary,
html[data-sf2s-theme="dark"] .btn--primary:hover,
html[data-sf2s-theme="dark"] .ruler__tag,
html[data-sf2s-theme="dark"] .limit-tag,
html[data-sf2s-theme="dark"] .fit--shown-here,
html[data-sf2s-theme="dark"] .fx__btn:hover,
html[data-sf2s-theme="dark"] .fx[open] .fx__btn,
html[data-sf2s-theme="dark"] .copybtn:hover,
html[data-sf2s-theme="dark"] .nf__tag,
html[data-sf2s-theme="dark"] .chain__me,
html[data-sf2s-theme="dark"] .pin,
html[data-sf2s-theme="dark"] .art__pt--home,
html[data-sf2s-theme="dark"] .pipe__tag,
html[data-sf2s-theme="dark"] .st--pass,
html[data-sf2s-theme="dark"] .band--high { color: var(--sf2s-on-tag); }
html[data-sf2s-theme="dark"] .btn--primary:hover { background: #FFE38A; }
html[data-sf2s-theme="dark"] ::selection { color: var(--sf2s-on-tag); }
html[data-sf2s-theme="dark"] .cut .chip--ghost.is-gone { color: var(--ink-2); }
html[data-sf2s-theme="dark"] .film__frame,
html[data-sf2s-theme="dark"] .film__video { background: #000000; }
html[data-sf2s-theme="dark"] .index-panel__scrim { background: rgba(0, 0, 0, .6); }
html[data-sf2s-theme="dark"] .about__portrait img { filter: brightness(.94); }

@media (prefers-reduced-motion: no-preference) {
	html.sf2s-theme-switching, html.sf2s-theme-switching body, html.sf2s-theme-switching body * {
		transition: background-color 360ms ease, color 360ms ease, border-color 360ms ease, fill 360ms ease, stroke 360ms ease !important;
	}
}

/* theme switch in the panel */
.sf2s-pal__themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 14px; }
.sf2s-pal__theme {
	display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; cursor: pointer;
	background: var(--p-bg); color: var(--p-ink); border: 1px solid var(--p-rule); border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 600;
}
.sf2s-pal__theme:hover { border-color: var(--p-ink); }
.sf2s-pal__theme[aria-checked="true"] { border: 2px solid var(--p-ink); padding: 9px 3px 7px; }
.sf2s-pal__chip { width: 36px; height: 24px; border-radius: 6px; border: 1px solid var(--p-ink); position: relative; overflow: hidden; }
.sf2s-pal__chip::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; border-radius: 50%; }
/* Each chip: page color, alternate-section color, accent dot. Default shows the site's own three. */
.sf2s-pal__chip--light { background: linear-gradient(90deg, #FFFFFF 56%, #E4E7EC 56%); } .sf2s-pal__chip--light::after { background: #FFD23F; }
.sf2s-pal__chip--default { background: linear-gradient(90deg, var(--c-paper, #F6F3EC) 56%, var(--c-paper2, #ECE7DC) 56%); } .sf2s-pal__chip--default::after { background: var(--c-tag, #FFD23F); }
.sf2s-pal__chip--dark { background: linear-gradient(90deg, #121418 56%, #2C313A 56%); } .sf2s-pal__chip--dark::after { background: #FFD23F; }

/* Visitors get the three themes and nothing else: a small sheet. */
.sf2s-pal--mini .sf2s-pal__sheet { width: min(300px, calc(100vw - 32px)); padding: 14px; }
.sf2s-pal--mini .sf2s-pal__themes { margin: 12px 0 0; }
.sf2s-pal--mini .sf2s-pal__theme { min-height: 68px; }
.sf2s-pal--mini .sf2s-pal__status { margin-top: 8px; }
.sf2s-pal__sub { margin: 4px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--p-ink-2); }
.sf2s-pal__label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--p-ink-2); }
html[data-sf2s-theme="dark"] .sf2s-pal__fab { border-color: #F1EEE7; }

/* Video links (YouTube, Vimeo) added in the Studio */
.sf2s-embed { margin: 0; width: 100%; }
.sf2s-embed__box { position: relative; aspect-ratio: 16 / 9; background: #000000; border: 1px solid var(--rule); }
.sf2s-embed__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }