/* components.css: the parts the site and the Windows app share: the focus ring, buttons, fields, the ? help, tags, panels, notices, and the live light.
   This is the source. The copies in site/public/css/shared/ and streamer/ui/shared/ are written by
   scripts/sync-shared-ui.mjs: edit here, never a copy. */
:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
/* On a copper control the ring is silver, or it would vanish into the metal. */
.btn:focus-visible, input[type=range]:focus-visible { outline-color: var(--silver); }
/* Buttons: the .btn family below. A bare <button> has no look of its own; scripts/check-layout.mjs fails on one. */
button.link { min-height: 0; background: none; border: 0; padding: 0; color: var(--silver); text-decoration: underline; display: inline; cursor: pointer; font: inherit; font-family: var(--font-body); font-size: inherit; font-weight: 400; }
button.link:hover { background: none; color: var(--text); }
button.link:disabled, button.help-toggle:disabled { opacity: .6; cursor: default; }
/* The button family (#1577). .btn is copper, the light cut: every real action. .secondary is a filled steel surface one step
   lighter than what it sits on (the panel's fill inside a section or dialog); .provider looks the same, with the platform's logo in its
   own colour. .danger-outline opens a risky step, .danger is only its confirm, .live is the app's crimson Stop. At most one copper
   .btn per group (panel, form, dialog foot). */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); padding: var(--s1) var(--s2); border: 1px solid transparent; border-radius: 6px; background: var(--copper-light); color: var(--copper-ink); font-family: var(--font-ui); font-weight: 600; font-size: 16px; line-height: 1.25; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--copper-light-hover); color: var(--copper-ink); }
.btn.secondary, .btn.provider { background: var(--btn-secondary); color: var(--text); border-color: var(--btn-secondary-edge); font-weight: 500; }
.btn.secondary:hover, .btn.provider:hover { background: var(--btn-secondary-hover); color: var(--text); }
section .btn.secondary, dialog .btn.secondary, section .btn.provider, dialog .btn.provider { background: var(--btn-secondary-panel); }
section .btn.secondary:hover, dialog .btn.secondary:hover, section .btn.provider:hover, dialog .btn.provider:hover { background: var(--btn-secondary-panel-hover); }
.btn.danger-outline { background: none; color: var(--danger-text); border-color: var(--danger-text); font-weight: 500; }
.btn.danger-outline:hover { background: var(--danger-tint); color: var(--danger-text); }
.btn.danger { background: var(--danger); color: var(--white); }
.btn.danger:hover { background: var(--danger-hover); color: var(--white); }
.btn.live { background: var(--live); color: var(--white); }
.btn.live:hover { background: var(--live); filter: brightness(1.15); color: var(--white); }
.btn.compact { height: 32px; min-height: 32px; padding: 4px 12px; font-size: 14px; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .6; cursor: default; }
.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
/* A green tick and the word "Copied" for 2 s: site.js adds .is-copied (the word is the button's .copy-label). */
.copy-value.is-button.is-wired > :not(.copy-button, [role=status]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.copy-button .icon-check, .btn .icon-check, .icon-btn .icon-check { display: none; }
.copy-button.is-copied .icon-copy, .btn.is-copied .icon-copy, .icon-btn.is-copied .icon-copy { display: none; }
.copy-button.is-copied .icon-check, .btn.is-copied .icon-check, .icon-btn.is-copied .icon-check { display: inline; }
.btn.secondary.is-copied, .btn.provider.is-copied { color: var(--ok); }
/* An icon on its own: 20px in a 44px target (16px in 32px when compact). The label is its accessible name, never a tooltip. */
.icon-btn { flex: none; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer; font: inherit; font-family: var(--font-ui); font-size: 14px; }
.icon-btn:hover { background: var(--copper-tint); color: var(--text); }
.icon-btn.remove:hover, .icon-btn.remove:focus-visible { color: var(--error); }
.icon-btn[aria-pressed=true] { color: var(--copper); }
.icon-btn[aria-pressed=true] .icon-star { fill: currentColor; }
.icon-btn[aria-disabled=true] { opacity: .4; cursor: default; }
.icon-btn[aria-disabled=true]:hover { background: none; color: var(--muted); }
.icon-btn.compact { width: 32px; height: 32px; min-height: 32px; }
.icon-btn .copy-label { display: none; }
.icon-btn.is-copied, .icon-btn.is-failed { width: auto; padding: 0 12px; border-radius: 22px; color: var(--ok); }
.icon-btn.is-failed { color: var(--error); }
.icon-btn.is-copied .copy-label, .icon-btn.is-failed .copy-label { display: inline; }
textarea { resize: vertical; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url], input[type=search], textarea { 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); }
input[type=date], select { 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); color-scheme: dark; }
select.compact { width: auto; height: 32px; min-height: 32px; padding: 4px var(--s1); font-size: 14px; }
input[type=file] { width: 100%; min-height: 44px; padding: 9px 0; font: inherit; font-family: var(--font-body); }
/* One checkbox size a scale: 20px, 18px in the compact scale. */
input[type=checkbox] { width: 20px; height: 20px; flex: none; accent-color: var(--silver); }
.compact input[type=checkbox], input[type=checkbox].compact { width: 18px; height: 18px; margin: 0 4px 0 0; vertical-align: middle; }
/* File button (components/file-button). */
.file-button { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.file-button input[type=file] { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.file-button:focus-within .btn { outline: 2px solid var(--copper); outline-offset: 2px; }
.file-button[hidden] { display: none; }
.file-names { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--error); }
textarea { line-height: 1.45; min-height: 112px; }
/* Switch (components/switch). */
button.switch { display: inline-flex; align-items: center; gap: 10px; height: auto; min-height: 44px; background: none; border: 0; padding: 0; color: var(--text); border-radius: 6px; font: inherit; font-family: var(--font-body); font-weight: 400; cursor: pointer; text-align: left; justify-content: center; }
button.switch:hover { background: none; color: var(--text); }
button.switch:disabled { opacity: .6; cursor: default; }
.switch .knob { width: 40px; height: 24px; border-radius: 999px; background: var(--raised-hover); border: 1px solid var(--edge); position: relative; flex: none; }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); }
.switch[aria-checked=true] .knob { background: var(--copper-light); border-color: transparent; }
.switch[aria-checked=true] .knob::after { left: 19px; background: var(--copper-ink); }
button.switch.compact { height: auto; min-height: 32px; gap: 8px; font-size: 14px; }
.switch.compact .knob { width: 32px; height: 20px; }
.switch.compact .knob::after { top: 3px; left: 3px; width: 12px; height: 12px; }
.switch.compact[aria-checked=true] .knob::after { left: 15px; }
@media (prefers-reduced-motion: no-preference) { .switch .knob::after { transition: left .15s, background-color .12s; } }
.platform-mark { vertical-align: -4px; margin-right: 6px; flex: none; }
.platform-mark.is-twitch { color: var(--twitch); }
.platform-mark.is-youtube { color: var(--youtube); }
.platform-mark.is-discord { color: var(--discord); }
.platform-mark.is-kick { color: var(--kick); }
/* A setting's "?" (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. */
button.help-toggle { width: 44px; height: 44px; min-height: 44px; margin: -8px 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: 0; border-radius: 50%; color: var(--muted); flex: none; position: relative; font: inherit; font-family: var(--font-ui); font-weight: 600; font-size: 15px; }
button.help-toggle::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid currentColor; border-radius: 50%; }
button.help-toggle:hover { background: var(--copper-tint); color: var(--text); }
button.help-toggle[aria-expanded=true] { color: var(--copper); }
button.help-toggle.compact { width: 32px; height: 32px; min-height: 32px; margin: -4px 0; }
button.help-toggle.compact::before { inset: 6px; }
.help-text { color: var(--muted); font-size: 15px; background: var(--bg); border-top: 2px solid var(--copper); border-radius: 0 0 6px 6px; padding: 12px var(--s2); margin: 0 0 var(--s2); }
.help-text > :last-child { margin-bottom: 0; }
/* A copper tag is for a plan fact only; .quiet is for a state such as Hidden. */
.tag { color: var(--copper); border: 1px solid var(--copper); border-radius: 4px; padding: 1px 7px; font-size: 14px; white-space: nowrap; }
.tag.quiet { color: var(--muted); border-color: var(--edge); }
/* Panels. Every section is one: on the surface colour, a 2px copper rule along its top edge, 24px
   inside. A hero (a page's opening words under its title) is not a panel. */
section { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--copper); border-radius: 0 0 8px 8px; padding: var(--s3); margin: 0 0 var(--s3); min-width: 0; }
section > :last-child { margin-bottom: 0; }
section.hero { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--s4); }
@media (max-width: 600px) { section { padding: var(--s2); } }
/* Messages about what just happened or what needs doing. On the page they sit on the surface colour;
   inside a panel they are cut into it, on the page colour. */
.notice { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 12px var(--s2); margin: 0 0 var(--s2); }
section .notice, dialog .notice { background: var(--bg); }
.notice > :last-child { margin-bottom: 0; }
/* The live light (components/live-status). */
.live-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 4px var(--copper-tint); }
.live-dot.is-live { background: var(--live); box-shadow: 0 0 0 4px var(--live-glow); animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 7px var(--live-glow); } }
@media (prefers-reduced-motion: reduce) { .live-dot.is-live { animation: none; } }
/* Forced colours (Windows High Contrast): backgrounds are dropped, so what a shape means must not
   rest on a fill alone. */
@media (forced-colors: active) {
    button.help-toggle[aria-expanded=true]::before { border-width: 4px; }
    .btn.danger, .btn.live { border: 3px solid ButtonText; }
    .btn.secondary, .btn.provider { border-color: ButtonText; }
    .switch .knob { border-color: ButtonText; }
    .switch[aria-checked=true] .knob::after { background: Highlight; }
    .live-dot { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
    .live-dot.is-live { background: CanvasText; box-shadow: 0 0 0 2px Canvas, 0 0 0 4px CanvasText; animation: none; }
}