/* Disk Cleanup Assistant page (disk-cleanup.html) and its teaser on the home page.
   Everything is scoped under .dca so it cannot change other pages that share styles.css.
   Green means "can be put back", amber means "gone for good": the colours carry that meaning
   everywhere on the page, so do not reuse them as decoration. */

.dca {
    --dca-ink: #13202f;
    --dca-ink-soft: #2a3a4d;
    --dca-text: #1d2733;
    --dca-muted: #556373;
    --dca-line: #dfe5ec;
    --dca-wash: #f4f7fa;
    --dca-blue: #0a6fb8;
    --dca-blue-dark: #085a94;
    --dca-back: #276b44;
    --dca-back-wash: #e8f3ec;
    --dca-gone: #8a5810;
    --dca-gone-wash: #fbf1df;
    --dca-report-text: #e6edf5;
    --dca-report-dim: #9fb0c3;
    color: var(--dca-text);
    font-family: 'Public Sans', Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
}

.dca h1,
.dca h2,
.dca h3 {
    color: var(--dca-ink);
    font-family: 'Public Sans', Arial, sans-serif;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.dca h1 {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 800;
    margin: 0 0 20px;
    max-width: 18ch;
}

.dca h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 750;
    margin: 0 0 14px;
}

.dca h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.dca p {
    margin: 0 0 14px;
    max-width: 68ch;
}

.dca a {
    color: var(--dca-blue);
}

.dca a:hover {
    color: var(--dca-blue-dark);
}

.dca a:focus-visible,
.dca summary:focus-visible,
.dca pre:focus-visible,
.dca .dca-button:focus-visible {
    outline: 3px solid var(--dca-blue);
    outline-offset: 3px;
}

.dca code,
.dca pre {
    font-family: 'IBM Plex Mono', Consolas, monospace;
}

.dca :not(pre) > code {
    background: var(--dca-wash);
    border: 1px solid var(--dca-line);
    border-radius: 4px;
    font-size: 0.9em;
    padding: 0 4px;
}

.dca section {
    margin: 0;
}

/* styles.css pads every <main>; the bands here run edge to edge instead. */
main.dca {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.dca-wrap {
    margin: 0 auto;
    max-width: 1120px;
    padding: 0 20px;
}

.dca-band {
    padding: 64px 0;
}

.dca-band + .dca-band {
    border-top: 1px solid var(--dca-line);
}

.dca-band-wash {
    background: var(--dca-wash);
}

.dca-lede {
    color: var(--dca-muted);
    font-size: 1.15rem;
}

/* ---------------------------------------------------------------- hero */

.dca-hero {
    padding: 56px 0 64px;
}

.dca-hero-grid {
    align-items: start;
    display: grid;
    gap: 48px;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.dca-product {
    align-items: center;
    color: var(--dca-muted);
    display: flex;
    font-weight: 600;
    gap: 10px;
    margin-bottom: 18px;
}

.dca-product img {
    border-radius: 9px;
    height: 36px;
    width: 36px;
}

.dca-hero .dca-lede {
    max-width: 52ch;
}

.dca-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.dca-button {
    border: 2px solid var(--dca-blue);
    border-radius: 8px;
    display: inline-block;
    font-weight: 700;
    padding: 11px 20px;
    text-decoration: none;
}

.dca .dca-button-main {
    background: var(--dca-blue);
    color: #fff;
}

.dca .dca-button-main:hover {
    background: var(--dca-blue-dark);
    border-color: var(--dca-blue-dark);
    color: #fff;
}

.dca .dca-button-plain {
    background: transparent;
    color: var(--dca-blue);
}

/* .dca p sets a zero top margin; this needs the same weight to win. */
.dca .dca-fineprint {
    color: var(--dca-muted);
    font-size: 0.92rem;
    margin-top: 14px;
}

/* The dry run: the page's one loud element. Real output, from the CLI's snapshot test. */
.dca-report {
    background: var(--dca-ink);
    border-radius: 10px;
    box-shadow: 0 18px 40px -24px rgba(19, 32, 47, 0.7);
    color: var(--dca-report-text);
    margin: 0;
    min-width: 0;
    overflow: hidden;
}

.dca-report-bar {
    border-bottom: 1px solid var(--dca-ink-soft);
    color: var(--dca-report-dim);
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 0.85rem;
    padding: 10px 16px;
}

.dca-report pre {
    font-size: 0.72rem;
    line-height: 1.55;
    margin: 0;
    overflow-x: auto;
    padding: 16px;
    white-space: pre;
}

.dca-report .r-head {
    color: #fff;
    font-weight: 600;
}

.dca-report .r-back {
    color: #8fd6a8;
}

.dca-report .r-gone {
    color: #f3c37a;
}

.dca-report .r-left {
    color: #ff9e8a;
}

.dca-report .r-dim {
    color: var(--dca-report-dim);
}

.dca-report figcaption {
    border-top: 1px solid var(--dca-ink-soft);
    color: var(--dca-report-dim);
    font-size: 0.85rem;
    padding: 10px 16px 12px;
}

/* ---------------------------------------------------------------- steps */

.dca-steps {
    counter-reset: step;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}

.dca-steps li {
    border-top: 3px solid var(--dca-line);
    counter-increment: step;
    padding: 18px 22px 0 0;
    position: relative;
}

.dca-steps li::before {
    color: var(--dca-blue);
    content: counter(step);
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
}

.dca-steps li:last-child {
    border-top-color: var(--dca-back);
}

.dca-steps li:last-child::before {
    color: var(--dca-back);
}

.dca-steps p {
    color: var(--dca-muted);
    font-size: 0.98rem;
}

/* ---------------------------------------------------------------- finds */

.dca-two {
    display: grid;
    gap: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dca-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dca-list li {
    border-bottom: 1px solid var(--dca-line);
    padding: 10px 0;
}

.dca-list li:first-child {
    border-top: 1px solid var(--dca-line);
}

.dca-list strong {
    color: var(--dca-ink);
}

.dca-list span {
    color: var(--dca-muted);
    display: block;
    font-size: 0.95rem;
}

/* ---------------------------------------------------------------- safety */

.dca-outcomes {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 28px;
}

.dca-outcome {
    border-left: 5px solid;
    border-radius: 6px;
    padding: 16px 20px;
}

.dca-outcome h3 {
    margin-bottom: 6px;
}

.dca-outcome ul {
    margin: 0;
    padding-left: 18px;
}

.dca-outcome-back {
    background: var(--dca-back-wash);
    border-color: var(--dca-back);
}

.dca-outcome-back h3 {
    color: var(--dca-back);
}

.dca-outcome-gone {
    background: var(--dca-gone-wash);
    border-color: var(--dca-gone);
}

.dca-outcome-gone h3 {
    color: var(--dca-gone);
}

.dca-never {
    columns: 2;
    column-gap: 40px;
    margin: 10px 0 0;
    padding-left: 18px;
}

.dca-never li {
    break-inside: avoid;
    margin-bottom: 6px;
}

/* ---------------------------------------------------------------- ways to use it */

.dca-ways {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 28px;
}

.dca-way {
    background: #fff;
    border: 1px solid var(--dca-line);
    border-radius: 8px;
    min-width: 0;
    padding: 22px;
}

.dca-way-first {
    border: 2px solid var(--dca-blue);
}

.dca-way p {
    color: var(--dca-muted);
    font-size: 0.98rem;
}

.dca-status {
    border: 1px dashed var(--dca-muted);
    border-radius: 999px;
    color: var(--dca-muted);
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 10px;
    padding: 1px 10px;
}

.dca-status-live {
    border: 1px solid var(--dca-back);
    color: var(--dca-back);
}

.dca-cmd {
    background: var(--dca-ink);
    border-radius: 6px;
    color: var(--dca-report-text);
    font-size: 0.8rem;
    line-height: 1.55;
    margin: 10px 0 14px;
    overflow-x: auto;
    padding: 12px 14px;
    /* Wrap long install commands instead of hiding them; copying still gives one line each. */
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.dca-cmd .r-dim {
    color: var(--dca-report-dim);
}

/* ---------------------------------------------------------------- requirements, faq */

.dca-reqs {
    display: grid;
    gap: 0 40px;
    grid-template-columns: max-content minmax(0, 1fr);
    margin: 20px 0 0;
}

.dca-reqs dt {
    color: var(--dca-ink);
    font-weight: 700;
    padding: 10px 0;
}

.dca-reqs dd {
    border-bottom: 1px solid var(--dca-line);
    color: var(--dca-muted);
    margin: 0;
    padding: 10px 0;
}

.dca-reqs dt {
    border-bottom: 1px solid var(--dca-line);
}

.dca-faq details {
    border-bottom: 1px solid var(--dca-line);
    padding: 4px 0;
}

.dca-faq details:first-of-type {
    border-top: 1px solid var(--dca-line);
}

.dca-faq summary {
    color: var(--dca-ink);
    cursor: pointer;
    font-weight: 700;
    padding: 12px 0;
}

.dca-faq details p {
    color: var(--dca-muted);
}

.dca-closing {
    text-align: left;
}

.dca-legal {
    color: var(--dca-muted);
    font-size: 0.85rem;
    margin-top: 28px;
}

/* ---------------------------------------------------------------- home page teaser */

.dca-teaser-report {
    background: #13202f;
    border-radius: 10px;
    color: #e6edf5;
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    margin: 0;
    max-width: 100%;
    overflow-x: auto;
    padding: 16px;
    white-space: pre;
}

/* styles.css switches the teaser grid to 1fr on narrow screens, which would let this <pre>
   widen the page; minmax(0, 1fr) keeps it inside and lets it scroll on its own. */
#disk-cleanup .rack-extension-teaser {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

@media (max-width: 992px) {
    #disk-cleanup .rack-extension-teaser {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dca-teaser-report .r-head { color: #fff; font-weight: 600; }
.dca-teaser-report .r-back { color: #8fd6a8; }
.dca-teaser-report .r-gone { color: #f3c37a; }
.dca-teaser-report .r-dim { color: #9fb0c3; }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 960px) {
    .dca-hero-grid,
    .dca-two {
        grid-template-columns: 1fr;
    }

    .dca-ways {
        grid-template-columns: 1fr;
    }

    .dca-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 28px;
    }
}

@media (max-width: 600px) {
    .dca-band {
        padding: 44px 0;
    }

    .dca-hero {
        padding: 36px 0 44px;
    }

    /* On phones the fixed header stacks the logo over two rows of links (about 180px), taller
       than the 82px styles.css leaves for it, so the hero would start underneath it. */
    main.dca {
        padding-top: 190px;
    }

    .dca-wrap {
        padding: 0 16px;
    }

    .dca-steps,
    .dca-outcomes {
        grid-template-columns: 1fr;
    }

    .dca-never {
        columns: 1;
    }

    .dca-reqs {
        grid-template-columns: 1fr;
    }

    .dca-reqs dt {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .dca-actions .dca-button {
        text-align: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dca * {
        transition: none !important;
    }
}