/* /apps-downloads/ — on top of ../domain-settings/styles.css (app.js). */

/* App tabs: icon, name, newest version */
.ad-tab-icon { border-radius: 5px; }
.ad-tab-version { font-size: 0.78rem; color: #00ffcc; opacity: 0.85; }
.ad-intro { display: flex; gap: 0.6rem 1rem; align-items: flex-start; flex-wrap: wrap; }
.ad-intro > p { flex: 1 1 420px; margin: 0; font-size: 0.85rem; }
.ad-migration { margin: 0.8rem 0 0; }
.ad-migration a { color: #ff99aa; }
.ad-empty { margin-top: 0.6rem; }
.apps-adm > .ag-log { margin: 0.8rem 0 0; font-size: 0.85rem; }
.apps-adm > .ap-app:first-of-type { border-top: none; padding-top: 0.4rem; }

.apps-adm a { color: #58a6ff; }
.ap-app { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); }
.ap-app-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ap-app-head img { border-radius: 9px; }
.ap-app-name { flex: 1; min-width: 140px; }
.ap-app-actions, .ap-rel-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ap-rel { padding: 0.7rem 0.8rem; margin-top: 0.5rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: rgba(0,0,0,0.18); }
.ap-rel-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ap-rel-version { font-weight: 600; font-size: 1.05rem; color: #fff; }
.ap-latest { font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; color: #00ffcc; border: 1px solid rgba(0,255,204,0.5); }
.ap-rel-actions { margin-left: auto; }
.ap-rel-notes { font-size: 0.85rem; color: #ccc; margin-top: 0.4rem; line-height: 1.45; }
.ap-rel-notes summary { cursor: pointer; color: #aaa; width: fit-content; }
.ap-rel-notes summary:hover, .ap-rel-notes[open] summary { color: #fff; }
.ap-rel-notes summary + * { margin-top: 0.3rem; }
.ap-rel-notes h1, .ap-rel-notes h2, .ap-rel-notes h3, .ap-rel-notes h4 { font-size: 0.92rem; color: #fff; margin: 0.8rem 0 0.2rem; }
.ap-rel-notes p { margin: 0.3rem 0; }
.ap-rel-notes ul, .ap-rel-notes ol { margin: 0.2rem 0; padding-left: 1.3rem; }
.ap-rel-notes strong { color: #fff; }
.ap-rel-notes code { font-size: 0.9em; padding: 0 0.25rem; border-radius: 4px; background: rgba(255,255,255,0.08); }
.ap-builds { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.6rem; margin-top: 0.6rem; }
.ap-build { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); min-width: 0; }
.ap-build.none { opacity: 0.7; border-style: dashed; }
.ap-build.missing { border-color: rgba(255,68,102,0.5); }
.ap-build-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ap-build-head span { display: flex; gap: 0.35rem; }
.ap-build-file { font-size: 0.88rem; word-break: break-all; }
.ap-warn { color: #ff4466; font-size: 0.8rem; margin-left: 0.3rem; }
/* A version's preview song (app.js renderAdminPreview()), violet like its /mp3-tracks badge. */
.ap-preview { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid rgba(180,140,255,0.35); background: rgba(155,92,255,0.06); }
.ap-preview.none { border-style: dashed; border-color: rgba(255,255,255,0.1); background: none; padding: 0.35rem 0.7rem; }
.ap-preview-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ap-preview-main .ap-warn { margin-left: 0; }
.ap-preview-files { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
.ap-preview-form { border-color: rgba(180,140,255,0.45); background: rgba(155,92,255,0.05); }
/* The preview song's player: /mp3-tracks' song card, full width under its row. */
.ap-preview-player { flex: 1 1 100%; min-width: 0; }
.ap-preview-player .pc-card { margin: 0; }
.ap-preview-form .ap-preview-player { margin-top: 0.8rem; }
/* The preview song form's tags (the shared poem_tag list, each in its own colour). */
.ap-tag-picker { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ap-tag-chip {
  --tag: #00ffcc;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--tag) 9%, transparent);
  color: var(--tag);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
}
.ap-tag-chip:hover { opacity: 1; }
.ap-tag-chip.selected { opacity: 1; border-color: currentColor; background: color-mix(in srgb, var(--tag) 22%, transparent); }
.ap-form { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.9rem; margin-top: 0.5rem; border: 1px solid rgba(0,255,204,0.35); border-radius: 10px; background: rgba(0,255,204,0.04); }
.ap-form-title { font-weight: 600; color: #fff; }
.ap-form-row, .ap-form-build { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem; }
.ap-form textarea { background: rgba(34,34,34,0.85); border: 1px solid #444; border-radius: 7px; color: #fff; padding: 0.5rem 0.65rem; font: inherit; font-size: 0.92rem; resize: vertical; }
.ap-form textarea:focus { outline: none; border-color: #00ffcc; }
.ap-form-notes summary { cursor: pointer; width: fit-content; font-size: 0.75rem; color: #999; text-transform: uppercase; letter-spacing: 0.05em; }
.ap-form-notes summary:hover, .ap-form-notes[open] summary { color: #ccc; }
.ap-form-notes summary .ds-small { text-transform: none; letter-spacing: 0; }
.ap-form-notes textarea { width: 100%; box-sizing: border-box; }
.ap-form input[type="file"] { padding: 0.35rem; }
.ap-form p { margin: 0; }
.apps-adm .ag-log { white-space: pre-wrap; }
.ap-shots { margin: 0.2rem 0 0.4rem; }
.ap-shots-head { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ap-shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; margin-top: 0.6rem; }
.ap-shot { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); min-width: 0; }
.ap-shot.hero { border-color: rgba(0,255,204,0.35); }
.ap-shot-img { display: block; aspect-ratio: 1500 / 920; border-radius: 6px; overflow: hidden; background: #000; }
.ap-shot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-shot-text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; min-width: 0; }
.ap-shot-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.ap-shot-form { display: flex; flex-direction: column; gap: 0.35rem; }
.ap-shot-form input, .ap-shot-form textarea { background: rgba(34,34,34,0.85); border: 1px solid #444; border-radius: 6px; color: #fff; padding: 0.35rem 0.5rem; font: inherit; font-size: 0.85rem; resize: vertical; }
.ap-shot-form input:focus, .ap-shot-form textarea:focus { outline: none; border-color: #00ffcc; }

/* Stable and archived versions */
.ap-stable { font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; color: #ffd56a; border: 1px solid rgba(255,213,106,0.55); }
.ap-rel.stable { border-color: rgba(255,213,106,0.35); }
.ap-rel.archived { opacity: 0.75; background: none; border-style: dashed; }
.ap-rel.archived .ap-rel-head .ds-small { min-width: 0; overflow-wrap: anywhere; }

/* The tab's version count: plain information, so muted (Domain Settings' red .ds-tab-count means "needs attention") */
.ad-tab-count {
  background: rgba(255,255,255,0.12);
  color: #bbb;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: bold;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}
.ad-tab-count:empty { display: none; }

/* Visitors: a line about the page instead of the admin intro */
.ad-intro-public { margin: 0 0 0.2rem; font-size: 0.88rem; line-height: 1.5; }