/*
 * Clip Publisher - only what's its own. The look (colours, fonts, buttons, fields,
 * switches, cards, dialogs, the page frame ...) comes from ui/ui.css (resorted-ui).
 */
.rui-hero .home-move { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.link-btn.danger { color: var(--bad); }
.link-btn.danger:hover { color: #ffa1a1; }
.rui-hero .banner { width: min(100%, 560px); margin: 0 0 18px; text-align: left; }
.btn-icon { width: 20px; height: 20px; }
#publishers > .empty { align-items: center; padding: 34px 18px; text-align: center; }

/* ---- A publisher ---- */
.card.pub .card-head { flex-wrap: nowrap; gap: 12px; }
.card-name {
  flex: 1; min-width: 0; margin-left: -8px; padding: 4px 8px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--text); font: 600 19px var(--font-display); letter-spacing: 0.01em;
}
.card-name:hover { border-color: var(--line2); }
.card-name:focus { outline: none; border-color: var(--c2); background: var(--field); box-shadow: 0 0 0 3px rgba(61, 139, 255, 0.25); }
.state { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.state.ok { background: rgba(60, 207, 145, 0.13); color: #62e2aa; }
.state.warn { background: rgba(245, 185, 66, 0.14); color: #f7c96a; }
.state.off { background: rgba(255, 255, 255, 0.07); color: var(--muted); }
.edit-btn { flex: none; min-width: 70px; }
.card-summary { margin: 6px 0 0; overflow-wrap: anywhere; }
.card-body > .section:first-child { margin-top: 18px; }
.section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.section h2 { margin: 0 0 10px; font-size: 16px; }
.note { margin: 6px 0; }
.note.bad { color: var(--bad); }
.note code, .help code { padding: 1px 5px; border-radius: 5px; background: var(--field); color: var(--text); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row > .field { flex: 1 1 220px; width: auto; }
.last-clip { margin: 12px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.card-foot .note { margin: 0; }

/* Twitch channels */
.card.pub .chips { margin: 0 0 12px; }
.card.pub .chip { gap: 8px; min-height: 34px; padding: 3px; }
.chip img { width: 26px; height: 26px; border-radius: 50%; }
.chip a { color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; }
.chip a:hover { text-decoration: underline; }

/* Discord channels (webhooks) */
.hooks { display: grid; gap: 8px; margin: 0 0 12px; }
.hook { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--field); }
.hook-icon { flex: none; width: 20px; height: 20px; color: #8c9eff; }
.hook-text { flex: 1; min-width: 0; }
.hook-name { font-weight: 600; overflow-wrap: anywhere; }
.hook-status { color: var(--faint); font-size: 13px; }
.hook-status.warn { color: var(--warn); }
.hook-status.bad { color: var(--bad); }
.hook-avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.hook-avatar.guild { border-radius: 8px; }
.hook-avatar.initials { display: grid; place-items: center; overflow: hidden; background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; }
.hook-sep { color: var(--muted); font-weight: 400; }
.hook-edit { flex: none; font-size: 14px; }
.btn.discord-btn { width: 100%; border-color: transparent; background: #5865f2; color: #fff; }
.btn.discord-btn:hover:not(:disabled) { color: #fff; background: radial-gradient(110px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.25), transparent 70%), #4752c4; }
.or { margin: 12px 0 8px; color: var(--faint); font-size: 13px; text-align: center; }
details.help { margin: 10px 0; color: var(--muted); font-size: 14px; }
details.help summary { color: var(--link); cursor: pointer; }
details.help ul, details.help ol { margin: 6px 0; padding-left: 20px; }
details.help li { margin: 4px 0; }

/* A webhook's name and picture */
.hook-editor { display: grid; gap: 10px; margin: -2px 0 4px; padding: 14px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(15, 20, 27, 0.6); }
.hook-editor .note { margin: 0; }
.editor-sub { margin-top: 4px; font-size: 14px; font-weight: 600; }
.who-preview { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #313338; }
.who-preview .who-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.who-name { color: #f2f3f5; font-weight: 600; }
.app-tag { margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; vertical-align: 2px; }
.who-time { margin-left: 8px; color: #949ba4; font-size: 12px; }
.pic-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pic-choice { width: 46px; height: 46px; padding: 2px; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.pic-choice:hover { border-color: var(--line3); }
.pic-choice img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pic-choice.selected { border-color: var(--c1); box-shadow: 0 0 14px -4px var(--c1); }
.hash-field { display: flex; align-items: center; border: 1px solid var(--line2); border-radius: 11px; background: var(--field); transition: border-color 0.15s, box-shadow 0.15s; }
.hash-field:focus-within { border-color: var(--c2); box-shadow: 0 0 0 3px rgba(61, 139, 255, 0.28); }
.hash-field span { padding-left: 14px; color: var(--muted); font-weight: 600; }
.hash-field .field { border: 0; padding-left: 4px; background: transparent; box-shadow: none; }

/* Labels here wrap their field: "<label class=label><span>Text</span><input></label>" */
.card.pub .label { display: grid; gap: 6px; margin: 0; color: var(--muted); font-size: 14px; font-weight: 500; }
.card.pub .label small { font-size: 1em; opacity: 0.8; }
.card.pub .label.inline { display: flex; align-items: center; gap: 10px; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }

/* The message: resorted-ui's message editor (.msg-ed, .embed-box, .ed-item ...) */
.card.pub .msg-ed-form > .label, .card.pub .embed-box .label { gap: 6px; }
.card.pub .ed-item-row .note { margin: 0; white-space: nowrap; }

/* Preview: roughly Discord's look (Discord's own colours) */
.preview { margin: 0; padding: 12px 14px; border-left: 3px solid var(--c2); border-radius: 4px 12px 12px 4px; background: #313338; color: #dbdee1; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.preview .emote { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; }
.preview.embed-preview { display: grid; gap: 6px; border-left: 0; border-radius: 12px; white-space: normal; }
.embed-content { white-space: pre-wrap; }
.embed { display: grid; gap: 8px; max-width: 432px; padding: 10px 14px 12px 12px; border-left: 4px solid var(--c2); border-radius: 4px; background: #2b2d31; }
.embed-main { display: flex; gap: 12px; }
.embed-text { display: grid; flex: 1; gap: 6px; align-content: start; min-width: 0; }
.embed-author { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.embed-author img { width: 24px; height: 24px; border-radius: 50%; }
.embed-author-icon { width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; vertical-align: -5px; }
.embed-title { color: #00a8fc; font-weight: 600; }
.embed-desc { font-size: 14px; white-space: pre-wrap; }
.embed-image, .embed-thumb { display: grid; place-items: center; border-radius: 4px; background: linear-gradient(135deg, #1c3a5c, #1f2b45); color: rgba(255, 255, 255, 0.7); }
.embed-image { aspect-ratio: 16 / 9; font-size: 2rem; }
.embed-thumb { flex: none; width: 80px; height: 45px; font-size: 1rem; }
.embed-avatar { flex: none; width: 64px; height: 64px; border-radius: 4px; object-fit: cover; }
.embed-footer { color: #949ba4; font-size: 12px; }
.mention { padding: 0 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.preview-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-button { padding: 5px 14px; border-radius: 8px; background: #4e5058; color: #fff; font-size: 14px; font-weight: 500; }

/* The "move from Twitch" dialog */
.dialog p { margin: 0 0 12px; }
.dialog-actions form { margin: 0; }

@media (max-width: 560px) {
  /* The name gets its own line; status, switch and Edit below it. */
  .card.pub .card-head { flex-wrap: wrap; }
  .card-name { flex-basis: 100%; }
  .card-head .state { margin-right: auto; }
}