/*
    A SUPPLEMENT TO downloader-studio.css, not a second design system.

    The audio permission tools render inside the shared .vds studio, so the
    hero, the input box, the result card, the content blocks, the buttons
    and the ad slots all come from downloader-studio.css and change with it.

    This file only styles the parts that have no equivalent there, because
    the older downloaders do not check permission:

      .ads-notice     the two required rights notices
      .ads-rights     the confirmation, which reuses the vds toggle
      .ads-licence    the licence and attribution panel
      .ads-blocked    the refusal panel - information, not an error
      .ads-format     one selectable file
      .ads-limits     "what this will not do"
      .ads-faq        the questions

    Everything here inherits --vds-brand from the studio, so a tool's
    accent colour reaches these parts too.
*/

/* ---- the required notices ---------------------------------------- */

.vds .ads-notice {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: .88rem;
    line-height: 1.45;
}

.vds .ads-notice--muted {
    opacity: .85;
}

/* ---- the rights confirmation ------------------------------------- */

/* Reuses .vds-toggle wholesale; only the wrap is different, because the
   sentence is long enough to need two lines on a phone. */
.vds .ads-rights {
    align-items: flex-start;
    line-height: 1.4;
    max-width: 44ch;
}

/* ---- examples ----------------------------------------------------- */

.vds .ads-examples {
    margin: .25rem 0 1rem;
    word-break: break-word;
}

.vds .ads-examples code {
    background: rgba(0, 0, 0, .05);
    padding: .1rem .35rem;
    border-radius: 4px;
    font-size: .92em;
}

/* ---- licence and attribution -------------------------------------- */

.vds .ads-licence {
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding-top: 1rem;
    margin-top: 1rem;
}

.vds .ads-licence-name {
    font-weight: 600;
    margin: 0 0 .5rem;
}

.vds .ads-licence-label {
    font-weight: 600;
    margin: .75rem 0 .25rem;
    font-size: .92rem;
}

/* The credit line is meant to be copied, so one click selects all of it. */
.vds .ads-attr {
    background: rgba(0, 0, 0, .05);
    border-left: 3px solid var(--vds-brand, #666);
    padding: .6rem .75rem;
    border-radius: 0 6px 6px 0;
    margin: 0;
    font-size: .92rem;
    user-select: all;
}

/* ---- the files ---------------------------------------------------- */

.vds .ads-format {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.vds .ads-format:last-child {
    border-bottom: 0;
}

.vds .ads-format input {
    margin-top: .25rem;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--vds-brand, #666);
}

.vds .ads-format label {
    cursor: pointer;
    line-height: 1.45;
}

/* The honesty label: a lossless container from a lossy source. */
.vds .ads-format-warn {
    display: block;
    font-size: .85rem;
    opacity: .75;
}

.vds .ads-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ---- the refusal -------------------------------------------------- */

/* Deliberately not styled as an error: a blocked download is usually the
   tool working correctly, and shouting about it would suggest otherwise. */
.vds .ads-blocked {
    border: 1px solid rgba(0, 0, 0, .1);
    border-left: 4px solid var(--vds-brand, #666);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    margin: 1rem 0 1.5rem;
    background: rgba(0, 0, 0, .02);
}

.vds .ads-blocked h2 {
    margin: 0 0 .5rem;
}

.vds .ads-blocked p {
    margin: 0 0 .5rem;
}

.vds .ads-blocked p:last-child {
    margin-bottom: 0;
}

/* ---- copy blocks --------------------------------------------------- */

.vds .ads-limits {
    padding-left: 1.2rem;
    margin: .5rem 0 0;
}

.vds .ads-limits li {
    margin-bottom: .4rem;
}

.vds .ads-faq details {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    padding: .7rem 0;
}

.vds .ads-faq summary {
    cursor: pointer;
    font-weight: 600;
}

.vds .ads-faq p {
    margin: .6rem 0 0;
    opacity: .85;
}

/* ---- dark mode ----------------------------------------------------- */

/* Only the surfaces this file introduces; everything else follows the
   shared stylesheet's own dark handling. */
@media (prefers-color-scheme: dark) {
    .vds .ads-licence { border-top-color: rgba(255, 255, 255, .12); }
    .vds .ads-format { border-bottom-color: rgba(255, 255, 255, .1); }
    .vds .ads-faq details { border-bottom-color: rgba(255, 255, 255, .12); }

    .vds .ads-attr,
    .vds .ads-examples code { background: rgba(255, 255, 255, .07); }

    .vds .ads-blocked {
        background: rgba(255, 255, 255, .04);
        border-color: rgba(255, 255, 255, .12);
    }
}