/* =========================================================================
   LinkedIn downloader UI. Reuses the global tokens from global.css
   (--paper, --surface, --ink, --accent, --radius, --line, ...). Loaded
   only on the video and photo downloader pages.
   ========================================================================= */

#lp-downloader { margin-top: 24px; max-width: 720px; }

/* The form card --------------------------------------------------------- */
.dl-form {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.dl-label { font-weight: 600; font-size: 14.5px; }
.dl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dl-input {
  flex: 1 1 280px;
  padding: 10px 14px;
  font: inherit; font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.dl-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.dl-submit { flex: 0 0 auto; }
.dl-status { margin: 0; font-size: 14px; color: var(--muted); min-height: 1.2em; }
.dl-status.error { color: var(--ink); font-weight: 600; }

/* Results ---------------------------------------------------------------- */
.dl-result { margin-top: 16px; }
.dl-card, .dl-note {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.dl-note p { margin: 0 0 12px; }
.dl-note p:last-child { margin-bottom: 0; }
.dl-title {
  margin: 0 0 14px;
  font-family: var(--display); font-weight: 600; font-size: 18px;
  line-height: 1.35;
}
.dl-poster {
  display: block;
  width: 100%; max-width: 420px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
.dl-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dl-hint { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.dl-cross { margin-top: 2px; }

/* Photo grid -------------------------------------------------------------- */
.dl-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .dl-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .dl-grid { grid-template-columns: repeat(3, 1fr); } }
.dl-thumb { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dl-thumb img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
}
.dl-thumb .dl-btn { align-self: flex-start; }

/* How it works ------------------------------------------------------------ */
.dl-how { margin-top: 28px; max-width: 720px; }
.dl-how h2 {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  margin: 0 0 10px;
}
.dl-how ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.dl-how li { font-size: 15px; color: var(--muted); }