/* =============================================================================
   randomly-glass.css
   -----------------------------------------------------------------------------
   Deliberately SMALL. Linked before </head> on the tool pages.

   HISTORY / WHY THIS IS SMALL
   An earlier version of this file also skinned every button, panel and tool
   surface across 248 pages. That was a mistake and has been removed. Each tool
   owns its own design, and one cosmetic layer applied on top of 45 different
   layouts produced a uniform blue wash, a gradient hairline that stretched into
   two long vertical lines on tall tool areas, and translucent <select> popups
   with unreadable options.

   What remains is only what is genuinely universal and cannot clash:
     1. scrollbars      - native light scrollbars looked broken on dark pages
     2. range sliders   - native sliders look unfinished everywhere
     3. select/option   - readability guard; fixes a real invisible-text bug
     4. short-viewport  - density of the SHELL CHROME only, never the tool

   DO NOT add button, panel or .tool-scope skinning here.
   Improve tools individually instead.
   ========================================================================== */

:root {
    --gl-accent:   var(--accent-cyan, #0e7490);
    --gl-accent-2: var(--accent-violet, #7c3aed);
    --gl-track:    rgba(15, 23, 42, .12);
}
:root.dark {
    --gl-track:    rgba(255, 255, 255, .12);
}

/* =============================================================================
   1. SCROLLBARS
   ========================================================================== */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--gl-accent) transparent;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(160deg, var(--gl-accent), var(--gl-accent-2));
    border-radius: 999px;
    /* Transparent border + content-box clip insets the thumb without needing a
       separately coloured track. */
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background .2s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(160deg, var(--gl-accent-2), var(--gl-accent));
    background-clip: content-box;
}

/* Pages that intentionally hide a scrollbar (the auto-scrolling category nav)
   must keep it hidden. */
.category-nav::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar { display: none; }
.category-nav, .no-scrollbar { scrollbar-width: none; }

/* =============================================================================
   2. RANGE SLIDERS
   --range-fill is set by randomly-glass.js. Without JS the track still renders,
   just without the coloured progress portion.
   ========================================================================== */

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 26px;
    background: transparent;
    cursor: pointer;
    accent-color: var(--gl-accent);
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, var(--gl-accent), var(--gl-accent-2))
            0 / var(--range-fill, 0%) 100% no-repeat,
        var(--gl-track);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
}
input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: var(--gl-track);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
}
input[type="range"]::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gl-accent), var(--gl-accent-2));
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gl-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    /* track is 8px; centre the 18px thumb on it */
    margin-top: -5px;
    transition: transform .15s ease;
}
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gl-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
input[type="range"]:focus { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .3);
}
input[type="range"]:disabled { opacity: .5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    input[type="range"]::-webkit-slider-thumb { transition: none; }
}

/* =============================================================================
   3. SELECT / OPTION READABILITY
   A native <option> popup inherits the control's colours. Tools that give a
   <select> a translucent or dark background end up with unreadable options - on
   extract-text-from-pdf the OCR language list rendered as near-invisible text.
   Options must always be opaque with an explicit colour.
   ========================================================================== */

select option,
select optgroup {
    background-color: #ffffff;
    color: #0f172a;
}
:root.dark select option,
:root.dark select optgroup {
    background-color: #1e293b;
    color: #f8fafc;
}

/* =============================================================================
   4. SHORT-VIEWPORT SHELL DENSITY
   A 1366x768 laptop is the tightest common desktop viewport, and the shell
   chrome above the tool region ate 367-434px of it: 146px of header plus a
   205-272px title block. Every tool in random-generator-tools overflowed the
   fold by 60-155px, and no individual tool could fix it - the space was gone
   before the tool started.

   So this compacts the CHROME, not the tool: header padding, the h1, the
   subtitle and the privacy badge. Nothing inside .tool-scope is touched, which
   is what keeps this out of the "site-wide skin" mistake described above - the
   shell is genuinely uniform across all pages by construction, unlike the 45
   hand-designed tool interiors.

   Budget at 1366x768: ~105px returned to the tool (chrome 367px -> ~262px).

   Threshold is 850px so a 1440x900 screen (real viewport ~820px after browser
   chrome) also benefits, while a full-height 1080p window is left alone.
   Nothing here is display:none - the subtitle stays readable and indexable.

   min-width is deliberate. A phone in portrait (360x800 -> ~640px viewport)
   matches max-height:850 too, and without the width guard this would quietly
   restyle the h1 on every phone across 224 live pages - far past the laptop
   problem it exists to solve. 700px keeps phone portrait untouched while still
   covering phone landscape, tablets and every laptop.
   ========================================================================== */

@media (min-width: 700px) and (max-height: 850px) {
    /* header: logo row and the category-nav strip.
       The vertical space here lives on .header's padding-top and .nav-wrapper's
       padding-bottom - NOT on .container, which is `padding: 0 1.5rem` and has
       no vertical padding to reclaim. Setting it there adds 16px instead of
       removing it, which is exactly what the first draft of this block did. */
    .header { padding-top: .5rem; }
    .nav-wrapper { padding-bottom: .5rem; }
    .category-nav-wrapper { padding-top: .375rem; padding-bottom: .5rem; }

    /* title block */
    .page-title-section { padding-top: .75rem; padding-bottom: .5rem; }
    .page-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .25rem; }
    .page-subtitle { font-size: .8125rem; letter-spacing: .5px; }

    /* privacy badge - kept at full size, only its spacing tightens */
    .badge-wrapper-center { margin-top: .5rem; margin-bottom: .25rem; }
}