/* A field with its button beside it; the button drops below on a narrow phone. */
.row { display: flex; flex-wrap: wrap; align-items: start; gap: var(--s1); margin: 0 0 var(--s2); }
.row .field { flex: 1 1 260px; }
/* Level with the field, which has its label's line (26px) and a 4px gap above it. */
.row > button { margin-top: 30px; }
/* On a phone the button goes under the field. */
@media (max-width: 440px) { .row .field { flex-basis: 100%; } .row > button { margin-top: 0; } }
/* A box to tick for the whole form (the helper add-on's consent, #940): a line of its own, the button under it. */
.row > .field.whole-line { flex-basis: 100%; }
.row > .whole-line ~ button { margin-top: 0; }
/* A password field and its eye button (#773): the button sits inside the field's right edge, and its eye is crossed out while the password shows. */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 48px; }
.icon-button.password-show { position: absolute; top: 0; right: 2px; color: var(--silver); }
input[type=password]::-ms-reveal { display: none; }
/* Allow Sign-In in words (account page, #773): as large a target as the icon it replaces. */
button.link.allow-sign-in { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s1); }
.password-show .icon-eye-off, .password-show[aria-pressed=true] .icon-eye { display: none; }
.password-show[aria-pressed=true] .icon-eye-off { display: inline; }
.cancel-now-buttons { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s2); }
.copy-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: 0 0 var(--s2); }
.copy-value.is-lines { align-items: flex-start; }
.copy-value-text { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; user-select: all; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; font-family: monospace; white-space: pre-wrap; }
.copy-value .copy-button { flex: none; gap: 6px; }
/* Lists of things with something to do on the right: channels, plans, linked browsers. */
.rows { list-style: none; padding: 0; margin: 0 0 var(--s2); }
.rows > li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); padding: var(--s1) 0; margin: 0; border-bottom: 1px solid var(--line); min-height: 44px; }
.rows .name { font-weight: 600; flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.rows .name a { color: var(--text); text-decoration: none; }
.rows .name a:hover { text-decoration: underline; }
.rows .detail { flex: 1 1 160px; color: var(--muted); }
.rows .end { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.rows form { margin: 0; display: inline; }
/* Tables (the admin page). On a phone each row becomes a block, each cell named by its column. */
table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 0 0 var(--s2); }
th, td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 15px; }
td form { margin: 0; }
@media (max-width: 640px) {
    table, tbody, tr, td { display: block; }
    thead { display: none; }
    tr { border-bottom: 1px solid var(--line); padding: var(--s1) 0; }
    td { border: 0; padding: 2px 0; }
    td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
    td:empty { display: none; }
}
/* A table too wide for 641 to 767px stacks all the way up to 899px (the Kept Sound table, #1050). */
@media (max-width: 899px) {
    table.stacks, .stacks tbody, .stacks tr, .stacks td { display: block; }
    .stacks thead { display: none; }
    .stacks tr { border-bottom: 1px solid var(--line); padding: var(--s1) 0; }
    .stacks td { border: 0; padding: 2px 0; }
    .stacks td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
    .stacks td:empty { display: none; }
}
@media (min-width: 860px) {
    .stacks td[data-label="Sound"] { min-width: 300px; }
}
[data-recording-source] audio { max-width: 100%; }
td button.link { white-space: nowrap; }
/* Level with the text in the other cells: the link keeps its tall tap area above and below. */
td form button.link { margin-top: -10px; }
/* Words not known yet (config/downloads.php): amber and outlined, so they are seen before they ship. */
mark.placeholder { background: none; color: var(--warning); outline: 1px dashed var(--warning); outline-offset: 1px; padding: 0 2px; overflow-wrap: anywhere; }
/* The developer's warning before every app download link (components/developer-note): amber edge,
   full-size text, never folded away. */
.developer-note { border-color: var(--warning); border-left-width: 4px; color: var(--text); }
.developer-note p { margin: 0 0 var(--s1); }
.developer-note a { overflow-wrap: anywhere; }
.step-text .developer-note { margin: 0 0 10px; }
.steps > li.done .developer-note { color: var(--text); }
/* Numbered steps (the dashboard's Getting Started): the number in a ring, or a green check once
   the step is done. */
.steps { list-style: none; padding: 0; margin: 0 0 var(--s2); }
.steps > li { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 var(--s2); }
.steps > li.done .step-text { color: var(--muted); }
.step-mark { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--edge); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--muted); }
.steps > li.done .step-mark { border-color: var(--ok); color: var(--ok); }
.step-text { flex: 1; min-width: 0; padding-top: 2px; }
.step-text form { margin: var(--s1) 0 0; }
.step-text .hint { display: block; }
/* "Start" drawn like the app's own Start button: a label, not something to press. */
.app-button { display: inline-block; background: var(--silver); color: var(--bg); font-weight: 600; font-size: 15px; line-height: 1.4; padding: 0 var(--s1); border-radius: 3px; }
button.copy-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: 0; color: var(--silver); padding: var(--s1) 0; text-align: left; gap: var(--s1); font-family: var(--font-body); font-size: inherit; font-weight: 400; max-width: 100%; }
button.copy-link span { text-decoration: underline; overflow-wrap: anywhere; min-width: 0; }
button.copy-link:hover { background: none; color: var(--text); }
button.copy-link .icon { flex: none; }
.copy-status { color: var(--ok); font-size: 15px; }
.copy-status.is-error { color: var(--muted); }
/* A setting with its "?" (docs/design.md, Help): the explanation opens under it on a click. The ? is
   quiet until it is open; then it is copper, the colour of the current thing. The words wrap inside,
   the "?" stays beside them (#773). */
.setting-line { display: flex; align-items: center; gap: 4px var(--s1); }
.setting-line > label { flex: 0 1 auto; min-width: 0; }
.setting-line h3, .setting-line h4 { margin: 0; }
.setting-line label.check { align-items: center; min-height: 44px; }
.setting-line label.check input { margin: 0; }
/* The dashboard's Links (#933): any number of rows, so every long title or address wraps instead of widening the page. */
.link-list { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.link-list > li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.link-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); }
.link-text { flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }
.icon-group { display: flex; flex-wrap: wrap; }
.icon-group form { margin: 0; }
.link-list > li.is-hidden .link-text { opacity: .7; }
.link-eye .icon-eye-off, .link-eye[aria-pressed=true] .icon-eye { display: none; }
.link-eye[aria-pressed=true] .icon-eye-off { display: inline; }
.link-list details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.link-form label:not(.check) { display: block; margin-top: var(--s1); }
.link-form input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; }
.link-one { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
.link-one > b { flex: 0 1 auto; }
.link-address { min-width: 0; color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.link-list .icon-btn[hidden] { display: none; }
@media (min-width: 640px) {
    .link-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s2); }
    .link-form > :not(label, input[name=title], input[name=url]) { grid-column: 1 / -1; }
    .link-form label[for^="link-title"] { grid-column: 1; grid-row: 1; }
    .link-form label[for^="link-url"] { grid-column: 2; grid-row: 1; }
    .link-form input[name=title] { grid-column: 1; grid-row: 2; }
    .link-form input[name=url] { grid-column: 2; grid-row: 2; }
}
/* A setting that is one of a few choices (Who Can Listen): radio buttons under a legend, no box. */
fieldset.choices { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
fieldset.choices legend { padding: 0; font-weight: 600; }
fieldset.choices label.check { margin: 0 0 12px; }
/* A "?" at the end of a sentence stays beside its last word, however the words wrap. */
p > button.help-toggle { vertical-align: middle; margin-block: -12px; }
fieldset.choices .hint { font-family: var(--font-body); }
/* A new broadcaster key: dots and a Copy Key button, never the key itself (components/masked-key). */
.masked-key-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) 12px; margin: 0 0 var(--s2); }
.key-dots { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; letter-spacing: 2px; color: var(--muted); max-width: 100%; overflow: hidden; white-space: nowrap; }
.key-warning { color: var(--text); }
.icon-button.copy-key { color: var(--silver); }
.copy-key .icon-check, .copy-key.is-copied .icon-copy { display: none; }
.copy-key.is-copied .icon-check { display: block; }
.icon-button.copy-key.is-copied { color: var(--ok); }
/* The tooltip of an icon button at the start of a row opens to the right, so it stays on screen. */
/* It opens above the button, so it never covers the warning under the key. */
/* Once copied, the status beside the button says so; the tooltip would only repeat it over the text above. */
.icon-button.copy-key.is-copied[data-tip]::after { display: none; }
.icon-button.copy-key[data-tip]:hover::after, .icon-button.copy-key[data-tip]:focus-visible::after { right: auto; left: 0; top: auto; bottom: calc(100% + 6px); }
.counts { list-style: none; padding: 0; margin: 0 0 var(--s2); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s1); }
.counts > li { margin: 0; padding: 12px var(--s2); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 2px; align-content: start; }
.count-label { font-family: var(--font-ui); font-size: 15px; font-weight: 500; color: var(--muted); }
.count-value { font-family: var(--font-ui); font-size: 40px; font-weight: 600; line-height: 1.1; }
.nums { font-variant-numeric: tabular-nums; }
/* Linked channels and ways to sign in: compact items in a grid, each the platform's logo, the
   name, then its icon buttons. One column on a phone. */
.channel-grid { list-style: none; padding: 0; margin: 0 0 var(--s2); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--s1); }
.channel-grid > li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px 4px 4px 12px; min-height: 54px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.channel-grid .platform-mark { margin: 0; }
.channel-grid .channel-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.channel-grid a.channel-name { color: var(--text); text-decoration: none; }
.channel-grid a.channel-name:hover { text-decoration: underline; }
.channel-grid .method { flex: none; font-size: 15px; color: var(--muted); font-weight: 500; }
.channel-claim-line { margin: 0 0 var(--s1); }
.channel-claim-line > p { margin: 0 0 var(--s1); }
.icon-actions { display: flex; align-items: center; margin-left: auto; flex: none; }
.icon-actions > form { margin: 0; }
/* A button that is only an icon. Its name is its aria-label; the tooltip (data-tip) shows the same
   on hover and on keyboard focus: the one place hover text is used (docs/design.md). */
.icon-button { position: relative; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: inherit; background: none; border: 0; border-radius: 50%; color: var(--muted); }
.icon-button:hover { background: var(--copper-tint); color: var(--text); }
.icon-button.is-ok { color: var(--ok); }
.icon-button.is-off { color: var(--error); }
.icon-button.is-remove:hover, .icon-button.is-remove:focus-visible { color: var(--error); }
.icon-button[data-tip]:hover::after, .icon-button[data-tip]:focus-visible::after {
    content: attr(data-tip) / ""; position: absolute; z-index: 3; right: 0; top: calc(100% + 6px);
    width: max-content; max-width: min(240px, calc(100vw - 32px)); white-space: normal; text-align: left;
    background: var(--bg); color: var(--text); border: 1px solid var(--edge); border-radius: 6px;
    padding: 6px 10px; font: 15px/1.4 var(--font-body); pointer-events: none;
}
.status-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
.status-icon.is-ok { color: var(--ok); }
/* Dialogs that ask before something is done (site.js opens them), and the new key's. */
dialog.confirm { background: var(--surface); color: var(--text); border: 1px solid var(--edge); border-top: 2px solid var(--copper); border-radius: 0 0 8px 8px; padding: var(--s3); width: min(480px, calc(100vw - 32px)); max-width: none; }
/* The shade behind a dialog that asks first. A token of ::backdrop's own: older browsers do not
   pass :root's custom properties down to it. */
::backdrop { --scrim: rgb(0 0 0 / .6); }
dialog.confirm::backdrop { background: var(--scrim); }
dialog.confirm h2 { margin-bottom: 12px; overflow-wrap: anywhere; }
dialog.confirm .actions { margin: var(--s2) 0 0; }
/* Modals (components/modal): centred on a computer; on a phone sm stays a centred card, md and lg are bottom sheets. The body scrolls
   between a header and a footer that stay in view. */
dialog.modal { background: var(--surface); color: var(--text); border: 1px solid var(--edge); border-top: 2px solid var(--copper); border-radius: 0 0 8px 8px; padding: 0; width: min(480px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal-sm { width: min(360px, calc(100vw - 32px)); }
dialog.modal-lg { width: min(640px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: var(--scrim); }
.modal-head { display: flex; align-items: flex-start; gap: var(--s1); padding: var(--s3) var(--s3) 0; }
.modal-head h2 { flex: 1; margin: 0 0 12px; overflow-wrap: anywhere; }
.modal-head h2:focus { outline: none; }
.modal-x { flex: none; margin: -10px -10px 0 0; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s3); }
.modal-body > :last-child { margin-bottom: 0; }
.modal-footer { margin: 0; padding: var(--s2) var(--s3) var(--s3); }
body.modal-open { overflow: hidden; }
@media (max-width: 480px) {
    dialog.modal, dialog.modal-sm, dialog.modal-lg { width: 100%; max-height: 90vh; max-height: 90dvh; margin: auto 0 0; border-width: 2px 0 0; border-radius: 8px 8px 0 0; }
    .modal-head { padding: var(--s2) var(--s2) 0; }
    .modal-body { padding: 0 var(--s2); }
    .modal-footer { padding: var(--s2); }
}
.expander { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); margin: 0 0 var(--s1); }
.expander > summary { display: flex; align-items: center; gap: var(--s1); width: auto; min-height: 44px; padding: 0 var(--s2); cursor: pointer; font-weight: 600; list-style: none; }
.expander > summary::-webkit-details-marker { display: none; }
.expander > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--silver); border-bottom: 2px solid var(--silver); transform: rotate(-45deg); margin-right: 4px; flex: none; }
.expander[open] > summary::before { transform: rotate(45deg); }
.expander > .inside { background: none; margin: 0; padding: 0 var(--s2) var(--s2); }
.legal-read { margin-left: auto; font-weight: 400; white-space: nowrap; }
.legal-actions { display: inline-flex; flex: none; }
#legal .legal h2 { margin-top: var(--s3); font-size: 18px; }
#legal .legal h2:first-child { margin-top: 0; }
/* The small kind (the password dialog) stays a card in the middle on a phone, with the panels' own edges. */
@media (max-width: 480px) {
    dialog.modal-sm { width: calc(100vw - 32px); margin: auto; border-width: 1px; border-top-width: 2px; border-radius: 0 0 8px 8px; }
}
@media (prefers-reduced-motion: no-preference) {
    dialog.modal[open] { animation: modal-in .15s ease-out; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 480px) {
    dialog.modal[open] { animation-name: sheet-in; animation-duration: .2s; }
    dialog.modal-sm[open] { animation-name: modal-in; animation-duration: .15s; }
}
/* Sign In (components/sign-in-form): on /login and in the "sign-in" modal. Neutral provider rows are the approved exception to copper. */
.sign-in-form { --black: #000000; gap: var(--s2); }
.sign-in-form > *, .sign-in-form form.stack > * { margin: 0; }
.sign-in-form .remember { align-items: center; }
.sign-in-form .remember input { margin: 0; }
.sign-in-form .providers-head { color: var(--muted); }
.sign-in-form .email-sign-in > summary { cursor: pointer; padding-block: 10px; }
.sign-in-form .email-sign-in > form { padding-top: var(--s1); }
.sign-in-form .create-account { border-top: 1px solid var(--line); margin-top: var(--s2); }
.sign-in-form .create-account > summary { cursor: pointer; padding-block: 10px; }
.sign-in-form .create-account > form { padding-top: var(--s1); }
.sign-in-form .providers { display: grid; gap: var(--s1); }
.btn.block { width: 100%; }
.btn .logo { width: 22px; height: 22px; flex: none; }
.logo .f-twitch { fill: var(--twitch); }
.logo .f-discord { fill: var(--discord); }
.logo .f-youtube { fill: var(--youtube); }
.logo .f-kick { fill: var(--kick); }
.logo .f-black { fill: var(--black); }
.logo .f-white { fill: var(--white); }
.sign-in-form .or { display: flex; align-items: center; gap: var(--s2); color: var(--muted); }
.sign-in-form .or::before, .sign-in-form .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.sign-in-form .forgot { justify-self: start; }
.sign-in-form .sign-in-foot { border-top: 1px solid var(--line); padding-top: var(--s2); display: grid; gap: var(--s1); }
.sign-in-form .sign-in-foot p { margin: 0; }
dialog .sign-in-form { padding-bottom: var(--s3); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
/* Tabs (components/tabs; Account, Admin): underlined words in one row that scrolls sideways below 768px, never wrapping (it wraps from 768px: Admin has fourteen). The current tab has
   a copper underline inside the row's own rule. A count is a small badge after the word. */
.tabs { margin: 0 0 var(--s3); border-bottom: 1px solid var(--line); }
.tabs ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.tabs ul::-webkit-scrollbar { display: none; }
.tabs li { flex: none; margin: 0; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; color: var(--muted); font-family: var(--font-ui); font-weight: 500; font-size: 15px; white-space: nowrap; text-decoration: none; border-radius: 6px 6px 0 0; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current] { color: var(--text); box-shadow: inset 0 -2px 0 var(--copper); }
.tab-badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--raised); color: var(--text); font-size: 13px; line-height: 20px; text-align: center; }
@media (min-width: 768px) { .tabs ul { flex-wrap: wrap; overflow: visible; } }
/* The three Account names fit a 390px phone in one row, with room for a scrollbar. */
@media (max-width: 600px) { .tabs ul { gap: 2px; } .tabs a { padding: 0 6px; font-size: 14px; } }
/* The menu of a sectioned page's sections (components/section-menu; the dashboard, the account page,
   the admin page): pills, each with its Lucide icon, in one sticky row that scrolls sideways on a phone
   and a column beside the page from 1024px (below). The section being read (site.js, aria-current) is a
   filled pill whose left edge is a copper border following the pill's rounded end, like "("; its icon
   stays in the text colour, so the two marks do not fight. Every pill has the 3px left border (transparent
   unless current), so marking one moves nothing. */
.with-menu { display: grid; gap: var(--s2); align-items: start; }
.with-menu > * { min-width: 0; }
/* The sticky row's height, so a section a pill jumps to opens below it. */
html:has(.section-nav) { scroll-padding-top: calc(44px + 2 * var(--s1) + 1px); }
.section-nav { position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * var(--gutter)); padding: var(--s1) 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.section-nav > ul { display: flex; gap: var(--s1); margin: 0; padding: 0 var(--gutter); list-style: none; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.section-nav > ul::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .section-nav > ul { scroll-behavior: smooth; } }
.section-nav li { flex: none; margin: 0; }
.section-nav a, .shape-toc a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--s2) 0 12px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; line-height: 1.3; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid transparent; }
.section-nav a .icon { flex: none; }
/* A section's own sections join the row in order, as pills without icons. */
.section-nav li:has(> ul), .section-nav li > ul { display: contents; }
.section-nav li > ul > li { flex: none; margin: 0; list-style: none; }
.section-nav a:hover, .shape-toc a:hover { color: var(--text); background: var(--raised); border-color: var(--raised); }
.section-nav a[aria-current] { color: var(--text); background: var(--raised); border-color: var(--raised); border-left-color: var(--copper); }
/* The email address is longer than a channel name: its item takes the whole row. */
.channel-grid > li.whole-row { grid-column: 1 / -1; }
/* Broadcaster mode (#373): while it is on (html.broadcaster-mode), what must not be seen on stream
   (components/sensitive) shows the word "hidden" and an eye button, and the banner says so. */
.sensitive-mask, .sensitive-show, .mode-banner, .mode-live-note { display: none; }
/* The eye button: hidden here with a selector that outranks any button rule above, and shown by the
   broadcaster-mode rule below, which comes later with the same weight (#652). */
.sensitive > .sensitive-show { display: none; }
.broadcaster-mode .sensitive:not(.is-revealed) > .sensitive-value { display: none; }
.broadcaster-mode .sensitive:not(.is-revealed) > .sensitive-mask { display: inline; color: var(--muted); font-style: italic; }
.broadcaster-mode .sensitive-show { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 44px; height: 44px; margin: -12px 0 -12px 0; color: var(--silver); }
/* An eye while hidden, the eye crossed out while shown (#773). */
.sensitive-show .icon-eye-off, .sensitive.is-revealed > .sensitive-show .icon-eye { display: none; }
.sensitive.is-revealed > .sensitive-show .icon-eye-off { display: inline; }
.broadcaster-mode .sensitive.is-block:not(.is-revealed) { display: flex; gap: 8px; align-items: center; padding: 12px; border: 1px dashed var(--edge); border-radius: 4px; margin: 0 0 12px; }
.broadcaster-mode .mode-banner { display: block; margin: 0 0 var(--s2); }
.mode-live .mode-live-note { display: inline; }
/* A field that may hold an address typed before (the new email, refilled after a refusal): unreadable
   while broadcaster mode is on, until the person is in it, typing. */
.broadcaster-mode input.mask-in-mode:not(:focus) { color: transparent; }
.icon-button.reveal-show { color: var(--silver); }
.shape-toc a { font-family: var(--font-ui); font-size: 15px; color: var(--text); text-decoration: none; background: var(--raised); border-radius: 99px; padding: 8px 14px; min-height: 36px; display: inline-flex; align-items: center; }
.shape-toc a:hover { background: var(--raised-hover); }
/* The menu of a sectioned page's sections beside the page from 1024px; it scrolls with it, so the content's offset always makes sense. */
@media (min-width: 1024px) {
    html:has(.section-nav) { scroll-padding-top: 0; }
    .with-menu { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s4); }
    .section-nav { top: var(--s3); max-height: calc(100vh - var(--s5)); overflow-y: auto; margin: 0; padding: 0; background: none; border: 0; }
    .section-nav > ul { display: grid; gap: 4px; padding: 0; overflow: visible; }
    .section-nav li:has(> ul) { display: list-item; }
    .section-nav li > ul { display: grid; gap: 4px; margin: 4px 0 0 var(--s2); padding: 0; list-style: none; }
    .section-nav li > ul a { min-height: 36px; font-size: 14px; }
    .section-nav a { display: flex; background: none; border-color: transparent; }
    .section-nav a:hover { background: var(--raised); border-color: var(--raised); }
    .section-nav a[aria-current] { background: var(--raised); border-color: var(--raised); border-left-color: var(--copper); }
}
/* The live light and the status strip's cells (components/live-status; the dashboard's strip, the admin page's Live Now). */
/* The dashboard's status strip (#773, from the Broadcast Deck direction): on air or off, who is listening,
   the plan, and the listening link with its Copy Link button, in one band under the title with copper
   hairlines between the cells, so the facts that matter most are seen without scrolling. Two by two on a
   phone with the link across the whole width; one row on a computer. */
.status-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--copper); border-radius: 0 0 8px 8px; margin: 0 0 var(--s3); overflow: hidden; }
.strip-item { padding: 14px var(--s2); display: grid; gap: 2px; align-content: start; min-width: 0; border-top: 1px solid var(--copper-line); }
.strip-item:nth-child(-n+2) { border-top: 0; }
.strip-item:nth-child(even) { border-left: 1px solid var(--copper-line); }
.strip-link { grid-column: 1 / -1; border-left: 0 !important; }
.strip-label { font: 500 13px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* Keeps a cell with a ? no taller than one without. */
.strip-label { display: flex; align-items: center; min-height: 28px; }
.strip-label .help-toggle { margin-right: -8px; }
.strip-value { font-family: var(--font-ui); font-weight: 600; font-size: 24px; line-height: 1.2; display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.strip-note { font-size: 15px; color: var(--muted); }
.strip-link .strip-value { font: 16px/1.4 var(--font-body); flex-wrap: wrap; gap: var(--s1) var(--s2); margin: 4px 0; }
@media (max-width: 600px) { .strip-value { font-size: 20px; } }
/* Nothing here yet (components/empty-state): a quiet well with what is empty and what will show up. */
.empty-state { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 12px var(--s2); margin: 0 0 var(--s2); }
.empty-state p { margin: 0; }
.empty-title { font-family: var(--font-ui); font-weight: 600; }
.label-row { display: flex; align-items: center; gap: 4px; }
/* The one status of a group of settings (site.js, form[data-autosave]), beside the heading. */
.section-head .push { margin-left: auto; }
.save-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: var(--font-ui); font-size: 14px; color: var(--muted); min-height: 24px; }
.save-status.saved { color: var(--ok); }
.save-status.saved::before { content: ""; width: 10px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); }
.save-status.error { color: var(--error); }
.save-status button.link { color: inherit; font-size: inherit; font-family: inherit; }
/* Every text-like field draws the same, typed or not. */
input:not([type]), input[type=url], input[type=search], input[type=number] { width: 100%; min-height: 44px; background: var(--bg); color: var(--text); border: 1px solid var(--edge); border-radius: 6px; padding: var(--s1) 12px; font: inherit; font-family: var(--font-body); }
/* Public pages carry every header item tagged with the roles that see it. An item shows when one of its roles is in
   html[data-roles] (js/first-paint.js, from the mtm_frame cookie); no script is a guest. */
.site-header [data-roles]:not(:is(html:not([data-roles]) *, html[data-roles~="guest"] *)[data-roles~="guest"]):not(:is(html[data-roles~="member"] *)[data-roles~="member"]):not(:is(html[data-roles~="waitlisted"] *)[data-roles~="waitlisted"]):not(:is(html[data-roles~="active"] *)[data-roles~="active"]):not(:is(html[data-roles~="alpha"] *)[data-roles~="alpha"]):not(:is(html[data-roles~="unlisted"] *)[data-roles~="unlisted"]):not(:is(html[data-roles~="broadcaster"] *)[data-roles~="broadcaster"]):not(:is(html[data-roles~="helper"] *)[data-roles~="helper"]):not(:is(html[data-roles~="admin"] *)[data-roles~="admin"]):not(:is(html[data-roles~="pictured"] *)[data-roles~="pictured"]) { display: none; }
.tagline .for-broadcaster, html:is([data-roles~="broadcaster"], [data-roles~="helper"]) .tagline .for-listener { display: none; }
html:is([data-roles~="broadcaster"], [data-roles~="helper"]) .tagline .for-broadcaster { display: inline; }
/* Facts about one thing (components/facts, docs/design.md Records): term over value, three across from 768px. */
.facts { display: grid; grid-template-columns: 1fr; gap: var(--s2); margin: 0 0 var(--s2); }
.facts .fact { min-width: 0; }
.facts dt { color: var(--muted); font-size: 15px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The data table (components/data-table, docs/design.md Tables): search and filters above, then a table where the table's own
   width is 860px or more, cards below that; the compact tables (analytics, promo codes) switch at 640px. A container query, not a
   media query: the admin menu beside the page from 1024px narrows the table again, so no viewport width says when it fits.
   The 860 and 640 blocks are the same rules for two sets of tables. Scoped to .data-table, so other tables keep the generic rules. */
.data-table { margin: 0 0 var(--s2); container-type: inline-size; }
.data-table .table-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s1) var(--s2); margin: 0 0 var(--s1); }
.data-table .table-controls .field { margin: 0; min-width: 0; max-width: 100%; }
.data-table .table-search { flex: 1 1 220px; }
.data-table .table-controls select { width: auto; max-width: 100%; min-width: 0; min-height: 44px; }
.data-table .table-buttons { display: flex; align-items: center; gap: var(--s2); min-height: 44px; }
.data-table .table-count { margin: 0 0 var(--s1); }
.data-table-scroll { position: relative; max-width: 100%; overflow-x: auto; margin: 0 0 var(--s1); }
.data-table table { margin: 0; border-collapse: separate; border-spacing: 0; }
.data-table th.sortable a { color: inherit; text-decoration: none; white-space: nowrap; }
.data-table th[aria-sort] a { color: var(--text); }
.data-table .nowrap { white-space: nowrap; }
.data-table td .detail { display: block; color: var(--muted); font-size: 15px; font-weight: 400; }
.data-table td { overflow-wrap: break-word; }
.data-table .pager { margin: 0; }
.data-table .pager-links { display: flex; gap: var(--s1); }
.data-table .pager .btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); }
.data-table .pager .btn[aria-disabled=true] { color: var(--muted); border-color: var(--line); cursor: default; pointer-events: none; }
@container (width >= 860px) {
    .data-table:where(:not(.analytics-table, .promo-table)) table { display: table; min-width: 860px; }
    .data-table:where(:not(.analytics-table, .promo-table)) thead { display: table-header-group; }
    .data-table:where(:not(.analytics-table, .promo-table)) tbody { display: table-row-group; }
    .data-table:where(:not(.analytics-table, .promo-table)) tr { display: table-row; padding: 0; border-bottom: 0; }
    .data-table:where(:not(.analytics-table, .promo-table)) th, .data-table:where(:not(.analytics-table, .promo-table)) td { display: table-cell; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
    .data-table:where(:not(.analytics-table, .promo-table)) td:empty { display: table-cell; }
    .data-table:where(:not(.analytics-table, .promo-table)) td[data-label]::before { content: none; }
    .data-table:where(:not(.analytics-table, .promo-table)) th:first-child, .data-table:where(:not(.analytics-table, .promo-table)) td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); max-width: 13em; padding-right: var(--s2); }
}
@container (width < 860px) {
    .data-table:where(:not(.analytics-table, .promo-table)) .data-table-scroll { overflow-x: visible; }
    .data-table:where(:not(.analytics-table, .promo-table)) table, .data-table:where(:not(.analytics-table, .promo-table)) tbody, .data-table:where(:not(.analytics-table, .promo-table)) tr, .data-table:where(:not(.analytics-table, .promo-table)) td { display: block; }
    .data-table:where(:not(.analytics-table, .promo-table)) tr { border-bottom: 1px solid var(--line); }
    .data-table:where(:not(.analytics-table, .promo-table)) td { border: 0; padding: 2px 0; }
    .data-table:where(:not(.analytics-table, .promo-table)) td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
    .data-table:where(:not(.analytics-table, .promo-table)) td:empty { display: none; }
    .data-table:where(:not(.analytics-table, .promo-table)) thead { display: block; }
    .data-table:where(:not(.analytics-table, .promo-table)) thead tr { display: flex; flex-wrap: wrap; gap: 0 var(--s2); border-bottom: 0; padding: 0; }
    .data-table:where(:not(.analytics-table, .promo-table)) th:not(.sortable) { display: none; }
    .data-table:where(:not(.analytics-table, .promo-table)) th.sortable { display: block; padding: 6px 0; border: 0; }
    .data-table:where(:not(.analytics-table, .promo-table)) tbody tr { padding: var(--s1) 0; }
    .data-table:where(:not(.analytics-table, .promo-table)) td:first-child { font-weight: 600; }
    .data-table:where(:not(.analytics-table, .promo-table)) td:has(> .dash:only-child), .data-table:where(:not(.analytics-table, .promo-table)) td.no-value { display: none; }
}
@container (width >= 640px) {
    .data-table:where(.analytics-table, .promo-table) table { display: table; }
    .data-table:where(.analytics-table, .promo-table) thead { display: table-header-group; }
    .data-table:where(.analytics-table, .promo-table) tbody { display: table-row-group; }
    .data-table:where(.analytics-table, .promo-table) tr { display: table-row; padding: 0; border-bottom: 0; }
    .data-table:where(.analytics-table, .promo-table) th, .data-table:where(.analytics-table, .promo-table) td { display: table-cell; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
    .data-table:where(.analytics-table, .promo-table) td:empty { display: table-cell; }
    .data-table:where(.analytics-table, .promo-table) td[data-label]::before { content: none; }
    .data-table:where(.analytics-table, .promo-table) th:first-child, .data-table:where(.analytics-table, .promo-table) td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); max-width: 13em; padding-right: var(--s2); }
}
@container (width < 640px) {
    .data-table:where(.analytics-table, .promo-table) .data-table-scroll { overflow-x: visible; }
    .data-table:where(.analytics-table, .promo-table) table, .data-table:where(.analytics-table, .promo-table) tbody, .data-table:where(.analytics-table, .promo-table) tr, .data-table:where(.analytics-table, .promo-table) td { display: block; }
    .data-table:where(.analytics-table, .promo-table) tr { border-bottom: 1px solid var(--line); }
    .data-table:where(.analytics-table, .promo-table) td { border: 0; padding: 2px 0; }
    .data-table:where(.analytics-table, .promo-table) td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
    .data-table:where(.analytics-table, .promo-table) td:empty { display: none; }
    .data-table:where(.analytics-table, .promo-table) thead { display: block; }
    .data-table:where(.analytics-table, .promo-table) thead tr { display: flex; flex-wrap: wrap; gap: 0 var(--s2); border-bottom: 0; padding: 0; }
    .data-table:where(.analytics-table, .promo-table) th:not(.sortable) { display: none; }
    .data-table:where(.analytics-table, .promo-table) th.sortable { display: block; padding: 6px 0; border: 0; }
    .data-table:where(.analytics-table, .promo-table) tbody tr { padding: var(--s1) 0; }
    .data-table:where(.analytics-table, .promo-table) td:first-child { font-weight: 600; }
    .data-table:where(.analytics-table, .promo-table) td:has(> .dash:only-child), .data-table:where(.analytics-table, .promo-table) td.no-value { display: none; }
}
.link-buttons { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: var(--s2) 0; }
.link-button { display: inline-flex; align-items: center; gap: 4px; }
.link-button form { margin: 0; }
.tag.error { color: var(--error); border-color: var(--error); }
details.new-form > summary.btn { list-style: none; width: fit-content; margin: 0 0 var(--s2); }
details.new-form > summary.btn::-webkit-details-marker { display: none; }
details.new-form[open] > summary.btn { color: var(--copper-ink); }
.data-table.analytics-table table { min-width: 0; }
.data-table.analytics-table th, .data-table.analytics-table td { padding: 8px 8px 8px 0; font-size: 15px; }
.data-table.analytics-table th { vertical-align: bottom; }
.data-table.promo-table summary { padding: 0; }
.data-table.promo-table td { vertical-align: middle; }
.data-table.promo-table table { min-width: 0; }
.data-table.promo-table details { margin: 0; }
.data-table.promo-table td { padding: 6px 8px 6px 0; font-size: 15px; line-height: 1.25; }