/* Report a Problem (#2000): two panels in the column; the areas are 44px chips on one line. */
.report-form section > :last-child { margin-bottom: 0; }
.area-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.area-chips .chip { align-items: center; min-height: 44px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: 22px; cursor: pointer; }
.area-chips .chip input { margin: 0; }
.area-chips .chip:has(input:checked) { border-color: var(--silver); }
.area-chips .chip:has(input:focus-visible) { outline: 2px solid var(--copper); outline-offset: 2px; }
.report-form label.check:not(.chip) { align-items: center; min-height: 44px; }
.report-form label.check:not(.chip) input { margin: 0; }
/* Beats .field's display: grid, which would show a hidden field. */
.version-field[hidden] { display: none; }
.report-files .file-names { display: none; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.file-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); overflow-wrap: anywhere; }
.file-list img { height: 64px; width: auto; max-width: 96px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
/* The broadcaster id and the listening link it makes, shown right under it. */
.field-with-preview { display: grid; gap: 6px; }
.field-with-preview > * { margin: 0; }
.slug-link code { overflow-wrap: anywhere; }
/* One-use link rows: [copy button or label] [status] [revoke], the same columns in every row so the Xs line up. On a phone
   the status drops under the button and the X stays in its column. */
.invite-links > li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 44px; align-items: center; gap: 2px var(--s2); }
.invite-links .name, .invite-links .detail, .invite-links .end { min-width: 0; }
.invite-links .end { margin-left: 0; display: grid; justify-items: center; }
.invite-links .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-links .copy-value, .invite-links .sensitive, .invite-links .sensitive-value { display: flex; min-width: 0; max-width: 100%; }
.invite-links .sensitive-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-links .copy-button { min-width: 0; max-width: 100%; overflow: hidden; justify-content: flex-start; text-align: left; }
.invite-links .copy-button svg { flex: none; }
.invite-links .copy-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.one-use-form .field { margin-bottom: var(--s2); }
@media (max-width: 800px) {
    .invite-links > li { grid-template-columns: minmax(0, 1fr) 44px; }
    .invite-links .name { grid-column: 1; grid-row: 1; }
    .invite-links .detail { grid-column: 1; grid-row: 2; }
    .invite-links .end { grid-column: 2; grid-row: 1 / span 2; }
}
.setup-again > summary { margin-top: 0; }
/* The listening link: with the script it is a button that copies it (site.js); without, text to select. */
.listening-link { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 var(--s2); }
.listening-link code { padding: 10px 12px; user-select: all; }
.live-line { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-weight: 600; font-size: 18px; margin: 0 0 var(--s2); }
/* Analytics: a link with a tap-sized target, not note text. */
.strip-action { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.strip-analytics .strip-action { margin-top: 2px; }
/* The channel under the Dashboard title: the broadcaster's approved picture in a circle, or a letter, and the name. */
.dash-channel { display: flex; align-items: center; gap: var(--s1); margin: calc(-1 * var(--s2)) 0 var(--s3); font-family: var(--font-ui); font-size: 20px; font-weight: 500; }
.dash-channel .avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--copper-tint); border: 1px solid var(--copper-line); color: var(--copper); font-weight: 600; font-size: 18px; overflow: hidden; }
.dash-channel .avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-channel-name { min-width: 0; overflow-wrap: anywhere; }
/* Who Can Listen (#773): the choice, the setting lines, the platform blocks under Allowed Listeners Only, and the one list. */
.who .platform-block, .who #listener-list { margin-top: 20px; }
fieldset.choices label.sub-option { margin: -4px 0 12px 28px; }
.who .setting-line { margin-top: var(--s1); }
.who .setting-line .platform-mark { margin-right: 8px; }
/* The one list: a name, Remove. */
.people { list-style: none; padding: 0; margin: 0 0 12px; }
.people li { display: flex; align-items: center; gap: 4px 12px; padding: 4px 0; margin: 0; border-bottom: 1px solid var(--line-soft); min-height: 52px; }
.people .who-name { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.people .who-name .hint { display: block; }
.people form { margin: 0; flex: none; }
.add-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 0 0 12px; }
.add-row .field { flex: 1 1 220px; }
.add-row label.check { align-items: center; min-height: 44px; }
.add-row label.check input { margin: 0; }
.together { white-space: nowrap; }

/* The strip: cells that wrap and grow to fill each row, split by 1px of copper hairline (the strip's own background shows in the gaps). */
.status-strip.dash-strip { display: flex; flex-wrap: wrap; gap: 1px; background: var(--copper-line); }
.dash-strip > .strip-item { flex: 1 1 150px; min-width: 0; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 0; }
.dash-strip .btn { max-width: 100%; }
@media (max-width: 479px) { .dash-strip > .strip-link { flex-basis: 100%; } }
.dash-strip .strip-link { align-content: center; justify-items: start; }
.dash-strip .copy-value { margin: 0; }
.dash-strip .strip-link .copy-button .icon { order: 1; }
.dash-strip .strip-test .btn { justify-self: start; margin-top: 4px; }
/* The slim row under the full strip's scroll-out (dashboard.js shows it): under 48px, stuck to the top of the window, laid over the page
   (its negative bottom margin leaves it no room, so showing it moves nothing). The section menu sticks below it. */
html:has(#strip-slim) { --slim-h: 44px; }
.strip-slim { position: sticky; top: 0; z-index: 6; box-sizing: border-box; height: var(--slim-h); margin: 0 calc(-1 * var(--gutter)) calc(-1 * var(--slim-h)); padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--s1) var(--s2); background: var(--bg); border-bottom: 1px solid var(--line); font-family: var(--font-ui); }
.strip-slim .slim-count { font-weight: 600; margin-right: auto; }
.strip-slim .slim-test { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.strip-slim .icon-btn { margin-right: -10px; }
html.has-slim:has(.section-nav) { scroll-padding-top: calc(44px + 2 * var(--s1) + 1px + var(--slim-h)); }
html.has-slim .section-nav { top: var(--slim-h); }
@media (min-width: 1024px) {
    html.has-slim:has(.section-nav) { scroll-padding-top: var(--slim-h); }
    html.has-slim .section-nav { top: calc(var(--slim-h) + var(--s3)); max-height: calc(100vh - var(--s5) - var(--slim-h)); }
}

.your-page-panel { display: grid; gap: var(--s4); }
.your-page-panel .section-head { margin-bottom: var(--s1); }
.image-settings { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .image-settings { grid-template-columns: auto minmax(0, 1fr); align-items: start; } }
.image-setting h3 { margin: 0 0 var(--s1); }
.image-preview.is-picture { display: inline-block; padding: var(--s2); background: var(--raised); border: 1px solid var(--line); border-radius: 8px; line-height: 0; }
.image-preview.is-picture img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.image-preview.is-banner img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.image-preview img[hidden] { display: none; }
.image-upload { display: grid; gap: var(--s1); justify-items: start; margin-bottom: var(--s3); }
.image-upload fieldset { border: 0; padding: 0; margin: 0 0 var(--s1); }
.image-upload [hidden] { display: none; }
.crop { display: grid; gap: var(--s1); margin-bottom: var(--s1); }
.crop-view { --crop-dim: color-mix(in srgb, var(--bg) 85%, transparent); position: relative; width: 100%; max-width: 320px; overflow: hidden; touch-action: none; cursor: grab; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; }
.crop-view.is-picture { aspect-ratio: 1; }
.crop-view.is-banner { aspect-ratio: 3 / 1; }
.crop-view img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.crop-view.is-picture::after { border-radius: 50%; border: 2px solid var(--copper); box-shadow: 0 0 0 100vmax var(--crop-dim); }
.crop-view.is-banner::after { box-shadow: inset 0 0 0 2px var(--copper); }
.crop-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); max-width: 320px; }
.crop-zoom input[type=range] { flex: 1 1 100%; }
/* A Twitch channel's one connection (#1580): its status on one line, then what to press or tick under it. */
.twitch-connection { margin: var(--s2) 0; }
.tc-channel { padding: var(--s1) 0; border-bottom: 1px solid var(--line); }
.discord-server { display: grid; gap: var(--s2); }
.discord-server .add-row { margin: 0; }
.discord-server .add-row .field { min-width: 0; }
.discord-server .add-row input { max-width: 100%; box-sizing: border-box; }
.discord-server > button { justify-self: start; }
.tc-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s1); }
.tc-line form { display: inline; margin: 0; }
.twitch-connection form.needs { margin: var(--s1) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.no-break { white-space: nowrap; }
.adult-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3); }
.adult-choices legend, .adult-choices .hint { flex: 1 1 100%; }
.adult-choices label.check { margin: 0 0 12px; }
#helpers .sub-section { margin-top: var(--s4); }
.helper-list .helper-uncovered { flex: 1 1 100%; }