/* The app's own pages: lists of sets, an artist, a set. Builds on site.css. */

main { padding-block: 24px 72px; }
.page { display: flex; flex-direction: column; gap: 16px; }
.page h1 { font-size: clamp(36px, 6vw, 64px); }
.page h2 { font-size: 22px; margin-top: 16px; }
.small { font-size: 14px; }
.meta { color: var(--muted); font-size: 14px; }

.cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--card); border-radius: 18px; }
.card-title { font-family: var(--sub-face); font-weight: 700; font-size: 18px; line-height: 1.25; text-decoration: none; }
.codes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.code { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.code.gone, .copies .gone .service { text-decoration: line-through dashed; opacity: 0.7; }

.player { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--ink); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; border: 0; background: var(--ink); color: var(--bg); font: inherit; font-weight: 600; font-size: 18px; text-align: left; cursor: pointer; }
.play > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.play .muted { color: var(--bg); opacity: 0.7; font-weight: 400; }
.play-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--fill); color: var(--on-fill); font-size: 24px; padding-left: 4px; }
.play:hover .play-icon { transform: scale(1.05); }

.copies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.copies li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 56px; padding: 12px 18px; background: var(--card); border-radius: 14px; }
.copies .service { font-weight: 600; text-decoration: none; }
.copies .gone { background: transparent; border: 1.5px dashed var(--line); }

.lookup-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 720px; }
main .lookup-form input { flex: 1 1 280px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ctrl); background: var(--card); color: var(--ink); font: inherit; }
.reply { display: flex; flex-direction: column; gap: 6px; max-width: 720px; padding: 20px; border-radius: 18px; background: var(--card); }
.reply h2 { margin: 0; }

.artists { list-style: none; margin: 0; padding: 0; columns: 3 220px; font-size: 18px; }
.artists li { padding-block: 6px; break-inside: avoid; }
.artists a { text-decoration: none; }

.passkey { max-width: 640px; }
.error { color: var(--label); font-weight: 600; }
.created-link { overflow-wrap: anywhere; user-select: all; }
.pass-on { display: flex; flex-direction: column; gap: 12px; max-width: 720px; padding: 20px; border-radius: 18px; border: 1.5px dashed var(--ctrl); }
.pass-on h2 { margin: 0; }
.pass-on label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 15px; }
.pass-on .btn { align-self: flex-start; }
.queue-card { gap: 10px; max-width: 760px; margin-top: 8px; }
.queue-card h2 { font-size: 20px; margin: 0; }
.queue-card a { overflow-wrap: anywhere; }
.decide { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.decide label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.credit { font-family: var(--sub-face); font-weight: 700; font-size: 20px; }
.share { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.share label { font-weight: 600; }
.share input { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; }
.official-check { display: flex; flex-direction: column; gap: 8px; }
/* What MusicBrainz says, in the brand's yellow, so it's read before choosing. */
.evidence { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--fill); color: var(--on-fill); }
.evidence p { margin: 0; }
.evidence-source { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.settle { display: flex; flex-direction: column; gap: 12px; }
.settle > label, .artist-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.settle .muted { font-weight: 400; }
.settle .actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Artist, Label or Partner: one switch, the chosen one inked. */
.segmented { margin: 0; padding: 0; border: 0; min-width: 0; }
.segmented legend { margin: 0 0 2px; padding: 0; font-weight: 600; }
.segmented > p { margin: 0 0 8px; }
.segmented-options { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg); }
.segmented label { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; }
.segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented label:has(input:checked) { background: var(--ink); color: var(--bg); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--label); outline-offset: 2px; }
/* On the official-account card, the artist field is only for an artist's account. */
.settle:has(.segmented):not(.new-set):not(:has(input[name="kind"][value="artist"]:checked)) .artist-field { display: none; }
/* The wave mark's pink dot, with a check: a verified official account. */
.verified { vertical-align: -3px; margin-left: 2px; }

/* One look for every text box and dropdown in the app's own pages. */
main input:is([type="text"], [type="email"], [type="date"], :not([type])),
main select {
  min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--ctrl);
  background-color: var(--card); color: var(--ink); font: inherit; font-weight: 400;
}
main select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23727882' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
main input:focus-visible, main select:focus-visible { outline: 2px solid var(--label); outline-offset: 1px; border-color: var(--ink); }
.decide .wide { flex: 1 1 320px; }
.decide .wide input { width: 100%; }
.share { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
/* The privacy and terms pages. */
.legal { max-width: 720px; }
.legal h2 { margin-top: 12px; font-size: 22px; }
.legal ul { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; }
/* The home page (app/templates/home/show.html.erb). */
.home { display: flex; flex-direction: column; gap: 72px; padding-bottom: 24px; }
.home section { display: flex; flex-direction: column; gap: 20px; }
.home .hero { gap: 24px; padding-top: 32px; max-width: 880px; }
.home .hero h1 { font-size: clamp(44px, 8vw, 104px); }
.home .hero .lede { font-size: clamp(18px, 1.8vw, 21px); }
.home h2.big { font-size: clamp(30px, 4vw, 44px); }
.home .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.home .steps > div { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--ink); }
.home .steps h3 { font-size: 22px; }
.home .band { background: var(--ink); color: var(--bg); border-radius: 24px; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 14px; }
.home .band .lede { color: var(--bg); opacity: 0.85; }
/* Report a problem (app/templates/reports/new.html.erb). */
.report-reasons { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.report-reasons legend { font-weight: 600; margin-bottom: 8px; }
.report-reasons label, .settle .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.settle textarea { min-height: 96px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--ctrl); background: var(--card); color: var(--ink); font: inherit; }
/* The owner's behind-the-scenes views (#138). */
.background-runs li { flex-wrap: wrap; }
.behind { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; padding: 14px 16px; border-radius: 14px; border: 1.5px dashed var(--ctrl); font-size: 14px; }
.behind p { margin: 0; }
/* The menu beside a member's own pages (components/_section_menu). */
.with-menu { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.with-menu-main { flex: 999 1 560px; min-width: 0; }
.section-menu { flex: 1 1 220px; max-width: 240px; padding: 16px; border-radius: 18px; background: var(--card); }
.section-menu nav, .section-menu-wide { display: flex; flex-direction: column; gap: 4px; }
.section-menu-group { margin: 0 0 6px 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.section-menu-group:not(:first-child) { margin-top: 18px; }
.section-menu a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink); }
.section-menu a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.section-menu .tag { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--dot); color: #fff; font-size: 12px; line-height: 22px; text-align: center; }
.section-menu-narrow { display: none; }
.section-menu-narrow summary { min-height: 48px; display: flex; align-items: center; padding: 0 12px; font-weight: 600; cursor: pointer; }
.nav-you { padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; }
@media (max-width: 720px) {
  .section-menu-wide { display: none; }
  .section-menu-narrow { display: block; flex-basis: 100%; max-width: none; padding: 4px; }
}
/* The footer: what tapetree is on the left, its links together on the right. */
footer.site .footer-notes { flex: 1 1 420px; display: flex; flex-direction: column; gap: 6px; }
footer.site .footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-start; }