/* Public page: Dj Mitica for self-hosted Fluxer instances (uses the tokens from style.css). */
body.sh { min-height: 100dvh; }
.sh-wrap { width: min(640px, 100%); margin: 0 auto; padding: 32px 16px 48px; display: grid; gap: 16px; }
.sh-head { display: flex; align-items: center; gap: 14px; }
.sh-head img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.sh-head h1 { font-size: 28px; font-weight: 800; line-height: 1.1; }
.sh-head p { margin: 2px 0 0; }
.sh-lang { margin-left: auto; display: flex; gap: 2px; align-self: flex-start; }
.sh-lang .btn { padding: 4px 9px; }
.sh-lang .btn[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }

.sh-official { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; }
.sh-official > div { flex: 1 1 260px; }
.sh-official p { margin: 2px 0 0; }

.sh-steps { margin: 12px 0 18px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.sh-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 14px; }
.sh-steps li::before {
  content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--amber); font-weight: 700; font-size: 13px;
}
.sh-steps b { font-weight: 650; }

.sh-form { display: grid; gap: 8px; }
.sh-form input[type="text"], .sh-form input[type="password"] { width: 100%; }
.sh-form .btn-block { margin-top: 6px; }
.sh-token { display: flex; gap: 6px; }
.sh-token input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sh-agree { align-items: flex-start; font-size: 13px; color: var(--muted); margin-top: 4px; }
.sh-agree input { margin-top: 2px; flex: none; }

.sh-note { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md); font-size: 14px; border: 1px solid var(--line); background: var(--panel-2); }
.sh-note.warn { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }

.sh-result { display: grid; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.sh-ok { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.sh-result p { margin: 0; }
.sh-invite { display: flex; gap: 6px; }
.sh-invite input { flex: 1; min-width: 0; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.sh-list { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.sh-list b { font-weight: 650; }

.sh-remove summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.sh-remove summary::-webkit-details-marker { display: none; }
.sh-remove summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.sh-remove[open] summary::before { transform: rotate(90deg); }
.sh-remove > p { margin: 10px 0 12px; }
.sh-ok-msg { color: var(--mint) !important; }

.sh-foot { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; padding-top: 4px; }
.sh-foot a { color: var(--muted); }
.sh-foot a:hover { color: var(--text); }
#sh-donate { color: var(--coral); }
.sh-login { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin: 6px 0 4px; display: grid; gap: 8px; }
.sh-login[hidden] { display: none; }
.sh-login summary { cursor: pointer; font-weight: 600; }
.sh-login[open] { gap: 10px; }
.sh-login .sh-steps { margin: 0; }
#sh-res-login a { font-weight: 600; }

@media (max-width: 480px) {
  .sh-wrap { padding-top: 20px; }
  .sh-head h1 { font-size: 24px; }
  .sh-official .btn { width: 100%; }
}

/* ---------- feedback page ---------- */
.fb-intro { margin: 6px 0 16px; }
.fb-types { margin-bottom: 2px; }
.fb-types button[aria-checked="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--amber); }
.fb-hint { margin: 0 0 6px; min-height: 1.2em; }
.fb-text { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; resize: vertical; min-height: 140px; }
.fb-text:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent); }
.fb-count { text-align: right; margin-top: -4px; }
.fb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#fb-as { margin: 4px 0 0; }
#fb-donate { color: var(--coral); }