/* =====================================================================
   Färglabbet – css/colourlab.css  (colourlabmenu.php + colourlab.php)
   Bygger på css/paintshop.css (.ps-app: tema, knappar, pipetter,
   nivåkort) – samma familj som Raketverkstaden. Här finns bara det som
   är Färglabbets eget: bägaren, färgnamnet och Mina färger.
   ===================================================================== */

.cl-bank { display: grid; gap: clamp(22px, 3vw, 44px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .cl-bank { grid-template-columns: minmax(0, 1fr) 240px; } }

.cl-uppgift { border: 1px solid var(--ps-line); background: var(--ps-panel); border-radius: 10px; padding: 14px 16px; margin: 0 0 22px; }
.cl-uppgift b { display: block; font-family: var(--ps-serif); font-weight: 400; font-size: 22px; margin-bottom: 4px; }
.cl-uppgift span { color: var(--ps-dim); font-size: 14px; line-height: 1.55; }

.ps-app .cl-pipetter { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 9px; }

/* Resultatet */
.cl-resultat { margin-top: 24px; border-top: 1px solid var(--ps-line); padding-top: 18px; }
.cl-namnrad { display: flex; align-items: center; gap: 14px; }
.cl-chip { width: 52px; height: 52px; flex: none; border-radius: 50%; border: 1px solid rgba(128,128,128,.35);
    background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(128,128,128,.12) 6px 12px);
    box-shadow: inset 0 -6px 12px rgba(0,0,0,.18), inset 0 6px 10px rgba(255,255,255,.18); transition: background-color .4s; }
.cl-fargnamn { font-family: var(--ps-serif); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; margin: 0; overflow-wrap: anywhere; }
.cl-hex { font-family: var(--ps-mono); font-size: 12px; color: var(--ps-dim); letter-spacing: .06em; margin: 6px 0 0; }
.cl-recept { font-family: var(--ps-mono); font-size: 12px; color: var(--ps-dim); line-height: 1.9; margin: 12px 0 0; }
.cl-recept b { color: var(--ps-text); font-weight: 500; }

/* Bägaren – glas som fungerar mot både ljus och mörk bakgrund */
.cl-glas { display: flex; flex-direction: column; align-items: center; }
.cl-jar { position: relative; width: 170px; height: 290px; border: 2px solid rgba(128,128,140,.55); border-top: none;
    border-radius: 4px 4px 28px 28px; overflow: hidden;
    background: linear-gradient(100deg, rgba(160,170,200,.14), rgba(160,170,200,.03) 45%); }
.cl-jar::after { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 9px; pointer-events: none;
    background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.05)); }
.cl-vatska { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #000; border-radius: 0 0 26px 26px;
    transition: height .45s cubic-bezier(.3,.9,.3,1), background-color .5s ease; }
.cl-vatska::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 10px; background: inherit; border-radius: 50%; filter: brightness(1.18); }
.cl-streck { position: absolute; right: 0; width: 14px; height: 1px; background: rgba(128,128,140,.7); }
.cl-strecktext { position: absolute; right: 19px; transform: translateY(-50%); font-family: var(--ps-mono); font-size: 9px; color: var(--ps-dim); }
.cl-fot { width: 196px; height: 6px; background: rgba(128,128,140,.35); border-radius: 0 0 4px 4px; }
.cl-status { font-family: var(--ps-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ps-dim); margin-top: 14px; min-height: 15px; text-align: center; }
.cl-status.full { color: var(--ps-las); }

.cl-droppe { position: fixed; width: 10px; height: 10px; border-radius: 50% 50% 60% 60%; pointer-events: none; z-index: 60;
    transition: transform .5s cubic-bezier(.55,0,.85,.35), opacity .12s .38s; }

/* Mina färger */
.cl-mina { margin-top: 24px; border-top: 1px solid var(--ps-line); padding-top: 16px; width: 100%; }
.cl-palett { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.cl-sparad { position: relative; }
.ps-app button.cl-sparad-f { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; cursor: pointer; padding: 0; background: var(--f);
    border: 1px solid rgba(128,128,128,.35); box-shadow: inset 0 -5px 10px rgba(0,0,0,.18); }
.ps-app button.cl-sparad-f:hover, .ps-app button.cl-sparad-f:focus-visible { outline: 2px solid var(--ps-guld); outline-offset: 2px; }
.ps-app button.cl-sparad-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border-radius: 50%; cursor: pointer;
    font-size: 11px; line-height: 1; border: 1px solid var(--ps-line); background: var(--ps-panel); color: var(--ps-dim); opacity: 0; transition: opacity .15s; }
.cl-sparad:hover .cl-sparad-x, .cl-sparad:focus-within .cl-sparad-x { opacity: 1; }
@media (hover: none) { .ps-app button.cl-sparad-x { opacity: .85; } }
.cl-meddelande { font-size: 13px; color: var(--ps-dim); min-height: 1.3em; margin: 8px 0 0; }

/* Menyn: pipettremsan på bänkkorten */
.cl-palettremsa { display: flex; gap: 5px; align-items: flex-end; height: 34px; }
.cl-palettremsa i { flex: 0 0 24px; height: 28px; border-radius: 2px 2px 9px 9px; border: 1px solid rgba(128,128,128,.3); }
.cl-vidare { margin-top: 24px; border-top: 1px solid var(--ps-line); padding-top: 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cl-vidare div { flex: 1; min-width: 220px; }
.cl-vidare h3 { font-family: var(--ps-serif); font-weight: 400; font-size: 22px; margin: 0 0 4px; }
.cl-vidare p { color: var(--ps-dim); font-size: 14px; line-height: 1.6; margin: 0; }

/* Ljust tema: style.css gör knappar i main grå – de sparade färgrutorna
   måste behålla sin färg (inline-bakgrunden vinner inte över den regeln). */
html[data-theme] .ps-app button.cl-sparad-f:not(.sc-start):not(.ks-tts-figur) { background: var(--f); border: 1px solid rgba(128,128,128,.35); }
html[data-theme] .ps-app button.cl-sparad-x:not(.sc-start):not(.ks-tts-figur) { background: var(--ps-panel); color: var(--ps-dim); border: 1px solid var(--ps-line); }

@media (prefers-reduced-motion: reduce) { .cl-vatska, .cl-droppe, .cl-chip { transition: none !important; } }