.ranking-name-error{margin:6px 0 0;font-size:12px;color:#fff0ce;line-height:1.6;letter-spacing:0;text-transform:none}
#ranking-name[aria-invalid=true]{border-color:#dc785f;box-shadow:inset 0 0 0 1px #dc785f}
.ranking-save-status{margin:10px 0;font-size:12px;line-height:1.6;text-align:center;letter-spacing:0;text-transform:none}
.ranking-retry-save,.ranking-reload{font-size:12px;min-height:36px;padding:6px 12px;text-transform:none;margin:4px auto 10px;display:block}
.ranking-row.is-self{background:#f2ca5b20;box-shadow:inset 0 0 0 1px #f2ca5b}
.ranking-row:focus,.ranking-row:focus-visible,#ranking-entries:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #f2ca5b}
#ranking-name:focus,#ranking-name:focus-visible{outline:0;box-shadow:inset 0 0 0 1px #f2ca5b}
#ranking-name[aria-invalid=true]:focus,#ranking-name[aria-invalid=true]:focus-visible{border-color:#dc785f;box-shadow:inset 0 0 0 1px #dc785f}
.ranking-retry-save:focus-visible,.ranking-reload:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #f2ca5b}
@media(max-width:600px){.ranking-save-status{font-size:12px;margin:6px 0}.ranking-name-error{font-size:11px}}

/* Keep the character hint independent from the dynamic 12-character helper. */
.home-name label .ranking-name-label{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;min-width:0}
.home-name label small.ranking-name-script-note{display:inline;font:700 10px/1.4 Arial,sans-serif;letter-spacing:0;white-space:nowrap}
.home-name label #ranking-name-help{flex:0 0 auto;white-space:nowrap}