/* ============================================================
   /downloads (pages/downloads/downloads-shared.mjs): a split hero with
   the devices illustration, the apps grouped by phone and computer, the
   browser as a slim bar, what only the phone or the desktop can do, and a
   dark sync card. .download-card, .download-card--detected and
   .download-card-badge are set by web-static/js/platform-detect.js.
   ============================================================ */

.dl-hero{padding:140px 0 40px}
.dl-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:center}
.dl-hero-copy h1{font-size:clamp(44px,5.6vw,72px);line-height:1;margin:12px 0 18px;color:var(--w-ink)}
.dl-sub{font-size:18px;line-height:1.55;color:var(--w-mut);margin:0 0 28px;max-width:520px}
.dl-actions{display:flex;flex-wrap:wrap;gap:12px}
.dl-actions .btn-f{gap:10px;padding:15px 24px}
.dl-main{box-shadow:var(--shadow-glow)}
.dl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:20px 0 0;font-size:14px;color:var(--w-mut)}
.dl-meta a{color:var(--green-700);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.dl-version{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:980px;background:rgba(51,117,77,.1);color:var(--green-700);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.dl-hero-art{position:relative;border-radius:26px;overflow:hidden;background:#1c2333;box-shadow:0 26px 60px rgba(20,32,24,.24),0 0 0 1px rgba(255,255,255,.4) inset}
.dl-hero-art img{display:block;width:100%;height:auto}

/* ---- The apps ---- */
.dl-platforms{padding:40px 0 10px;scroll-margin-top:90px}
.dl-group{display:flex;align-items:center;gap:10px;margin:34px 0 16px;font-size:15px!important;font-weight:700!important;letter-spacing:.04em!important;text-transform:uppercase;color:var(--w-mut)}
.dl-group i{font-size:14px;color:var(--green-600)}
.dl-grid{display:grid;gap:16px}
.dl-grid--phone{grid-template-columns:repeat(2,minmax(0,1fr))}
.dl-grid--desktop{grid-template-columns:repeat(3,minmax(0,1fr))}

.dl-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:20px;background:var(--w-panel);border:1px solid var(--w-line);box-shadow:rgba(31,35,33,.05) 0 6px 22px;color:inherit;text-decoration:none;transition:transform var(--dur-slow) var(--ease-standard),box-shadow var(--dur-slow) var(--ease-standard),border-color var(--dur-slow) var(--ease-standard)}
.dl-card:hover{transform:translateY(-3px);box-shadow:rgba(31,35,33,.1) 0 14px 34px;border-color:var(--w-line2)}
.dl-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)}
.dl-grid--phone .dl-card{flex-direction:row;align-items:center;gap:20px;padding:26px 28px}
.dl-card-logo{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:16px;box-shadow:0 8px 18px rgba(20,32,24,.18)}
.dl-card-logo svg{width:28px;height:28px;fill:currentColor}
.dl-card--ios .dl-card-logo,.dl-card--macos .dl-card-logo{background:linear-gradient(145deg,#2d3138,#111316);color:#fff}
.dl-card--android .dl-card-logo{background:linear-gradient(145deg,#2d3138,#111316);color:#3ddc84}
.dl-card--windows .dl-card-logo{background:linear-gradient(145deg,#3a8fe0,#1c64b8);color:#fff}
.dl-card--linux .dl-card-logo{background:linear-gradient(145deg,#f5cf55,#dca626);color:#1d1d1f}
.dl-card-text{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.dl-card h3{margin:0;font-size:20px;font-weight:700;color:var(--w-ink)}
.dl-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--w-mut)}
.dl-card-meta{align-self:flex-start;margin-top:4px;padding:3px 9px;border-radius:980px;background:var(--w-inset);font-size:12px;font-weight:600;color:var(--w-mut);font-variant-numeric:tabular-nums}
.dl-card-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:980px;background:var(--brand);color:var(--brand-contrast);font-size:14.5px;font-weight:600;white-space:nowrap;transition:background var(--dur-base) var(--ease-standard)}
.dl-card-btn i{font-size:12px}
.dl-card:hover .dl-card-btn,.dl-web:hover .dl-card-btn{background:var(--brand-hover)}
.dl-grid--desktop .dl-card-btn{align-self:stretch}

/* The visitor's own platform (platform-detect.js) */
.dl-card.download-card--detected{border-color:var(--green-500);box-shadow:0 0 0 1px var(--green-500),rgba(38,95,62,.16) 0 14px 34px}
.download-card-badge{position:absolute;top:14px;right:14px;padding:4px 10px;border-radius:980px;background:var(--green-600);color:var(--brand-contrast);font-size:11.5px;font-weight:700;letter-spacing:.02em}

.dl-web{display:flex;align-items:center;gap:18px;margin-top:16px;padding:18px 24px;border-radius:20px;background:var(--w-inset);border:1px dashed var(--w-dash);color:inherit;text-decoration:none;transition:background var(--dur-base) var(--ease-standard)}
.dl-web:hover{background:rgba(51,117,77,.08)}
.dl-web:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)}
.dl-web-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--w-panel);color:var(--green-600);font-size:19px}
.dl-web-text{flex:1;min-width:0;font-size:14.5px;line-height:1.5;color:var(--w-mut)}
.dl-web-text b{display:block;font-size:17px;color:var(--w-ink)}

/* ---- Only on the phone / only on the desktop ---- */
.dl-extras{padding:56px 0 10px}
.dl-extras-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dl-extras-col{padding:28px 30px;border-radius:20px;background:var(--w-panel);border:1px solid var(--w-line)}
.dl-extras-col h3{margin:0 0 18px;font-size:20px;font-weight:700;color:var(--w-ink)}
.dl-extras-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.dl-extras-col li{display:flex;gap:13px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--w-mut)}
.dl-extras-col li b{display:block;font-size:15px;color:var(--w-ink)}
.dl-extra-icon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(51,117,77,.1);color:var(--green-600);font-size:14px}

/* ---- Everything in sync ---- */
.dl-sync{padding:56px 0 90px}
.dl-sync-card{display:flex;align-items:center;gap:26px;padding:36px 40px;border-radius:22px;background:radial-gradient(circle at 12% 50%,rgba(111,211,155,.22),transparent 55%),#202327;color:#fff;box-shadow:0 18px 44px rgba(20,32,24,.2)}
.dl-sync-icon{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:rgba(111,211,155,.14);color:#7fd3a0;font-size:24px}
.dl-sync-card h2{margin:0 0 6px;font-size:24px;color:#fff}
.dl-sync-card p{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.74);max-width:620px}
.dl-sync-card > div{flex:1;min-width:0}
.dl-sync-card .btn-f{flex:none;gap:9px}

@media (max-width:980px){
  .dl-hero-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .dl-hero{padding-top:120px}
  .dl-grid--desktop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dl-sync-card{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .dl-hero{padding-top:104px}
  .dl-actions .btn-f{flex:1 1 100%;justify-content:center}
  .dl-grid--phone,.dl-grid--desktop,.dl-extras-grid{grid-template-columns:minmax(0,1fr)}
  .dl-grid--phone .dl-card{flex-direction:column;align-items:flex-start}
  .dl-grid--phone .dl-card-btn{align-self:stretch}
  .dl-web{flex-direction:column;align-items:flex-start}
  .dl-web .dl-card-btn{align-self:stretch}
  .dl-extras-col,.dl-sync-card{padding:24px 22px}
  .dl-sync-card .btn-f{align-self:stretch;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .dl-card{transition:none}
  .dl-card:hover{transform:none}
}

/* ===== DOWNLOADING PAGE ===== */

.downloading-page {
  padding: 160px 24px 120px;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.downloading-card {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 60px 40px;
  background: var(--bg-card);
  border-radius: 20px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

/* States */
.downloading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInUp 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.downloading-state--success {
  display: none;
}

/* Platform icon */
.downloading-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.downloading-icon svg {
  width: 44px;
  height: 44px;
}

.downloading-card--macos .downloading-icon {
  background: #1d1d1f;
}

.downloading-card--macos .downloading-icon svg {
  width: 38px;
  height: 38px;
}

.downloading-card--windows .downloading-icon {
  background: rgba(0, 120, 212, 0.1);
  color: #0078D4;
}

.downloading-card--linux .downloading-icon {
  background: rgba(233, 84, 32, 0.08);
}

.downloading-card--linux .downloading-icon svg {
  width: 48px;
  height: 48px;
}

[data-theme="dark"] .downloading-card--macos .downloading-icon {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .downloading-card--windows .downloading-icon {
  background: rgba(0, 120, 212, 0.15);
}

[data-theme="dark"] .downloading-card--linux .downloading-icon {
  background: rgba(233, 84, 32, 0.12);
}

/* Spinner */
.downloading-spinner {
  margin-bottom: 32px;
}

.spinner-ring {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-color);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spinnerRotate 1s linear infinite;
}

@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}

.downloading-card--windows .spinner-ring {
  border-top-color: #0078D4;
}

.downloading-card--linux .spinner-ring {
  border-top-color: #E95420;
}

/* Typography */
.downloading-card h1,
.downloading-card h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.downloading-subtitle {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
}

/* Animated checkmark */
.downloading-checkmark {
  width: 72px;
  height: 72px;
  margin-bottom: 32px;
}

.checkmark-svg {
  width: 72px;
  height: 72px;
}

.checkmark-circle {
  stroke: var(--green);
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: checkmarkCircle 0.6s ease-in-out forwards;
}

.checkmark-path {
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: checkmarkDraw 0.4s 0.4s ease-in-out forwards;
}

@keyframes checkmarkCircle {
  to { stroke-dashoffset: 0; }
}

@keyframes checkmarkDraw {
  to { stroke-dashoffset: 0; }
}

/* Instructions box */
.downloading-instructions {
  margin-top: 32px;
  padding: 24px;
  background: var(--bg-secondary);
  border-radius: 14px;
  text-align: left;
  width: 100%;
}

.downloading-instructions p {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--text-primary);
}

.downloading-instructions ol {
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
}

.downloading-instructions li {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.9;
}

/* Action buttons */
.downloading-actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.downloading-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.downloading-retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}

.downloading-retry:hover {
  color: var(--text-primary);
}

.downloading-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--transition);
}

.downloading-link:hover {
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 600px) {
  .downloading-page {
    padding: 120px 16px 80px;
  }

  .downloading-card {
    padding: 40px 24px;
  }

  .downloading-card h1,
  .downloading-card h2 {
    font-size: 22px;
  }

  .downloading-subtitle {
    font-size: 15px;
  }
}

/* ---- The downloading page, in the downloads page's new look: the same
   brand-coloured logo tiles as the app cards, a soft glow behind the card
   and a pill button. (Later rules, so they win over the originals above.) */
.downloading-card{position:relative;background:radial-gradient(circle at 50% 0%,rgba(111,211,155,.16),transparent 60%),var(--w-panel);border-color:var(--w-line2);border-radius:26px;box-shadow:rgba(31,35,33,.09) 0 18px 44px}
.downloading-icon{margin:0 auto 32px;width:84px;height:84px;border-radius:22px;box-shadow:0 12px 26px rgba(20,32,24,.2)}
.downloading-icon svg{fill:currentColor}
.downloading-card--macos .downloading-icon{background:linear-gradient(145deg,#2d3138,#111316);color:#fff}
.downloading-card--windows .downloading-icon{background:linear-gradient(145deg,#3a8fe0,#1c64b8);color:#fff}
.downloading-card--linux .downloading-icon{background:linear-gradient(145deg,#f5cf55,#dca626);color:#1d1d1f}
.downloading-actions .btn-primary{padding:14px 26px;border-radius:980px;background:var(--brand);color:var(--brand-contrast);font-weight:600;text-decoration:none;box-shadow:var(--shadow-glow)}
.downloading-actions .btn-primary:hover{background:var(--brand-hover);color:var(--brand-contrast)}