/* download.css - page-specific styles (shared chrome in site.css) */

    .container { max-width:1000px; margin:0 auto; padding:2.5rem 1.5rem; }

    /* ── FILTER (category pill = shared .tabs-pill in site.css) ── */
    .tabs-wrap { margin-bottom:2rem; }

    /* ── SECTION ── */
    .doc-section { margin-bottom:2.5rem; }
    h2.sec { font-size:1.1rem; color:var(--primary); border-left:4px solid var(--accent); padding-left:.8rem; margin-bottom:1rem; }
    .doc-list { display:flex; flex-direction:column; gap:.8rem; }

    /* ── DOCUMENT ITEM ── */
    .doc-item {
      display:grid; grid-template-columns:auto 1fr auto;
      align-items:center; gap:1.2rem;
      background:#fff; border-radius:10px;
      padding:1rem 1.2rem;
      box-shadow:0 2px 8px rgba(0,0,0,.07);
      border-left:3px solid transparent;
      transition:border-color .2s, box-shadow .2s;
    }
    .doc-item:hover { border-left-color:var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.1); }
    .doc-icon { font-size:2rem; line-height:1; }
    .doc-name { font-size:.95rem; font-weight:600; color:var(--primary); margin-bottom:.3rem; }
    .doc-meta { font-size:.78rem; color:#666; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
    .doc-tag { background:var(--accent); color:#111; font-weight:600; padding:.1rem .5rem; border-radius:4px; font-size:.72rem; }

    /* ── DOWNLOAD BUTTON ── */
    .dl-btn {
      display: inline-flex; align-items: center; gap: .65rem;
      background: none; border: none; padding: 0;
      cursor: pointer; font-family: inherit; flex-shrink: 0;
    }
    .dl-btn:disabled { opacity: .45; cursor: not-allowed; }
    .dl-circle {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--accent); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
      transition: background .3s;
    }
    .dl-icon {
      width: 18px; height: 18px;
      fill: none; stroke: #111; stroke-width: 1.5;
      stroke-linecap: round; stroke-linejoin: round;
      position: relative; z-index: 1;
      transition: transform .3s, opacity .25s;
    }
    .dl-square {
      position: absolute;
      width: 13px; height: 13px;
      background: #111; border-radius: 2px;
      top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
      transition: top .35s cubic-bezier(.34,1.56,.64,1);
    }
    .dl-labels {
      position: relative;
      font-size: .82rem; font-weight: 700;
    }
    .dl-title {
      display: block; color: var(--primary);
      line-height: 1.2; white-space: nowrap;
      transition: opacity .25s, transform .3s;
    }
    .dl-title + .dl-title {
      position: absolute; top: 0; left: 0;
      opacity: 0; transform: translateY(6px);
    }
    .dl-btn.dl-loading .dl-circle { background: #ffd740; }
    .dl-btn.dl-loading .dl-icon { animation: dlBounce .5s ease infinite; }
    .dl-btn.dl-done .dl-circle { background: var(--primary); }
    .dl-btn.dl-done .dl-icon { opacity: 0; transform: translateY(120%); }
    .dl-btn.dl-done .dl-square { top: 50%; transform: translateX(-50%) translateY(-50%); }
    .dl-btn.dl-done .dl-title:first-child { opacity: 0; transform: translateY(-6px); }
    .dl-btn.dl-done .dl-title + .dl-title { opacity: 1; transform: translateY(0); }
    @keyframes dlBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(4px); }
    }

    /* keep the download button on the RIGHT of every row (all sizes) */
    .doc-item .ui-dl { justify-self: end; }
    @media(max-width:640px) {
      .doc-item { gap: .8rem; }
      .doc-icon { font-size: 1.6rem; }
    }