/* HH Color Lab shared stylesheet for the tool pages. Header, footer and ad spacing live in hh-site.css. */
/* ===== RESET & VARIABLES ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #121118;
    --bg-deep: #0b0a10;
    --panel: #1b1a24;
    --panel-2: #211f2b;
    --border: #302e3d;
    --border-soft: #26242f;
    --text: #f3f1ec;
    --text-dim: #a29fb0;
    --text-faint: #6f6c7d;
    --good: #5fd98a;
    --warn: #e8b34d;
    --bad: #f0685f;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --h: 60;
    --s: 100%;
    --l: 50%;
    --accent: hsl(var(--h) var(--s) var(--l));
    --accent-soft: hsl(var(--h) 60% 22%);
    --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
    --maxw: 1440px;
    --card-min-h: 420px;
    --card-gap: 16px;
}


.ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60vmax 60vmax at 12% -8%, hsl(var(--h) 65% 22% / 0.55), transparent 60%),
        radial-gradient(50vmax 50vmax at 108% 12%, hsl(calc(var(--h) + 40) 55% 18% / 0.45), transparent 55%),
        var(--bg-deep);
    transition: background 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
    .ambient {
        transition: none;
    }
}

.wrap {
    position: relative;
    z-index: 1;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(12px, 3vw, 32px) clamp(12px, 3vw, 32px) clamp(32px, 5vw, 64px);
}


/* ===== COPY TOAST (bottom corner) ===== */
.hh-toast {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 210px;
    max-width: min(360px, calc(100vw - 24px));
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 4px solid var(--good);
    border-radius: 14px;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.75);
    color: var(--text);
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.hh-toast.show { opacity: 1; transform: none; }
.hh-toast.error { border-left-color: var(--bad); }
.hh-toast-sw {
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.hh-toast-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hh-toast-text strong { font-size: 13px; font-weight: 600; }
.hh-toast-text code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    letter-spacing: .02em;
    color: var(--text);
    word-break: break-word;
}
.hh-toast.error .hh-toast-text code { font-family: inherit; font-size: 12.5px; color: var(--text-dim); letter-spacing: 0; }
@media (max-width: 560px) {
    .hh-toast { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}


/* ===== FULL-SCREEN IMAGE VIEWER ===== */
.iv { position: fixed; inset: 0; z-index: 10000; display: none; background: #08070c; }
.iv.open { display: block; }
.iv-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.iv-stage.panning { cursor: grabbing; }
.iv-img {
    position: absolute; left: 0; top: 0;
    max-width: none; max-height: none;
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: none;
    -webkit-user-drag: none;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
}
.iv-marker {
    position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; margin: -11px 0 0 -11px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px #000, inset 0 0 0 1.5px #000;
    pointer-events: none;
    display: none;
}
.iv-bar { position: absolute; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 14px; pointer-events: none; }
.iv-bar > * { pointer-events: auto; }
.iv-top { top: 0; padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: linear-gradient(rgba(8, 7, 12, 0.9), transparent); }
.iv-bottom { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); justify-content: center; flex-wrap: wrap; background: linear-gradient(transparent, rgba(8, 7, 12, 0.92)); }
.iv-title { color: var(--text-dim); font-size: 12.5px; margin-right: auto; line-height: 1.4; }
.iv-btn {
    background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px;
    min-width: 38px; height: 38px; padding: 0 12px;
    font: inherit; font-size: 15px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s ease, background .15s ease;
}
.iv-btn:hover:not(:disabled), .iv-btn:focus-visible { border-color: var(--accent); }
.iv-btn:disabled { opacity: .45; cursor: not-allowed; }
.iv-zoom-label { min-width: 52px; text-align: center; color: var(--text); font-size: 12.5px; font-family: 'JetBrains Mono', monospace; }
.iv-close { margin-left: 6px; font-size: 20px; background: #2a2833; }
.iv-pick, .iv-hover {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 8px 12px; color: var(--text);
}
.iv-sw { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; flex: 0 0 auto; }
.iv-sw.sm { width: 20px; height: 20px; border-radius: 6px; }
.iv-pick-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.iv-hex { background: none; border: 0; padding: 0; color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 15px; cursor: pointer; text-align: left; }
.iv-hex.empty { font-family: inherit; font-size: 13px; color: var(--text-dim); cursor: default; }
.iv-rgb { font-size: 11.5px; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; }
.iv-hover { font-family: 'JetBrains Mono', monospace; font-size: 13px; padding: 6px 10px; }
@media (max-width: 640px) {
    .iv-title { display: none; }
    .iv-top { justify-content: space-between; }
    .iv-hover { display: none; }
    .iv-btn { min-width: 42px; height: 42px; }
}


.skip-link { position:absolute; left:-9999px; top:8px; background:var(--accent); color:#111; padding:8px 14px; border-radius:8px; z-index:100; font-weight:600; }
.skip-link:focus { left:8px; }

/* ============================================================
   HH Color Lab - shared styles for the tool pages
   ============================================================ */
:root { --maxw: 1440px; --h: 60; --s: 100%; --l: 60%; --accent: hsl(var(--h) var(--s) var(--l)); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* ---- page title ---- */
.hero { padding: clamp(18px, 3.5vw, 38px) 0 clamp(10px, 2vw, 20px); }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.hero h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(28px, 5vw, 44px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 12px; }
.hero h1 em { color: var(--accent); font-style: italic; }
.hero .sub { color: var(--text-dim); font-size: clamp(15px, 2vw, 17px); max-width: 760px; margin: 0; }

/* ---- cards & layout ---- */
.stack { display: flex; flex-direction: column; gap: var(--card-gap); }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(16px, 2.4vw, 24px); }
.card > h2, .card-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(19px, 2.4vw, 23px); margin: 0 0 4px; letter-spacing: -.01em; }
.card-sub { color: var(--text-dim); font-size: 14px; margin: 0 0 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-2.wide-left { grid-template-columns: 1.15fr .85fr; } }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ---- form controls ---- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .lbl { font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
.in, select.in { width: 100%; background: var(--bg-deep); color: var(--text); border: 1px solid var(--border); border-radius: 10px; height: 42px; padding: 0 12px; font: inherit; font-size: 15px; min-width: 0; }
.in.mono { font-family: 'JetBrains Mono', monospace; font-size: 14px; }
.in:focus { border-color: var(--accent); outline: none; }
.in.bad { border-color: var(--bad); }
input[type=color].colorbox { width: 54px; height: 42px; padding: 3px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; flex: 0 0 54px; }
input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #111; border: 0; border-radius: 100px; padding: 10px 18px; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; min-height: 40px; transition: transform .12s ease, filter .12s ease; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.btn.ghost:hover { border-color: var(--accent); }
.btn.small { padding: 6px 12px; min-height: 32px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--bg-deep); border: 1px solid var(--border); color: var(--text-dim); border-radius: 100px; padding: 7px 14px; font-size: 13.5px; cursor: pointer; min-height: 36px; }
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip[aria-pressed=true], .chip.on { background: var(--accent); border-color: var(--accent); color: #111; font-weight: 600; }
.copybtn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.copybtn:hover { border-color: var(--accent); }
.copybtn svg { width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 2; }

/* ---- value rows (HEX / RGB / HSL ...) ---- */
.vals { display: flex; flex-direction: column; gap: 8px; }
.val { display: flex; align-items: center; gap: 10px; }
.val .k { width: 46px; flex: 0 0 46px; font-size: 12px; font-weight: 600; color: var(--text-dim); letter-spacing: .04em; }
.val code { flex: 1; min-width: 0; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 10px; padding: 9px 12px; font-family: 'JetBrains Mono', monospace; font-size: 13.5px; overflow-wrap: anywhere; }
.bigswatch { border-radius: 14px; border: 1px solid rgba(255,255,255,.14); min-height: 110px; display: flex; align-items: flex-end; padding: 12px 14px; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; }
.nm { font-family: 'Fraunces', serif; font-size: 18px; margin: 8px 0 12px; }

/* ---- swatches ---- */
.swgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.sw { border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-deep); padding: 0; overflow: hidden; cursor: pointer; text-align: left; display: flex; flex-direction: column; transition: transform .12s ease, border-color .12s ease; }
.sw:hover, .sw:focus-visible { transform: translateY(-2px); border-color: var(--accent); }
.sw .c { height: 64px; display: block; }
.sw .t { padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sw .t b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw .t span { font-size: 11.5px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.strip { display: flex; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-soft); }
.strip button { flex: 1; height: 64px; border: 0; cursor: pointer; padding: 0; position: relative; }
.strip button:hover { flex: 1.35; }
.strip button span { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font: 600 10.5px 'JetBrains Mono', monospace; opacity: 0; transition: opacity .12s; }
.strip button:hover span, .strip button:focus-visible span { opacity: 1; }
.empty { color: var(--text-faint); text-align: center; padding: 28px 10px; font-size: 14px; }

/* ---- tabs ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* ---- how to / faq / info ---- */
.howto { counter-reset: st; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.howto > li { counter-increment: st; position: relative; padding: 14px 16px 14px 56px; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 14px; }
.howto > li::before { content: counter(st); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #111; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.howto h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.howto ul { margin: 0 0 8px; padding-left: 18px; color: var(--text-dim); font-size: 14.5px; }
.howto li li { margin: 2px 0; }
.howto .why { font-size: 13.5px; color: var(--text-dim); border-left: 3px solid var(--accent); padding-left: 10px; }
.howto .why b { color: var(--text); }
.faq details { border-top: 1px solid var(--border-soft); padding: 12px 0; }
.faq details:first-of-type { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq p { margin: 8px 0 0; color: var(--text-dim); font-size: 14.5px; }
.prose p { color: var(--text-dim); margin: 0 0 12px; }
.prose h3 { font-family: 'Fraunces', serif; font-size: 20px; margin: 22px 0 8px; }
.prose ul { color: var(--text-dim); padding-left: 20px; }
.prose strong { color: var(--text); }
.note { font-size: 13px; color: var(--text-faint); margin-top: 10px; }

/* ---- pills ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 100px; font-size: 12.5px; font-weight: 700; }
.pill.pass { background: rgba(95,217,138,.14); color: var(--good); }
.pill.fail { background: rgba(240,104,95,.14); color: var(--bad); }

/* ---- header, footer and ads are in hh-site.css ---- */
.page-columns { padding: 0 clamp(12px, 3vw, 24px); }
.wrap { padding-left: 0; padding-right: 0; }