/* Free-tools gate ------------------------------------------------------
   Styling for the signed-out state of a /resources/ tool: the blur, the
   scrim, the overlay card, the public summary block, and the signup
   button they share.

   This lived in landing-yellow.css, which only landing_base.html loads.
   tutorials.html extends base.html, so the gate markup rendered there
   with no styling at all — an unblurred video grid with a plain block of
   text under it. Both bases load this file, so the gate is styled
   wherever it is rendered.

   Every theme token is written as var(--token, fallback) so the rules
   stand on their own inside the enterprise shell, where the yellow theme
   variables are not defined, and still defer to the theme on the landing
   pages. */

/* Primary call to action in the public nav. Gold fill against the
   outlined Login button so the two read as primary/secondary. */
.btn-signup {
    background: var(--yellow-primary, #FFD700);
    color: #000000;
    border: 1px solid var(--yellow-primary, #FFD700);
    border-radius: 6px;
    padding: 0.45rem 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.btn-signup:hover,
.btn-signup:focus-visible {
    background: var(--yellow-bright, #FFEB3B);
    color: #000000;
    box-shadow: var(--glow-yellow-sm, 0 0 10px rgba(255, 215, 0, 0.4));
}

/* Gate overlay -------------------------------------------------------
   Sits over a tool's controls for signed-out visitors. The page content
   behind it stays in the document; only the interactive region is
   covered. */
.resource-tool {
    position: relative;
}

.resource-tool-gated > *:not(.resource-locked) {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
}

.resource-locked {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 5;
}

.resource-locked-card {
    max-width: 420px;
    width: 100%;
    text-align: center;
    padding: 2rem 1.75rem;
    background: var(--bg-card, #0d0d0d);
    border: 1px solid var(--border-yellow, rgba(255, 215, 0, 0.3));
    border-radius: 10px;
    box-shadow: var(--glow-yellow-sm, 0 0 10px rgba(255, 215, 0, 0.4));
    /* The scrim spans the whole tool region, which on the simulator is
       three screens tall. Centered, the card lands 700px below the fold
       and the visitor scrolls through blurred controls with nothing
       telling them why. Anchor it near the top and let it follow. */
    align-self: start;
    position: sticky;
    top: 6rem;
    margin-top: 2.5rem;
}

.resource-locked-eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yellow-primary, #FFD700);
}

.resource-locked-title {
    margin: 0 0 0.6rem;
    font-size: 1.35rem;
    color: var(--text-primary, #ffffff);
    text-wrap: balance;
}

.resource-locked-body {
    margin: 0 0 1.4rem;
    color: var(--text-secondary, #e8e8e8);
    font-size: 0.95rem;
    line-height: 1.5;
}

.resource-locked-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.resource-locked-secondary {
    color: var(--text-tertiary, #c0c0c0);
    font-size: 0.9rem;
    text-decoration: underline;
}

.resource-locked-secondary:hover {
    color: var(--yellow-primary, #FFD700);
}

.resource-locked-secondary:focus-visible {
    color: var(--yellow-primary, #FFD700);
    outline: 2px solid var(--yellow-primary, #FFD700);
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    .resource-locked {
        padding: 1rem;
    }

    .resource-locked-card {
        padding: 1.5rem 1.25rem;
    }

    .resource-locked-title {
        font-size: 1.15rem;
    }
}

/* Gate summary -------------------------------------------------------
   The public half of a gated tool page: what the tool does and what is
   behind the scrim. Rendered outside .resource-tool so it is never
   blurred. */
.resource-summary-section {
    padding: 2rem 0 0;
}

.resource-summary {
    padding: 1.75rem;
    background: var(--bg-card, #0d0d0d);
    border: 1px solid var(--border-yellow-light, rgba(255, 215, 0, 0.2));
    border-left: 3px solid var(--yellow-primary, #FFD700);
    border-radius: 10px;
}

.resource-summary-eyebrow {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yellow-primary, #FFD700);
}

.resource-summary-lede {
    margin: 0;
    color: var(--text-secondary, #e8e8e8);
    font-size: 1rem;
    line-height: 1.6;
}

.resource-summary-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.resource-summary-features li {
    color: var(--text-tertiary, #c0c0c0);
    font-size: 0.9rem;
}

.resource-summary-features i {
    margin-right: 0.5rem;
    color: var(--yellow-primary, #FFD700);
}

/* Printing is a signed-in path, so nothing the gate adds may establish a
   containing block for it. premarket_checklist's .print-area is
   position: absolute; left: 0; top: 0 and must resolve against the page. */
@media print {
    .resource-tool {
        position: static;
    }

    .resource-locked {
        display: none;
    }
}