/* Waidrn v1.2 — media (avatars/covers) + typeahead styles.
 *
 * Loaded after app.css; everything uses the theme variables so both the dark
 * and light palettes work. No external fonts, images or CDNs.
 */

/* ---- Avatars ----------------------------------------------------------- */

.media-avatar {
  display: inline-block;
  object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line);
}

.media-avatar-large {
  width: 256px;
  height: 256px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-soft);
}

.media-avatar-wrap {
  display: inline-flex;
  align-items: center;
  margin-right: var(--sp-3, 0.75rem);
}

/* ---- Work covers ------------------------------------------------------- */

.media-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius, 12px);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line);
}

.media-cover-preview {
  max-width: 100%;
  height: auto;
}

.media-preview {
  display: flex;
  align-items: center;
  gap: var(--sp-4, 1rem);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3, 0.75rem);
}

.media-panel .field-hint,
.media-panel .muted {
  display: block;
}

.media-panel .inline-form {
  display: inline-block;
  margin-top: var(--sp-3, 0.75rem);
}

/* File input: make the native control usable in both themes and on touch. */
.media-panel input[type="file"] {
  display: block;
  width: 100%;
  max-width: 32rem;
  padding: var(--sp-3, 0.75rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius, 12px);
  background: var(--surface-inset);
  color: var(--ink-2);
  font: inherit;
}

.media-panel input[type="file"]::file-selector-button {
  margin-right: var(--sp-3, 0.75rem);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: var(--gold-ghost);
  color: var(--gold-bright);
  font: inherit;
  cursor: pointer;
}

.media-panel input[type="file"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* v1.2: covers on work cards and the work page (wired by reading/boards lane). */
.work-card-cover { margin: 0 0 0.6rem; }
.work-card-cover .media-cover { aspect-ratio: 16 / 7; }
.work-cover { margin: 0 0 1rem; }
.work-cover .media-cover { max-height: 340px; object-fit: cover; }