/* OSQA default skin: the one style sheet of the public pages
   (base_content.html; the sign-in pages add auth.css; the admin pages,
   osqaadmin/base.html, use Django admin's style sheets and admin.css).

   Sections, in cascade order (later sections override earlier ones, so keep
   the order when editing):
     1. Legacy base            (was style.css)
     2. Modern layout, tokens  (was modern.css: colour variables, dark mode,
                                header, lists, posts, phone breakpoint 640px)
     3. Profile pages          (was profile.css)
     4. Ask and edit pages     (was ask.css)
     5. List pages             (was lists.css)
     6. Header search box      (was searchbox.css)
     7. Accessibility, print   (was ui.css)
     8. Markdown editor        (toolbar, dialogs: osqa.editor.js)
     9. Profile menu           (was user.css, screen only)
    10. Markdown help page     (was markdown_help.css)
    11. API pages              (docs at /api/, API tokens settings page)

   Unused rules are found with e2e/css_coverage.py (see e2e/README.md). */

/* ======================================================================
   1. Legacy base
   Legacy base (the original OSQA style sheet): element defaults and old
   layout rules that the sections below still build on.
   ====================================================================== */

body {
    /*overflow-y: scroll;
    height: 100%; */
    margin: 0;
    padding: 0;
}

div {
    margin: 0 auto;
    padding: 0;
}

h1, h2, h3, ul, li, form, img, p {
    border: medium none;
    margin: 0;
    padding: 0;
}

label {
    vertical-align: middle;
}

.login label {
    display: block;
}


input, select {
    vertical-align: middle;
}

p {
    margin-bottom: 13px;
}

a {
    text-decoration: none;
}

.clear {
  clear: both;
  width: 0px;
  height: 0px;
}

.badges a {
    color: #763333;
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

.spacer3 {
    clear: both;
    height: 30px;
    line-height: 30px;
    visibility: hidden;
}

h1 {
    font-size: 160%;
    padding: 5px 0;
    overflow: hidden;
}

h2 {
    font-size: 140%;
    padding: 3px 0;
}

h3 {
    font-size: 120%;
    padding: 3px 0;
}

ul {
    list-style: disc outside none;
    margin-bottom: 1em;
    margin-left: 20px;
    padding-left: 0;
}

ol {
    list-style: decimal outside none;
    margin-bottom: 1em;
    margin-left: 30px;
    padding-left: 0;
}

td ul {
    vertical-align: middle;
}

li input {
    margin: 3px 3px 4px;
}

pre {
    margin-bottom: 10px;
    overflow: auto;
}

code {
    font-size: 90%;
}


blockquote blockquote {
    margin: 0;
    padding: 0;
}

#wrapper, #announcement {
    margin: auto;
}



#CALeft {
    position: relative;
}



#ground {
    text-align: center;
}

#top {
    text-align: right;
}

#top a {
    text-align: right;
}



#nav a {
    display: block;
}



#nav a#nav_ask {
    text-decoration: none;
}



#searchBar {
    text-align: center;
    background-color: #B6C4E2;
    border-color: #EEEEEC #A9ACA5 #BABDB6 #EEEEEC;
    border-style: solid;
    border-width: 1px;
    padding: 4px 0 0;
}

#searchBar .options {
    color: #333333;
    font-size: 120%;
    padding: 3px 0;
}

#searchBar .options input {
    margin: 0 3px 0 15px;
}

#searchBar .options input:hover {
    cursor: pointer;
}

#listA {
    padding: 0 0;
    width: 100%;
}

.thousand {
    color: orange;
}

.short-summary {
    position: relative;
}

#listA .short-summary:first-of-type {
    border-top: 0;
}








.short-summary .votes, .short-summary .status, .short-summary .views {
    text-align: center;
}


.short-summary .favorites {
    width: 24px;
    float: left;
    text-align: center;
}

#question-table {
    margin-bottom: 10px;
}

.questions-count-label {
    font-size: 14px;
    margin-left: 5px;
}

.reputation-history {
    font-size: 13px;
}

#diagram {
    float: left;
    width: 550px;
    height: 250px;
}

.reputation-list {
    height: 300px;
    overflow-y: auto;
    word-wrap: break-word;
}

.reputation-change {
    float: left;
    margin-right: 5px;
    padding: 2px 10px;
    font-weight: bold;
    text-align: right;
}

.questions-count {
    font-family: sans-serif;
    margin-top: 3px;
    margin-right: 5px;
    padding: 0 0 5px 0;
}


.boxA h3 {
    margin: 0 0 4px;
    padding: 0;
}




.boxC p {
    margin-bottom: 8px;
}

.boxC p.nomargin {
    margin: 0;
}

.boxC p.info-box-follow-up-links {
    margin: 0;
    text-align: right;
}




.paginator .prev a, .paginator .prev a:visited, .paginator .next a, .paginator .next a:visited {
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
    color: #777777;
    font: bold 100% sans-serif;
    padding: 2px 4px 3px;
}





.paginator .page:hover, .paginator .prev a:hover, .paginator .next a:hover {
    border: 1px solid #777777;
    text-decoration: none;
}

.paginator .text {
    font: bold 100% sans-serif;
    padding: 0.3em;
}

.paginator-container-left {
    padding: 5px 0 10px;
}

.tags {
    display: block;
    font-family: sans-serif;
    margin-top: 5px;
}



.tag-number {
    font-family: sans-serif;
    font-weight: 700;
}

.marked-tags {
    margin-bottom: 5px;
    margin-top: 0;
}

.medal {
    color: #333333;
    font-weight: bold;
}

a.medal {
    text-decoration: none;
    color: #333333;
}

a.medal:hover {
    border-left: 1px solid #E7E296;
    border-style: solid;
    border-width: 1px;
    color: #333333;
    text-decoration: none;
}

.tabBar {
    clear: both;
    width: 100%;
}

.tabsA {
    font-weight: bold;
    position: relative;
}

.tabsA a {
    display: block;
    text-decoration: none;
}




.headQuestions {
    border-bottom: 0 solid #777777;
}

.headUsers {
    border-bottom: 0 solid #777777;
}

.headMedals {
    border-bottom: 0 solid #777777;
}

.headNormal {
    font-size: 15px;
    font-weight: bold;
    text-align: left;
}

.questions-related {
    font-weight: 700;
    word-wrap: break-word;
}

.questions-related p {
    font-size: 100%;
    margin-bottom: 10px;
}



.vote-buttons {
    text-align: center;
}


ul.errorlist li {
    color: #990000;
    font-weight: normal;
    margin-left: 0px;
    margin-top: 5px;
}


.answer-body {
    margin: 0 0 20px 0;
}


/* Fixes OSQA-143 IE8 text overflow issue */



.answered {
    background: none repeat scroll 0 0 #E5EBF8;
    color: #314362;
}

.answered-accepted, .answer-votes.answered-accepted {
    background: none repeat scroll 0 0 #E6F8DD;
    color: #3A6231;
}

.unanswered {
    background: none repeat scroll 0 0 #F3E3E1;
    color: #6B2B28;
}


.tagsList {
    list-style-type: none;
    margin: 0;
    padding: 0;
}


.badge-list {
    list-style-type: none;
    margin: 0;
}

.badge-list a {
    color: #3060A8;
}

.badge-list a.medal {
    color: #333333;
}



.list-item {
    margin-left: 15px;
}

.list-item li {
    font-size: 13px;
    line-height: 20px;
    list-style-type: disc;
    margin-bottom: 10px;
}

.form-row {
    line-height: 25px;
}

.submit-row {
    clear: both;
    display: block;
    line-height: 30px;
    padding-top: 10px;
}

.error {
    color: darkred;
    font-size: 10px;
    margin: 0;
}

.small {
    font-size: 11px;
}

span.form-error {
    color: #990000;
    font-size: 90%;
    font-weight: normal;
    margin-left: 5px;
}


.wmd-preview {
    background-color: #F5F5F5;
    margin-top: 10px;
    min-height: 20px;
    overflow: hidden;
}

.preview-toggle {
    text-align: left;
    width: 100%;
}

.preview-toggle span:hover {
    cursor: pointer;
}


.revision {
    font-size: 13px;
    margin: 10px 0;
    width: 100%;
}

.revision .rev-arrow {
    cursor: pointer;
}

.revision .header {
    background-color: #EEEEEE;
    padding: 5px;
}

.revision .author {
    background-color: #E9E9FF;
}

.revision .summary {
    padding: 5px 0 10px;
}

.revision .summary span {
    /**background-color: yellow;**/
    display: inline;
    padding-left: 3px;
    padding-right: 3px;
}

.revision h1 {
    font-size: 130%;
    font-weight: 600;
    padding: 15px 0;
}

.revision-mark {
    display: inline-block;
    font-size: 90%;
    overflow: hidden;
    text-align: left;
    width: 200px;
}

.revision-number {
    font-family: sans-serif;
    font-size: 300%;
    font-weight: bold;
}

.revision .body {
    margin-bottom: 50px;
    padding-left: 10px;
}



.count {
    color: #777777;
    font-family: Arial;
    font-size: 200%;
    font-weight: 700;
}

.scoreNumber {
    font-family: Arial;
    font-size: 35px;
    font-weight: 800;
    line-height: 40px;
}

.user-details {
    font-size: 13px;
}

.user-about {
    line-height: 20px;
    overflow: auto;
    padding: 10px;
}

.user-edit-link {
    background: url("../images/edit.png") no-repeat scroll 0 0 transparent;
    padding-left: 20px;
}

.user-info-table {
    margin-bottom: 10px;
}

.relativetime {
    text-decoration: none;
}

.answer-summary {
    clear: both;
    display: block;
    padding: 3px;
}

.answer-votes {
    background-color: #EEEEEE;
    color: #555555;
    float: left;
    font-family: Arial;
    font-size: 110%;
    font-weight: bold;
    height: 15px;
    margin-right: 10px;
    padding: 4px 4px 5px;
    text-align: center;
    text-decoration: none;
    width: 20px;
}

.vote-count {
    color: #777777;
    font-family: Arial;
    font-size: 160%;
    font-weight: 700;
}

.user-action-1 {
    color: #333333;
    font-weight: bold;
}

.user-action-2 {
    color: #CCCCCC;
    font-weight: bold;
}

.user-action-3 {
    color: #333333;
}

.user-action-4 {
    color: #333333;
}

.user-action-7 {
    color: #333333;
}

.user-action-8 {
    background-color: #CCCCCC;
    color: #763333;
    font-weight: bold;
    padding: 3px;
}

.question-title-link a {
    color: #0077CC;
    font-weight: bold;
}

.answer-title-link a {
    color: #333333;
}

.post-type-1 a {
    font-weight: bold;
}

.post-type-3 a {
    font-weight: bold;
}

.post-type-2 a {
    color: #333333;
}

.post-type-4 a {
    color: #333333;
}

.post-type-8 a {
    color: #333333;
}




.score, .accept_rate {
    color: #333333;
    font-size: 110%;
    font-weight: bold;
    margin-left: 3px;
}

.footerLinks {
    color: #3060A8;
    font-size: 13px;
}

.footerLinks a {
    color: #3060A8;
}

.user {
    line-height: 140%;
    display: inline-block;
}

.user ul {
    list-style-type: none;
    margin: 0;
}

.user .thumb {
    clear: both;
    display: inline;
    float: left;
    margin-right: 4px;
}

.message {
    background-color: #EEEEEE;
    border: 1px solid #AAAAAA;
    margin: 10px 0;
    padding: 5px;
}

.message p {
    margin-bottom: 0;
}

.darkred {
    color: darkred;
}

.submit {
    font-size: 120%;
    height: 40px;
}


.ask-body {
    padding-right: 10px;
}

.notify {
    position: fixed;
    z-index: 100;
}

* html .notify {
    position: absolute;
}


#close-notify {
    cursor: pointer;
    text-decoration: none;
}


.big {
    font-size: 15px;
}

.strong {
    font-weight: bold;
}

.orange {
    color: #D64000;
    font-weight: bold;
}

.about div {
    border-top: 1px dashed #AAAAAA;
    padding: 10px 5px;
}

.about div.first {
    border-top: medium none;
    padding-top: 0;
}

.about p {
    margin-bottom: 10px;
}

.about a {
    color: #D64000;
    text-decoration: underline;
}

.about h3 {
    font-size: 15px;
    font-weight: 700;
    line-height: 30px;
    padding-top: 0;
}

.nomargin {
    margin: 0;
}

.inline-block {
    display: inline-block;
}

#changepw-form li input {
    left: 150px;
}

.user-profile-tool-links {
    font-weight: bold;
    padding-bottom: 10px;
}

.post-controls, .tags-container {
    font-size: 11px;
    line-height: 12px;
    min-width: 200px;
}

.tags-container {
    margin: 0 0 16px 0;
}

#question-tags {
    margin-top: 15px;
}

.post-controls {
    float: left;
}

#question-controls .tags {
    margin: 0 0 3px;
}

.post-update-info {
    display: inline-block;
    float: right;
}

.post-update-info p {
    padding: 0;
}

.post-update-info img {
    float: left;
    margin: 4px 8px 0 0;
}

#tagSelector {
    padding-bottom: 2px;
}

#hideIgnoredTagsCb {
    margin: 0 2px 0 1px;
}

a.sidebar_button {
    background: none repeat scroll 0 0 #EEEEEE;
    color: black;
    cursor: pointer;
    font-size: 11px;
    padding: 3px;
}

a.sidebar_button:hover {
    background-color: #777777;
    color: white;
    text-decoration: none;
}

a.post-vote, .favorite-mark, a.accept-answer {
    display: block;
    height: 24px;
    position: relative;
    width: 24px;
}

a.post-vote.up {
    background: url("../images/vote-arrow-up.png") no-repeat scroll center center transparent;
}

a.post-vote.up.on, a.post-vote.up:hover {
    background: url("../images/vote-arrow-up-on.png") no-repeat scroll center center transparent;
}

a.post-vote.down {
    background: url("../images/vote-arrow-down.png") no-repeat scroll center center transparent;
}

a.post-vote.down.on, a.post-vote.down:hover {
    background: url("../images/vote-arrow-down-on.png") no-repeat scroll center center transparent;
}

a.accept-answer {
    background: url("../images/vote-accepted.png") no-repeat scroll center center transparent;
}

a.accept-answer.on, a.accept-answer:hover {
    background: url("../images/vote-accepted-on.png") no-repeat scroll center center transparent;
}

.community-wiki {
    font-size: 11px;
    color: #333;
    background: url("../images/wiki.png") no-repeat left center;
    padding-left: 36px;
    margin: 6px 0 0 0;
    min-height: 32px;
    line-height: 15px;
}

.post-score, .comments-char-left-count {
    color: #777777;
    font-family: Arial;
    font-size: 165%;
    font-weight: bold;
    padding: 0 0 3px;
}

.favorite-mark {
    background: url("../images/vote-favorite-off.png") no-repeat scroll center center transparent;
}

.favorite-mark.on, a.favorite-mark:hover {
    background: url("../images/vote-favorite-on.png") no-repeat scroll center center transparent;
}

.favorite-count {
    color: #777777;
    font-size: 100%;
    font-weight: bold;
    padding: 0;
}

.comments-container {
    clear: both;
}

.comments-container {
    padding: 0;
}



.comment {
    margin: 0;
    position: relative;
}

.comment.not_top_scorer {
    display: none;
}

.comment-score {
    vertical-align: top;
    text-align: center;
}

.comment-text {
    padding: 0;
}


.comment-info {
    text-align: right;
    vertical-align: middle;
}


a.comment-like, a.comment-delete, a.comment-edit, a.comment-convert, a.comment-convert-to-question {
    margin-left: 2px;
}

a.comment-like {
    background: url("../images/comment-like.png") no-repeat scroll center center transparent;
}

a.comment-like:hover, a.comment-like.on {
    background: url("../images/comment-like-on.png") no-repeat scroll center center transparent;
}

a.comment-delete {
    background: url("../images/comment-delete.png") no-repeat scroll center center transparent;
}

a.comment-delete:hover {
    background: url("../images/comment-delete-hover.png") no-repeat scroll center center transparent;
}

a.comment-convert {
    background: url("../images/convert-off.png") no-repeat scroll center center transparent;
}

a.comment-convert:hover {
    background: url("../images/convert-hover.png") no-repeat scroll center center transparent;
}

a.comment-convert-to-question {
    background: url("../images/convert-to-question-off.png") no-repeat scroll center center transparent;
}

a.comment-convert-to-question:hover {
    background: url("../images/convert-to-question-hover.png") no-repeat scroll center center transparent;
}

a.comment-edit {
    background: url("../images/comment-edit.png") no-repeat scroll center center transparent;
}

a.comment-edit:hover {
    background: url("../images/comment-edit-hover.png") no-repeat scroll center center transparent;
}

.comment-form-container {
    display: none;
    padding-top: 12px;
    margin-bottom: 8px;
}

.comment-form-widgets-container input {
    vertical-align: top;
}

.comment-form-widgets-container textarea {
    height: 80px;
    width: 80%;
    float: left;
}

span.comment-chars-left {
    font-size: 11px;
    margin-right: 20px;
}


div.comment-tools span.comment-tools-separator {
    float: left;
    display: block;
    line-height: 17px;
    color: #ccc;
    font-size: 15px;
    margin-left: 1px;
}

div.comment-tools .comments-showing {
    color: #777777;
    font-size: 11px;
}

div.comment-tools a {
    cursor: pointer;
}


.action-link {
    color: #777777;
    cursor: pointer;
    padding: 3px;
}

.action-link a {
    color: inherit;
}

.action-link a.ajax-command:hover {
    background-color: #777777;
    color: #FFFFFF;
    text-decoration: none;
}

.action-link-separator {
    color: #CCCCCC;
}

.deleted {
    background-color: #F4E7E7;
}

#command-loader {
    position: fixed;
    }


.comment-form-buttons {
    width: 18%;
    height: 100%;
    float: right;
}

.comment-form-buttons input {
    line-height: 12px;
    font-size: 110%;
    border: 1px solid #999;
}

.comment-form-buttons input {
    width: 100%;
    height: auto;
    padding: 2px 0 4px 0;
    vertical-align: middle;
    margin-top: 6px;
}

.comments-char-left-count.warn {
    color: orange;
}

#ask-related-questions {
    max-height: 150px;
    overflow-y: auto;
}

.context-menu {
    position: relative;
}

div.dialog, .context-menu-dropdown {
    position: absolute;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 2px 2px 5px #3060A8;
}

.context-menu-dropdown {
    display: none;
    right: 0px;
    top: 1.5em;
    text-align: left;
    list-style-type: none;
    z-index: 500;
}

.context-menu-dropdown li.item {
    padding: 4px 8px 4px 8px;
    -webkit-border-radius: 5px;
}

.context-menu-dropdown li.item a {
    color: inherit;
    white-space: nowrap;
    text-decoration: none;
}

.context-menu-dropdown li.separator {
    text-align: center;
    padding: 10px 0 4px 0;
    font-size: 120%;
    font-weight: bold;
}

.context-menu-dropdown li.item:hover {
    background-color: #3060A8;
    color: white;
}

.context-menu-dropdown span {
    margin-right: 4px;
    float: left;
    width: 16px;
    height: 16px;
}

.context-menu-trigger {
    cursor: pointer;
}

div.dialog .dialog-content {
    z-index: 1000;
}

div.dialog .dialog-buttons {
    margin: 0px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

.dialog-yes, .dialog-no {
    -webkit-border-radius: 3px;
    background-color: #3060A8;
    color: white;
    vertical-align: baseline;
    font-weight: bold;
    border: 0;
}

div.dialog.confirm, div.dialog.warning {
    text-align: center;
}


div.dialog.prompt {
    width: 355px;
}

div.dialog.prompt .dialog-content select, div.dialog.prompt .dialog-content textarea, div.dialog.prompt .dialog-content input[type=text] {
    width: 100%;
}

.suspended-user {
    text-decoration: line-through;
}

.feed-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
}

div#subscription_list {
    width: 100%;
    /*float:left;*/
}

.subscription_switch {
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    vertical-align: baseline;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
.subscription_switch:active {
    position: relative;
}

div.subscription_summary {
    border-top: 2px dotted #CCCCCE;
    overflow: hidden;
    padding: 3px 0px 5px 0;
    position: relative;
    width:100%;
    margin-top: 5px;
}

div.subscription_title {
    /*float:left;
    line-height:30px;*/
    margin-top: 5px;
    font-size: 16px;
    font-weight:bold;
}

a.subscription_unsubscribe_button {
    float:left;
    font-size: 11px;
    font-weight:bold;

    margin-right:15px;
    margin-top: 5px;
}

div.subscription_tags {
    font-family: sans-serif;
    float:left;
}
div.subscription_tags a, span.tag {
    background-color: #EEEEEE;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    color: #777777;
    font-size: 11px;
    font-weight: normal;
    padding: 1px 8px;
    text-decoration: none;
    white-space: nowrap;
}
div.subscription_tags a:hover {
    background-color: #356FCB;
    color: #FFFFFF;
}

/* ======================================================================
   2. Modern layout, tokens and components
   ====================================================================== */

/*
 * Modern, responsive layer for the default skin.
 *
 * Loaded after style.css and before the admin's custom CSS, so it overrides
 * the legacy fixed-width (990px) layout and can itself be overridden from
 * Admin > Custom CSS. The colour tokens below are the easiest place to
 * re-brand the site.
 */

:root {
    --brand: #2c5aa0;
    --brand-dark: #1f4278;
    --brand-soft: #eaf1fb;
    --accent: #c2410c;
    --accent-dark: #9a3412;
    --success: #1a7f37;
    --success-soft: #e6f6ea;
    --danger-soft: #fdeeee;
    --danger-text: #a4282a;
    --accent-soft: #fdf0ea;
    --warn-bg: #fff8e1;
    --warn-bg-strong: #ffefad;
    --warn-border: #f0d58a;
    --warn-border-strong: #e3c95b;
    --warn-text: #5c4300;
    --highlight-bg: #fffbe6;
    --info-border: #d6e2f5;
    --code-bg: #f6f8fa;
    --code-inline-bg: #eff1f3;
    --quote-text: #3d4752;
    --hover-overlay: rgba(0, 0, 0, .06);
    --text: #1f2328;
    --muted: #5f6b7a;
    --border: #dfe3e8;
    --border-subtle: #eef0f3;
    --border-strong: #c8d3e3;
    --surface: #ffffff;
    --background: #f5f7fa;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --content-width: 1140px;
    --sidebar-width: 280px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---- Base ---------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--background);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Keep the footer at the bottom of short pages. */
body > .wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > .wrapper > * {
    width: 100%;
    flex: none;
}

body > .wrapper > #wrapper {
    flex: 1 0 auto;
}

input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
}

a {
    color: var(--brand);
}

a:hover {
    color: var(--brand-dark);
}

p {
    font-size: inherit;
    line-height: 1.6;
}

h1, h2, h3 {
    line-height: 1.3;
}

img, video, iframe, embed, object {
    max-width: 100%;
}

img {
    height: auto;
}

pre {
    width: auto;
    max-width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--code-bg);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
}

code {
    font-family: var(--mono);
    white-space: normal;
}

pre code {
    white-space: inherit;
}

:not(pre) > code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--code-inline-bg);
}

blockquote {
    max-width: none;
    margin: 0 0 12px;
    padding: 8px 14px;
    border-left: 4px solid var(--border);
    background: var(--code-bg);
    color: var(--quote-text);
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---- Page layout --------------------------------------------------- */

#roof, #wrapper, #announcement, #ground, #searchBar, #custom_header, #custom_footer {
    width: 100%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

#wrapper {
    width: 100%;
    padding: 0 16px;
    background: transparent;
}

#room {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 0;
    background: transparent;
}

#CALeft, #CAFull {
    float: none;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

#CAFull {
    flex-basis: 100%;
}

#CARight {
    float: none;
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    min-width: 0;
}

#room > #tail {
    flex: 1 1 100%;
}

#tail:empty, .spacer3 {
    display: none;
}

/* ---- Header -------------------------------------------------------- */

#roof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    max-width: none;
    margin: 0;
    padding: 10px max(16px, calc((100% - var(--content-width)) / 2 + 16px)) 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

#roof + .clear {
    display: none;
}

#logo {
    float: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

#logo a {
    display: inline-block;
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
}

#logo img {
    display: block;
    max-height: 48px;
    width: auto;
}

#top {
    float: none;
    width: auto;
    margin: 0 0 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 6px;
}

#top a {
    height: auto;
    margin: 0;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
}

#top a:hover {
    background: var(--background);
    color: var(--text);
}

#top img {
    vertical-align: middle;
}

#nav {
    float: none;
    width: 100%;
    margin: 0;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

/* The tabs scroll by themselves when they don't fit; "ask a question" stays beside them. */
#nav .nav-tabs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

#nav .nav-tabs::-webkit-scrollbar {
    display: none;
}

#nav a, #nav a.on {
    float: none;
    flex: none;
    height: auto;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
}

#nav a:hover {
    color: var(--text);
    text-decoration: none;
    border-bottom-color: var(--border);
}

#nav a.on {
    color: var(--brand);
    font-weight: 600;
    border-bottom-color: var(--brand);
}

#nav a#nav_ask, #nav a#nav_ask.on {
    float: none;
    flex: none;
    margin: 0 0 6px auto;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

#nav a#nav_ask:hover {
    background: var(--accent-dark);
    text-decoration: none;
}

/* ---- Search (in the header row) ---------------------------------- */

#roof #searchBar {
    order: 1;
    flex: 1 1 320px;
    min-width: 0;
    width: auto;
    max-width: 560px;
    margin: 0 0 0 24px;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

#roof #top {
    order: 2;
}

#roof #nav {
    order: 3;
}

#announcement {
    margin-top: 16px;
    padding: 10px 16px;
    border-radius: var(--radius);
    background: var(--brand-soft);
}

/* ---- Buttons and forms --------------------------------------------- */

input[type="submit"], input[type="button"], button, .submit, a.button {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--brand);
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}

input[type="submit"]:hover, input[type="button"]:hover, button:hover, .submit:hover, a.button:hover {
    border-color: var(--brand-dark);
    background: var(--brand-dark);
    color: #fff;
    text-decoration: none;
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"],
input[type="number"], input:not([type]), select, textarea {
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    line-height: 1.4;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input:not([type]):focus, select:focus, textarea:focus {
    border-color: var(--brand);
    outline: 2px solid rgba(44, 90, 160, .2);
    outline-offset: 0;
}

textarea, #editor, .wmd-preview {
    width: 100%;
}

#editor {
    min-height: 220px;
    resize: vertical;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.5;
}

.wmd-preview {
    border-radius: 6px;
    padding: 12px;
}

/* ---- Headings, tabs and paging ------------------------------------- */

.headNormal {
    margin-bottom: 16px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
}


.headNormal h1 a {
    color: var(--text);
}

.tabBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: auto;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    background: none;
}

.headQuestions, .headUsers, .headMedals {
    float: none;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.tabsA {
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    height: auto;
    padding: 3px;
    border-radius: 8px;
    background: var(--background);
}

.tabsA a {
    float: none;
    height: auto;
    margin: 0;
    padding: 5px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.tabsA a:hover {
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}

.tabsA a.on, .tabsA a.on:hover {
    background: var(--surface);
    color: var(--brand);
    font-weight: 600;
    box-shadow: var(--shadow);
}

.paginator .page, .paginator .page a:visited, .paginator .curr,
.paginator .prev a, .paginator .next a {
    display: inline-block;
    min-width: 32px;
    margin: 2px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: center;
}


.paginator .page:hover, .paginator .prev a:hover, .paginator .next a:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
}


/* ---- Tags and medals ----------------------------------------------- */

.tags {
    line-height: 2.2;
}

.tags a, span.tag, .post-tag {
    display: inline-block;
    margin: 0 2px 2px 0;
    padding: 1px 9px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
    text-decoration: none;
}

.tags a:hover, a.post-tag:hover {
    background: var(--brand);
    color: #fff;
    text-decoration: none;
}

.medal {
    display: inline-block;
    padding: 2px 10px 2px 8px;
    border: 1px solid var(--warn-border);
    border-radius: 999px;
    background: var(--warn-bg);
    font-size: 13px;
    line-height: 1.6;
}

a.medal:hover {
    background: var(--warn-bg-strong);
    border-color: var(--warn-border-strong);
}

/* ---- Question list ------------------------------------------------- */

#listA {
    float: none;
    background: transparent;
}

.short-summary {
    float: none;
    width: 100%;
    display: flex;
    gap: 16px;
    border-top: 1px solid var(--border);
    overflow: visible;
}

.user-stats-table .short-summary {
    width: 100%;
}

.short-summary .counts {
    float: none;
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.short-summary .votes, .short-summary .status, .short-summary .views {
    float: none;
    width: 58px;
    height: auto;
    margin: 0;
    padding: 6px 2px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.3;
}

.short-summary .counts .item-count {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.short-summary .status.answered {
    border-color: var(--success);
    background: none;
    color: var(--success);
}

.short-summary .status.answered-accepted {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.short-summary .status.unanswered {
    border-color: transparent;
    background: var(--danger-soft);
    color: var(--danger-text);
}

.short-summary .question-summary-wrapper {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.short-summary h2 {
    padding: 0 0 4px;
}

.short-summary h2 a {
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.short-summary .summary {
    color: var(--muted);
    margin-bottom: 4px;
}

.short-summary .userinfo {
    color: var(--muted);
    font-size: 12px;
}

/* ---- Question and answers ------------------------------------------ */

.vote-buttons {
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

a.post-vote, .favorite-mark, .accept-answer {
    border-radius: 6px;
}

a.post-vote:hover, a.favorite-mark:hover, .accept-answer:hover {
    background-color: var(--background);
}

.post-score {
    padding: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
}

.favorite-count {
    font-family: inherit;
}

.question-body, .answer-body {
    min-height: 0;
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: break-word;
}

.question-body img, .answer-body img {
    max-width: 100%;
}

div.question-body p, div.answer-body p {
    max-width: none;
}

.question-body table, .answer-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.answer {
    width: auto;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.accepted-answer {
    margin: 0 -12px;
    padding: 16px 12px;
    border-left: 3px solid var(--success);
    border-bottom-color: var(--border);
    border-radius: 0 6px 6px 0;
    background: var(--success-soft);
}

.answered-by-owner {
    background: none;
}

.accepted-answer .comments-container, .answered-by-owner .comments-container {
    background: none;
}

.focusedAnswer {
    background: var(--highlight-bg);
}

.post-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    margin: 8px 0;
    font-size: 13px;
}

.post-controls .action-link a, .context-menu-trigger {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 4px;
    color: var(--muted);
}

.post-controls .action-link a:hover, .context-menu-trigger:hover {
    background: var(--background);
    color: var(--text);
    text-decoration: none;
}

.action-link-separator {
    display: none;
}

.post-update-info {
    margin: 0 0 8px 12px;
}


.post-update-info img {
    width: 32px;
}

.comments-container {
    border-top: 1px solid var(--border);
}

.comment {
    font-size: 13px;
}

.question-status {
    margin: 12px 0;
    padding: 12px;
    border-radius: 6px;
    background: var(--warn-bg);
}

.preview-toggle {
    margin-top: 6px;
    color: var(--muted);
    font-weight: 500;
}

/* ---- Sidebar ------------------------------------------------------- */

.boxA, .boxC {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow-wrap: break-word;
}


.boxA .body {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
}


.boxC p {
    font-size: 13px;
}

.questions-related p {
    line-height: 1.45;
}

/* ---- Lists: tags, users, badges ------------------------------------ */

.tagsList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px 12px;
    min-height: 0;
}

.tagsList li {
    float: none;
    width: auto;
}


.questions-count-label {
    color: var(--text);
    font-weight: 600;
}

/* Profile > reputation: graph and history side by side, stacked when narrow. */
.reputation-history {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
}

.reputation-history #diagram {
    float: none;
    flex: 1 1 360px;
    width: auto;
    min-width: 0;
}

.flot-svg text {
    fill: var(--muted);
}

.reputation-list {
    float: none;
    flex: 1 1 300px;
    width: auto;
}

.reputation-change {
    border-radius: 6px;
    background: var(--code-inline-bg);
    font-family: inherit;
}


/* ---- Footer and notifications -------------------------------------- */

#ground {
    width: 100%;
    max-width: none;
    margin-top: 32px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
}

#ground a {
    color: var(--muted);
}

#ground a:hover {
    color: var(--brand);
}

#ground p {
    margin: 6px 0 12px;
}

.footerLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Messages ("First time here?", email not validated, ...) as a toast. */
.notify {
    top: auto;
    right: 16px;
    bottom: 16px;
    left: auto;
    width: auto;
    max-width: min(440px, calc(100% - 32px));
    padding: 12px 48px 12px 16px;
    border: 1px solid var(--warn-border);
    border-radius: 10px;
    background: var(--warn-bg);
    color: var(--warn-text);
    font-weight: 500;
    text-align: left;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
}

.notify p {
    margin: 4px 0;
    font-size: 14px;
}

.notify p.darkred {
    color: inherit;
}

#close-notify {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
}

#close-notify:hover {
    text-decoration: none;
}

/* Shown on a saved copy of a page served by the service worker (osqa.pwa.js). */
.offline-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 8px 16px;
    border-bottom: 1px solid var(--warn-border);
    background: var(--warn-bg);
    color: var(--warn-text);
    font-weight: 600;
    text-align: center;
}

.offline-banner[hidden], #offline-none[hidden] {
    display: none;
}

/* "Confirm your email address" under the header ({% confirm_banner %}, auth/confirm_banner.html). */
.confirm-banner {
    max-width: var(--content-width);
    margin: 16px auto 0;
    padding: 0 16px;
}

.confirm-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 16px;
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    background: var(--warn-bg);
    color: var(--warn-text);
}

.confirm-banner-text {
    margin: 0;
}

.confirm-banner-email {
    overflow-wrap: anywhere;
    font-weight: 600;
}

.confirm-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.confirm-banner-actions form {
    margin: 0;
}

.confirm-banner-actions a, button.confirm-banner-button {
    color: var(--warn-text);
    font-weight: 600;
    text-decoration: underline;
}

button.confirm-banner-button {
    padding: 0;
    border: 0;
    background: none;
}

button.confirm-banner-button:hover {
    border: 0;
    background: none;
    color: var(--warn-text);
}

.offline-page ul {
    margin: 12px 0;
    padding-left: 20px;
    list-style: disc;
}

.offline-page li {
    margin: 6px 0;
}

.offline-page li a {
    text-decoration: underline;
}

.offline-saved-at {
    color: var(--muted);
}

/* Confirmation and prompt dialogs. */
div.dialog {
    min-width: 260px;
    max-width: calc(100vw - 24px);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 16px 40px rgba(16, 24, 40, .2);
}

div.dialog .dialog-content {
    padding: 18px 18px 64px;
    font-size: 14px;
}

div.dialog.confirm {
    font-size: 16px;
    font-weight: 600;
}

div.dialog.confirm .dialog-buttons, div.dialog.warning .dialog-buttons {
    justify-content: center;
}

div.dialog .dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    height: auto;
    padding: 0 14px 14px;
}

.dialog-yes, .dialog-no {
    margin: 0;
    padding: 8px 16px;
    border-radius: 6px;
    line-height: 1.2;
}

.dialog-no {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.dialog-no:hover {
    border-color: var(--muted);
    background: var(--background);
    color: var(--text);
}

div.dialog.prompt .dialog-content select, div.dialog.prompt .dialog-content textarea,
div.dialog.prompt .dialog-content input[type=text] {
    padding: 8px 10px;
    border: 1px solid var(--border);
}

/* AJAX activity indicator (was an animated GIF). */
#command-loader, #command-loader.success {
    bottom: 16px;
    left: 16px;
    width: 22px;
    height: 22px;
    border: 3px solid var(--brand-soft);
    border-top-color: var(--brand);
    border-radius: 50%;
    background: none;
    animation: osqa-spin .7s linear infinite;
    z-index: 1000;
}

#command-loader.success {
    border-color: var(--success);
    animation: none;
}

@keyframes osqa-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #command-loader {
        animation-duration: 2s;
    }
}

/* ---- Desktop polish: icons ----------------------------------------- */

/* SVG icons replace the old PNG sprites; colours are baked into the data URIs. */
a.post-vote.up, a.post-vote.down, .favorite-mark, .accept-answer {
    display: block;
    border: 1px solid var(--border);
    border-radius: 50%;
    background-color: var(--surface);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    transition: border-color .15s, background-color .15s;
}

a.post-vote, .favorite-mark, .accept-answer {
    width: 38px;
    height: 38px;
}





.post-score {
    margin: 4px 0;
}

.favorite-mark {
    margin-top: 10px;
    border-color: transparent;
    background-size: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b0' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E");
}

.favorite-mark.on, a.favorite-mark:hover {
    border-color: transparent;
    background-color: var(--warn-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5b301' stroke='%23e0a100' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E");
}

/* Small star in the question list (favourite count). */
.short-summary .favorite-mark {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    border: 0;
    background-size: 16px;
}

.accept-answer {
    margin-top: 10px;
    border-color: transparent;
    background-size: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
}

.accept-answer.on, .accept-answer:hover {
    border-color: transparent;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231a7f37'/%3E%3Cpath d='M7.5 12.5l3 3L16.5 9.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.accept-answer:not(.on):hover {
    opacity: .6;
}

/* Comment actions: quiet until the comment is hovered or focused. */
a.comment-like, a.comment-edit, a.comment-delete, a.comment-convert, a.comment-convert-to-question {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    opacity: .55;
    transition: opacity .15s, background-color .15s;
}

.comment:hover .comment-info a, .comment-info a:focus, a.comment-like.on {
    opacity: 1;
}

.comment-info a.comment-like:hover, .comment-info a.comment-edit:hover, .comment-info a.comment-delete:hover,
.comment-info a.comment-convert:hover, .comment-info a.comment-convert-to-question:hover {
    background-color: var(--background);
}

a.comment-like, a.comment-like:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v9H4v-9zM7 11l4-7a2 2 0 012 2v4h5.5a2 2 0 012 2.3l-1.2 6A2 2 0 0117.3 20H7'/%3E%3C/svg%3E");
}

a.comment-like.on {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eaf1fb' stroke='%232c5aa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v9H4v-9zM7 11l4-7a2 2 0 012 2v4h5.5a2 2 0 012 2.3l-1.2 6A2 2 0 0117.3 20H7'/%3E%3C/svg%3E");
}

a.comment-edit, a.comment-edit:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E");
}

a.comment-delete, a.comment-delete:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E");
}

a.comment-convert, a.comment-convert:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E");
}

a.comment-convert-to-question, a.comment-convert-to-question:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 114 2c-.9.6-1.5 1.1-1.5 2.2M12 17h.01'/%3E%3C/svg%3E");
}

/* ---- Desktop polish: question list --------------------------------- */

@media (min-width: 641px) {
    /* Stats as a quiet right-aligned column instead of three boxes. */
    .short-summary .counts {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        width: 96px;
        padding-top: 2px;
    }

    .short-summary .votes, .short-summary .status, .short-summary .views {
        display: flex;
        align-items: baseline;
        gap: 4px;
        width: auto;
        padding: 0;
        border: 0;
        background: none;
        color: var(--muted);
        font-size: 13px;
    }

    .short-summary .counts .item-count {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
    }

    .short-summary .status.answered, .short-summary .status.answered-accepted {
        padding: 1px 8px;
        border: 1px solid var(--success);
        border-radius: 999px;
    }

    .short-summary .status.answered .item-count {
        color: var(--success);
    }

    .short-summary .status.answered-accepted, .short-summary .status.answered-accepted .item-count {
        background: var(--success);
        color: #fff;
    }

    .short-summary .status.unanswered {
        background: none;
        color: var(--muted);
    }

    .short-summary .favorites {
        order: 9;
        display: flex;
        align-items: center;
        gap: 2px;
        width: auto;
    }

    .short-summary .favorites .item-count {
        font-size: 12px;
    }
}

.short-summary {
    padding: 16px 0;
}

.short-summary h2 a {
    color: var(--brand);
}

.short-summary h2 a:hover {
    color: var(--brand-dark);
    text-decoration: none;
}

.short-summary .question-summary-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.short-summary .question-summary-wrapper > h2, .short-summary .question-summary-wrapper > .summary {
    flex-basis: 100%;
}

.short-summary .tags {
    order: 1;
    flex: 1 1 auto;
    margin: 0;
    line-height: 1.8;
}

.short-summary .userinfo {
    order: 2;
    float: none;
    margin: 0 0 0 auto;
    white-space: nowrap;
}

/* ---- Desktop polish: posts and comments ---------------------------- */

.headNormal h1 {
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -.01em;
}


.post-update-info img {
    border-radius: 50%;
}

.comments-container {
    margin-top: 12px;
}

.comment {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid var(--border-subtle);
}

.comment-score {
    float: none;
    width: 28px;
    height: auto;
    padding: 0;
    color: var(--muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

.comment-text {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-size: 14px;
}

.comment-text p {
    display: inline;
    margin: 0;
    font-size: inherit;
}

.comment-info {
    flex: 1 1 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    height: auto;
    margin: 2px 0 0;
    padding-left: 28px;
    color: var(--muted);
    font-size: 12px;
}

.comment-info * {
    float: none;
    height: auto;
    margin: 0;
}

.comment-info img {
    border-radius: 50%;
}

.comment-info a.comment-user {
    font-weight: 600;
}

div.comment-tools {
    padding: 8px 0 0 28px;
    border-top: 1px solid var(--border-subtle);
    text-align: left;
}

div.comment-tools a {
    padding: 0;
    background: none;
    color: var(--muted);
    font-size: 13px;
}

div.comment-tools a:hover {
    background: none;
    color: var(--brand);
    text-decoration: underline;
}

.context-menu-dropdown {
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

/* ---- Desktop polish: sidebar, lists, profile ----------------------- */

.boxC h3, .boxA h3, .boxC h2 {
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.questions-count {
    font-size: 26px;
    font-weight: 650;
    color: var(--brand);
}

.userList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.user {
    width: auto;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.user:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.user .thumb img, .user-info-table img.gravatar, .gravatar {
    border-radius: 50%;
}

#medalList > div {
    display: grid;
    grid-template-columns: 24px minmax(170px, auto) 1fr;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
    line-height: 1.4 !important;
}

#medalList .badgeListItem, #medalList .badgeListDescription {
    height: auto;
    min-width: 0;
    max-width: none;
}


.scoreNumber {
    color: var(--text);
}

.user-about {
    height: auto;
    max-height: 220px;
    width: auto;
    border-radius: var(--radius);
    background: var(--background);
}

.subscription_switch {
    display: inline-block;
    height: auto;
    margin: 4px 0;
    padding: 6px 12px;
    border: 1px solid var(--brand);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: none;
    color: var(--brand) !important;
    font: 600 13px/1.2 var(--font);
    text-shadow: none;
}

.subscription_switch:hover, .subscription_switch:active {
    top: 0;
    background: var(--brand-soft);
    color: var(--brand-dark) !important;
    text-decoration: none;
}

.video-embed {
    position: relative;
    max-width: 640px;
    margin: 8px 0 12px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- Desktop polish: footer ---------------------------------------- */

#ground {
    padding: 28px 16px;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 16px;
    text-align: left;
}

.footerLinks {
    gap: 4px 20px;
}

.footerLinks .link-separator {
    display: none;
}

.footerLinks a {
    font-size: 14px;
}

#ground .footer-meta {
    margin: 0;
    font-size: 13px;
}

#ground .footer-osqa {
    max-width: 640px;
    margin: 6px auto 0;
    color: var(--muted);
    font-size: 12px;
}

/* ---- Tablets ------------------------------------------------------- */

@media (max-width: 960px) {
    #roof #searchBar {
        margin-left: 8px;
    }

    #room {
        flex-direction: column;
        align-items: stretch;
    }

    #CALeft, #CAFull, #CARight {
        flex: none;
        width: 100%;
    }

    #CARight {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
    }

    #CARight > * {
        margin-bottom: 0;
    }
}

/* ---- Phones -------------------------------------------------------- */

@media (max-width: 640px) {
    body {
        font-size: 15px;
    }

    #roof {
        padding: 8px 12px 0;
        gap: 4px 8px;
    }

    #logo img {
        max-height: 36px;
    }

    #top a {
        padding: 6px;
        font-size: 13px;
    }

    #nav {
        margin: 0 -12px;
        padding: 0 12px;
        width: calc(100% + 24px);
    }

    #nav {
        gap: 8px;
    }

    #nav .nav-tabs {
        gap: 0;
    }

    #nav a, #nav a.on {
        padding: 10px 7px;
        font-size: 14px;
    }

    #nav .nav-tabs a:first-child {
        padding-left: 2px;
    }

    /* Beside the tabs, never over them: the tabs scroll in the space left
       (with a fade on the hidden side, osqa.scrolltabs.js). */
    #nav a#nav_ask, #nav a#nav_ask.on {
        margin: 0 0 6px;
        padding: 7px 10px;
        font-size: 13px;
        white-space: nowrap;
    }

    #wrapper {
        padding: 0 10px;
    }

    #roof #searchBar {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
        margin: 4px 0;
    }

    #roof #nav {
        order: 4;
    }

    #room {
        gap: 16px;
        padding: 12px 0;
    }

    #CALeft, #CAFull {
        padding: 14px 12px;
        border-radius: var(--radius);
    }

    .headNormal h1 {
        font-size: 20px;
    }

    .tabBar {
        flex-direction: column;
        align-items: stretch;
    }

    .tabsA {
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tabsA a {
        flex: none;
    }

    /* Question list: counts become a compact row above the title. */
    .short-summary {
        flex-direction: column;
        gap: 6px;
        padding: 12px 0;
    }

    .short-summary .counts {
        order: 0;
        gap: 6px;
    }

    .short-summary .votes, .short-summary .status, .short-summary .views {
        display: flex;
        align-items: baseline;
        gap: 4px;
        width: auto;
        padding: 2px 8px;
        font-size: 12px;
    }

    .short-summary .counts .item-count {
        font-size: 14px;
    }

    .short-summary .favorites {
        display: none;
    }

    .short-summary h2 a {
        font-size: 16px;
    }

    .short-summary .userinfo {
        float: none;
        margin-top: 4px;
    }

    /* Question page (see also "Question page" below) */
    a.post-vote, .favorite-mark, .accept-answer {
        width: 40px;
        height: 40px;
    }

    .question-body, .answer-body {
        font-size: 15px;
    }

    .post-controls {
        float: none;
    }

    .post-update-info {
        float: none;
        display: block;
        width: 100%;
        margin: 0 0 8px;
    }

    .accepted-answer {
        margin: 0 -12px;
        padding: 16px 12px 16px 9px;
    }

    /* Forms: full width, 16px text so iOS does not zoom on focus. */
    input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"],
    input[type="number"], input:not([type]), select, textarea {
        width: 100%;
        font-size: 16px;
    }

    input[type="radio"], input[type="checkbox"] {
        width: auto;
    }

    .tagsList {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    #medalList .badgeListDescription {
        max-width: none;
    }

    #CARight {
        grid-template-columns: 1fr;
    }

}

/* ---- Tag autocomplete dropdown ------------------------------------- */

.ui-widget.ui-autocomplete.osqa-autocomplete {
    z-index: 1100;
    max-height: 300px;
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .15);
    font-family: inherit;
}

.ui-menu.osqa-autocomplete .ui-menu-item-wrapper {
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

.ui-menu.osqa-autocomplete .ui-menu-item-wrapper.ui-state-active {
    margin: 0;
    border: 0;
    background: var(--brand-soft);
    color: var(--brand-dark);
}

/* ---- Code highlighting (highlight.js) -------------------------------- */

:root {
    --hl-keyword: #cf222e;
    --hl-string: #0a3069;
    --hl-comment: #6e7781;
    --hl-number: #0550ae;
    --hl-title: #8250df;
    --hl-builtin: #953800;
    --hl-addition: #116329;
    --hl-addition-bg: #dafbe1;
    --hl-deletion: #82071e;
    --hl-deletion-bg: #ffebe9;
}

.hljs {
    background: transparent;
    color: inherit;
}

.hljs-keyword, .hljs-doctag, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_,
.hljs-meta .hljs-keyword {
    color: var(--hl-keyword);
}

.hljs-string, .hljs-regexp, .hljs-meta .hljs-string {
    color: var(--hl-string);
}

.hljs-comment, .hljs-code, .hljs-formula, .hljs-quote {
    color: var(--hl-comment);
    font-style: italic;
}

.hljs-number, .hljs-literal, .hljs-attr, .hljs-attribute, .hljs-selector-attr, .hljs-selector-class,
.hljs-selector-id, .hljs-meta, .hljs-operator, .hljs-symbol, .hljs-link {
    color: var(--hl-number);
}

.hljs-title, .hljs-title.class_, .hljs-title.function_, .hljs-section, .hljs-name, .hljs-selector-tag {
    color: var(--hl-title);
}

.hljs-built_in, .hljs-variable, .hljs-params, .hljs-property, .hljs-subst {
    color: var(--hl-builtin);
}

.hljs-addition {
    background: var(--hl-addition-bg);
    color: var(--hl-addition);
}

.hljs-deletion {
    background: var(--hl-deletion-bg);
    color: var(--hl-deletion);
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: 700;
}

/* ---- Draft notice ---------------------------------------------------- */

.draft-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--info-border);
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--text);
    font-size: 14px;
}

.draft-notice .draft-discard, .draft-notice .draft-discard:hover {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

/* ---- Image paste / drop -------------------------------------------- */

textarea#editor.drop-target {
    border-color: var(--brand);
    outline: 2px dashed var(--brand);
    outline-offset: -6px;
    background: var(--brand-soft);
}

.upload-error {
    margin: 6px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--danger-text);
    font-size: 13px;
}

/* ---- Duplicates ------------------------------------------------------ */

.question-duplicate {
    margin: 12px 0 8px;
    padding: 12px 14px;
    border: 1px solid var(--info-border);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    background: var(--brand-soft);
    font-size: 15px;
}

.question-duplicate a {
    font-weight: 600;
}

.question-duplicate-count {
    color: var(--muted);
    font-size: 13px;
}

div.dialog.prompt .close-duplicate-label {
    display: block;
    margin: 10px 0 4px;
    font-size: 13px;
    font-weight: 600;
}

div.dialog.prompt .close-move-answers {
    width: 100%;
    margin-top: 8px;
}

/* ---- @mentions -------------------------------------------------------- */

a.mention {
    padding: 0 3px;
    border-radius: 4px;
    background: var(--brand-soft);
    font-weight: 500;
    white-space: nowrap;
}

.mention-suggestions {
    position: absolute;
    z-index: 1200;
    min-width: 200px;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    list-style: none;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .15);
}

.mention-suggestions li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

.mention-suggestions li.active {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.mention-suggestions .mention-rep {
    color: var(--muted);
    font-size: 12px;
}

/* ---- Tag descriptions and synonyms ---------------------------------- */

/* The tag page's "tag wiki": the description (or its excerpt, with the rest
   behind "Read the full description"), "Also called: ..." and, for
   moderators, "Manage tag". */
.tag-info {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 16px;
    margin: 4px 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    background: var(--surface);
    font-size: 14px;
}

.tag-wiki-body {
    flex: 1 1 260px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tag-wiki-summary, .tag-wiki-summary p {
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
}

p.tag-wiki-summary, .tag-wiki-empty {
    margin: 0 0 6px;
}

.tag-wiki-empty {
    color: var(--muted);
    font-style: italic;
}

.tag-description p {
    margin: 0 0 6px;
}

.tag-wiki-more {
    margin: 0 0 6px;
}

.tag-wiki-more summary {
    color: var(--brand);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.tag-wiki-more[open] summary {
    margin-bottom: 6px;
}

.tag-synonyms {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.tag-synonym {
    color: var(--text);
    font-weight: 600;
}

.tag-synonym-list .tag, .headNormal .tag {
    display: inline-block;
    margin: 0 4px 0 0;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
}

a.tag-edit-link.button {
    flex: none;
    padding: 6px 12px;
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
}

a.tag-edit-link.button:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.tag-excerpt {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
}

.tag-edit-form textarea {
    display: block;
    width: 100%;
    margin: 6px 0 10px;
}

.tag-synonym-list {
    margin: 10px 0;
    list-style: none;
}

.tag-synonym-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.tag-synonym-list form {
    margin-left: auto;
}

.tag-synonym-remove, .tag-synonym-remove:hover,
.tag-synonym-list .tag-synonym-remove, .tag-synonym-list .tag-synonym-remove:hover {
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--danger-text);
    font-size: 13px;
}

.tag-synonym-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 20px;
}

.tag-edit-error {
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--danger-text);
}

/* ---- Your data and account ------------------------------------------ */

.account-section {
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.account-section h2 {
    margin-bottom: 6px;
    font-size: 17px;
}

.account-danger {
    border-color: var(--danger-text);
}

.account-delete-form {
    display: grid;
    gap: 6px;
    max-width: 380px;
}

.account-delete-form label {
    margin-top: 6px;
    font-size: 14px;
}

input[type="submit"].account-delete-button, input[type="submit"].account-delete-button:hover {
    justify-self: start;
    margin-top: 10px;
    border-color: #b42318;
    background: #b42318;
    color: #fff;
}

.account-warning {
    color: var(--danger-text);
    font-weight: 600;
}

/* ---- Avatars --------------------------------------------------------- */

/* A grey circle (not alt text) when Gravatar is blocked or unreachable. */
img.gravatar {
    display: inline-block;
    border-radius: 50%;
    background: var(--code-inline-bg);
    color: transparent;
    font-size: 0;
    object-fit: cover;
    vertical-align: middle;
}

/* ---- Post author card ------------------------------------------------- */

.post-update-info {
    width: auto;
    min-width: 200px;
    max-width: 260px;
    padding: 10px 12px;
    border: 1px solid var(--info-border);
    border-radius: 8px;
    background: var(--brand-soft);
}

.post-update-info.post-update-info-edited {
    border-color: var(--border);
    background: transparent;
}

.post-update-info p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.post-update-info .post-update-info-when strong {
    color: var(--text);
    font-weight: 600;
}

.post-update-info-who {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.post-update-info-who img.gravatar {
    float: none;
    width: 32px;
    height: 32px;
    margin: 0;
}

.post-update-info-who p a {
    font-size: 13px;
    font-weight: 600;
}

.post-update-info-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.post-update-info-container .post-update-info {
    float: none;
    margin: 0 0 8px;
}

/* ---- "more" menu ------------------------------------------------------- */

.context-menu-trigger::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.context-menu-dropdown li {
    list-style: none;
}

.context-menu-dropdown li a {
    display: block;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--text);
    white-space: nowrap;
}

.context-menu-dropdown li a:hover {
    background: var(--hover-overlay);
    text-decoration: none;
}

/* ---- Feed icons -------------------------------------------------------- */

/* A 16px icon in a 24px target (WCAG 2.5.8); the negative margin keeps the
   layout of a 16px box. */
a.feed-icon {
    width: 24px;
    height: 24px;
    margin: -4px;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='5' fill='%23f26522'/%3E%3Cpath d='M6.5 11a6.5 6.5 0 016.5 6.5M6.5 6.5a11 11 0 0111 11' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='7.3' cy='16.7' r='1.6' fill='white'/%3E%3C/svg%3E") no-repeat center / 16px 16px !important;
}

img[src*="feed-icon-small"] {
    width: 16px;
    height: 16px;
}

/* ---- Badges ------------------------------------------------------------ */

.badge1 {
    color: #e3a500;
}

.silver, .badge2 {
    color: #9aa4b0;
}

.bronze, .badge3 {
    color: #c27c3a;
}

.badgecount {
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
}

.score, .accept_rate, .post-score, .item-count, .questions-count, .scoreNumber, .tag-number {
    font-variant-numeric: tabular-nums;
}

/* ---- Profile header ---------------------------------------------------- */

.user-info-table, .user-info-table > tbody {
    display: block;
    width: 100%;
}

.user-info-table > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 32px;
}

.user-info-table > tbody > tr > td {
    display: block;
    width: auto !important;
}

.user-info-table > tbody > tr > td:first-child {
    flex: 0 0 auto;
    text-align: center;
}

.user-info-table > tbody > tr > td:nth-child(2) {
    flex: 1 1 280px;
}

.user-info-table img.gravatar {
    width: 112px;
    max-width: none;
    height: 112px;
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border);
}

.user-info-table .scoreNumber {
    margin-top: 12px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.user-info-table .scoreNumber + p b {
    color: var(--muted) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.user-details {
    border-collapse: collapse;
}

.user-details h3 {
    margin-bottom: 6px;
    font-size: 16px;
}

.user-details td {
    padding: 3px 16px 3px 0;
    vertical-align: top;
}

.user-details td:first-child {
    color: var(--muted);
    white-space: nowrap;
}

/* ---- jQuery UI widgets (date picker, slider) --------------------------- */

.ui-widget {
    font-family: var(--font);
    font-size: 14px;
}

.ui-widget.ui-widget-content, .ui-datepicker {
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .15);
}

.ui-datepicker .ui-widget-header {
    border: 0;
    background: none;
    color: var(--text);
    font-weight: 600;
}

.ui-datepicker select {
    padding: 2px 4px;
    font-size: 13px;
}

.ui-datepicker th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text);
    text-align: center;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-default:hover {
    border: 0;
    background: var(--hover-overlay);
    color: var(--text);
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight {
    border: 0;
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.ui-state-active, .ui-widget-content .ui-state-active {
    border: 0;
    background: var(--brand);
    color: #fff;
}

.ui-slider.ui-widget-content {
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--border);
    box-shadow: none;
}

.ui-slider .ui-slider-handle {
    top: -6px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--brand) !important;
    border-radius: 50%;
    background: var(--surface) !important;
    cursor: grab;
}

/* ---- Question page ---------------------------------------------------- */

/* question.html and node/*.html. Rules are scoped to .question-page (the
   main column) and .question-header so they win over the older generic
   post rules above; colours come from the tokens, so dark mode follows. */

.question-header {
    margin-bottom: 20px;
    padding-bottom: 14px;
}

.question-header h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.question-header h1 a:hover {
    color: var(--brand);
    text-decoration: none;
}

ul.question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 8px 0 0;
    padding: 0;
    color: var(--muted);
    font-size: 13px;
    list-style: none;
}

ul.question-meta li {
    margin: 0;
    list-style: none;
}

ul.question-meta time {
    color: var(--text);
}

time.relative-time {
    white-space: nowrap;
}

/* Closed and duplicate notices. */
.question-page .callout {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--info-border);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--text);
    font-size: 14px;
}

.question-page .callout-warn {
    border-color: var(--warn-border);
    border-left-color: var(--warn-border-strong);
    background: var(--warn-bg);
}

.question-page .callout h3, .question-page .callout .callout-title {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.question-page .callout a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.question-page .callout .callout-title + a {
    display: inline-block;
    margin-top: 4px;
}

/* Versions a post applies to (forum/utils/post_versions.py): chips next to
   the question's tags, under an answer and on list rows; the "may be
   outdated" notice and the "Still works in ..." confirmation. */
.version-chip {
    display: inline-block;
    padding: 0 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
}

.post-tags .version-chips, .question-row .tags .version-chips {
    margin-left: 4px;
}

.post-versions {
    margin: 10px 0 0;
    font-size: 14px;
}

.post-versions p {
    margin: 0;
}

.post-version-chips {
    margin: 0 0 8px;
}

.question-page .version-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 8px;
}

.version-notice p {
    flex: 1 1 240px;
    min-width: 0;
}

.version-confirm-form, .version-undo-form {
    margin: 0;
}

button.version-confirm-button, button.version-confirm-button:hover,
button.version-undo-button, button.version-undo-button:hover {
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

button.version-confirm-button:hover, button.version-undo-button:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.version-confirmed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 13px;
}

/* Links inside the sentence: told apart by more than their colour. */
.version-confirmed a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* First posts review: "Waiting for review" on a held post (its author and
   moderators see it), in lists, on the question page and on comments. */
.review-badge {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--warn-border-strong);
    border-radius: 999px;
    background: var(--warn-bg);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}

.review-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--warn-border);
    border-left: 4px solid var(--warn-border-strong);
    border-radius: 8px;
    background: var(--warn-bg);
    color: var(--text);
    font-size: 14px;
}

.review-notice a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.question-page .post.pending-review, .question-page .answer-card.pending-review {
    border-style: dashed;
}

/* Live question page (osqa.live.js): the "2 new answers · Show" banner at
   the bottom of the screen, new and edited posts highlighted for a moment,
   the note above the answer form when an answer comes in while one is
   being written. */
.live-banner {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    z-index: 60;
    max-width: calc(100% - 32px);
    transform: translateX(-50%);
}

.live-banner-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 4px 16px rgba(16, 24, 40, .18);
    font-weight: 600;
}

.live-banner-dot {
    color: var(--muted);
}

.live-banner .live-show {
    min-height: 36px;
    padding: 6px 16px;
    border-radius: 999px;
    color: var(--surface);
}

.live-banner .live-show:hover {
    background: var(--brand-dark);
}

@keyframes osqa-live-new {
    from { background-color: var(--highlight-bg); box-shadow: 0 0 0 3px var(--warn-border); }
}

.question-page .live-new {
    animation: osqa-live-new 3s ease-out;
}

.question-page .comment.live-new {
    border-left: 3px solid var(--warn-border-strong);
}

.question-page .live-new:focus {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.live-writing {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--info-border);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--text);
}

.live-writing a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .question-page .live-new {
        animation: none;
    }
}

@media (max-width: 640px) {
    .live-banner {
        width: calc(100% - 32px);
    }

    .live-banner .live-show {
        margin-left: auto;
    }
}

/* Post layout: votes beside the content. */
.question-page .post {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 16px;
    width: auto;
    margin: 0;
}

/* style.css gives every div "margin: 0 auto", which stops grid items from stretching. */
.question-page .post > .post-votes, .question-page .post > .post-main {
    margin: 0;
}

.question-page .post-main {
    min-width: 0;
}

.question-page .answer-card {
    margin: 0 0 16px;
    padding: 18px 18px 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.question-page .answer-card.accepted-answer {
    border-color: var(--success);
    box-shadow: inset 3px 0 0 var(--success);
    background: var(--surface);
}

.question-page .answer-card.focusedAnswer {
    background: var(--highlight-bg);
}

.question-page .post.deleted, .question-page .answer-card.deleted {
    background: var(--danger-soft);
}

.question-page .answer-card .comments-container {
    background: none;
}

.accepted-badge {
    display: none;
}

.question-page .accepted-answer .accepted-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    background: var(--success-soft);
    color: var(--success);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}

.question-page .accepted-badge::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: currentColor url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") no-repeat center / 12px;
}

/* ---- Post text ---- */

.question-page .post-body {
    min-height: 0;
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.question-page .post-body > :first-child {
    margin-top: 0;
}

.question-page .post-body > :last-child {
    margin-bottom: 0;
}

.question-page .post-body p, .question-page .post-body li, .question-page .post-body blockquote,
.question-page .post-body h1, .question-page .post-body h2, .question-page .post-body h3,
.question-page .post-body h4, .question-page .post-body h5, .question-page .post-body h6 {
    max-width: 70ch;
}

.question-page .post-body p {
    margin: 0 0 1em;
    font-size: inherit;
    line-height: inherit;
}

.question-page .post-body h1, .question-page .post-body h2, .question-page .post-body h3,
.question-page .post-body h4, .question-page .post-body h5, .question-page .post-body h6 {
    margin: 1.4em 0 .5em;
    color: var(--text);
    font-weight: 650;
    line-height: 1.3;
}

.question-page .post-body h1 { font-size: 1.5em; }
.question-page .post-body h2 { font-size: 1.3em; }
.question-page .post-body h3 { font-size: 1.15em; }
.question-page .post-body h4, .question-page .post-body h5, .question-page .post-body h6 { font-size: 1em; }

.question-page .post-body ul, .question-page .post-body ol {
    margin: 0 0 1em;
    padding-left: 1.6em;
}

.question-page .post-body ul { list-style: disc; }
.question-page .post-body ol { list-style: decimal; }
.question-page .post-body ul ul { list-style: circle; }

.question-page .post-body li {
    margin: .25em 0;
    list-style: inherit;
}

.question-page .post-body li > ul, .question-page .post-body li > ol {
    margin: .25em 0 0;
}

.question-page .post-body blockquote {
    margin: 0 0 1em;
    padding: .2em 1em;
    border: 0;
    border-left: 4px solid var(--border-strong);
    background: none;
    color: var(--quote-text);
}

.question-page .post-body blockquote p:last-child {
    margin-bottom: 0;
}

.question-page .post-body hr {
    height: 0;
    margin: 1.5em 0;
    border: 0;
    border-top: 1px solid var(--border);
}

.question-page .post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Wide tables scroll inside the post instead of widening the page. */
.question-page .post-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 0 1em;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}

.question-page .post-body th, .question-page .post-body td {
    padding: 6px 12px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.question-page .post-body th {
    background: var(--code-bg);
    font-weight: 600;
}

.question-page .post-body :not(pre) > code, .question-page .post-body kbd {
    padding: .1em .4em;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--code-inline-bg);
    font-size: .875em;
    white-space: break-spaces;
}

.question-page .post-body kbd {
    border-color: var(--border);
    border-bottom-width: 2px;
    font-family: var(--mono);
}

/* Code blocks with a Copy button (osqa.posts.js). */
.question-page .code-block {
    position: relative;
    margin: 0 0 1em;
}

.question-page .post-body pre {
    margin: 0 0 1em;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--code-bg);
    font-size: 13.5px;
    line-height: 1.55;
}

.question-page .code-block pre {
    margin: 0;
    padding-right: 76px;
}

.question-page .code-copy, .question-page .code-copy:hover {
    position: absolute;
    top: 7px;
    right: 7px;
    min-width: 0;
    padding: 4px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.question-page .code-copy:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.question-page .code-copy.copied {
    border-color: var(--success);
    color: var(--success);
}

.question-page .code-copy:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---- Votes, favourite, accept ---- */

.question-page .post-votes {
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.question-page a.post-vote {
    width: 40px;
    height: 40px;
}

.question-page a.post-vote:focus-visible, .question-page .favorite-mark:focus-visible,
.question-page a.accept-answer:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.question-page .post-score {
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.4;
}

.question-page .favorite-mark {
    margin-top: 8px;
}

.question-page .favorite-count {
    min-height: 0;
    color: var(--muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.question-page span.accept-answer {
    margin-top: 8px;
}

/* The asker's accept control: the tick with a label under it. */
.question-page a.accept-answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    margin-top: 8px;
    padding: 34px 2px 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: transparent;
    background-position: center 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.question-page a.accept-answer:hover {
    border-color: var(--success);
    background-color: var(--success-soft);
    color: var(--success);
}


.question-page a.accept-answer .accept-label {
    display: block;
}

/* ---- Footer: post menu and author cards ---- */

.question-page .post-tags {
    margin: 16px 0 0;
    line-height: 2;
}

.question-page .post-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 0;
}

.question-page .post-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    font-size: 13px;
}

.question-page .post-controls .action-link {
    padding: 0;
}

.question-page .post-controls .action-link a, .question-page .post-controls .context-menu-trigger,
.question-page .post-controls .context-menu-trigger:hover {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 0;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
}

.question-page .post-controls .action-link a:hover, .question-page .post-controls .context-menu-trigger:hover,
.question-page .post-controls .context-menu-trigger[aria-expanded="true"] {
    background: var(--hover-overlay);
    color: var(--text);
}

.question-page .post-controls a:focus-visible, .question-page .post-controls .context-menu-trigger:focus-visible,
.question-page .context-menu-dropdown a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 0;
}

.question-page .post-menu {
    position: relative;
    float: none;
    width: auto;
    text-align: left;
}

.question-page .post-menu .context-menu-dropdown {
    top: calc(100% + 4px);
    right: auto;
    left: 0;
    min-width: 200px;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
}

.question-page .context-menu-dropdown li.item {
    padding: 0;
}

.question-page .context-menu-dropdown li.item:hover {
    background: none;
}

.question-page .context-menu-dropdown li a {
    display: block;
    padding: 7px 12px;
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
}

.question-page .context-menu-dropdown li a:hover, .question-page .context-menu-dropdown li a:focus {
    background: var(--hover-overlay);
    text-decoration: none;
}

.question-page .post-update-info-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 0 auto;
}

.question-page .post-update-info {
    float: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    min-width: 0;
    max-width: 280px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
}

.question-post .post-update-info-user {
    border-color: var(--info-border);
    background: var(--brand-soft);
}

.question-page .post-update-info.post-update-info-edited {
    display: block;
    border-color: transparent;
}

.question-page .post-update-info-avatar {
    flex: none;
    line-height: 0;
}

.question-page .post-update-info img.gravatar {
    float: none;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 50%;
}

.question-page .post-update-info p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.question-page .post-update-info-who {
    display: block;
    margin: 0;
}

.question-page .post-update-info-who a.post-author {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 600;
}

.question-page .post-update-info-who .score {
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.question-page .post-update-info-edited a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.question-page .post-update-info-edited a:hover {
    color: var(--brand);
}

.question-page .community-wiki {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 12px;
}

/* ---- Comments ---- */

.question-page .comments-container {
    margin-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.question-page .comment {
    padding: 8px 0;
    border-top: 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 14px;
}

.question-page .comment-score {
    width: 28px;
    padding-right: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.question-page .comment-text {
    flex: 1 1 60%;   /* a basis, so the info line (100%) always wraps under it */
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.question-page .comment-info {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px 8px;
    padding-left: 28px;
}

.question-page .comment-info a.comment-user {
    font-weight: 600;
}

.question-page .comment-age {
    color: var(--muted);
}

.question-page .comment-info a.comment-like, .question-page .comment-info a.comment-edit,
.question-page .comment-info a.comment-delete, .question-page .comment-info a.comment-convert,
.question-page .comment-info a.comment-convert-to-question {
    width: 26px;
    height: 26px;
}

.question-page .comment-info a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 0;
}

.question-page div.comment-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 8px 0 0 28px;
    border-top: 0;
    text-align: left;
}

.question-page div.comment-tools .comments-showing {
    color: var(--muted);
    font-size: 13px;
}

.question-page div.comment-tools a, .question-page div.comment-tools a:hover {
    padding: 2px 0;
    background: none;
    color: var(--brand);
    font-size: 13px;
    font-weight: 500;
}

.question-page div.comment-tools a:hover {
    text-decoration: underline;
}

/* The comment form: fields as on the sign-in pages. */
.question-page .comment-form-container {
    padding: 12px 0 4px 28px;
}

.question-page .comment-form-widgets-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.question-page .comment-form-widgets-container textarea.commentBox {
    float: none;
    width: 100%;
    min-height: 80px;
    margin: 0;
    padding: 10px 12px !important;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
}

.question-page .comment-form-widgets-container textarea.commentBox:focus {
    border-color: var(--brand);
    outline: 2px solid rgba(44, 90, 160, .25);
}

.question-page .comment-form-buttons {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    height: auto;
}

.question-page span.comment-chars-left {
    margin: 0 auto 0 0;
    color: var(--muted);
    font-size: 13px;
}

.question-page .comments-char-left-count {
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
}

.question-page .comments-char-left-count.warn {
    color: var(--accent-dark);
}

.question-page .comment-form-buttons input {
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.2;
}

.question-page .comment-form-buttons input:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.question-page .comment-form-buttons input.comment-cancel, .question-page .comment-form-buttons input.comment-cancel:hover {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
}

.question-page .comment-form-buttons input.comment-cancel:hover {
    background: var(--hover-overlay);
}

.question-page .canned_comment {
    font-size: 13px;
}

/* ---- Answers header ---- */

.question-page .answers-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 28px 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border);
}

.question-page .answers-header > a[name] {
    position: absolute;
}

.question-page .answers-count {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
}

.question-page .jump-to-accepted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--success);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.question-page .jump-to-accepted::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: currentColor url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") no-repeat center / 12px;
}

.question-page .answer-sort {
    margin-left: auto;
    max-width: 100%;
}

.question-page .answer-sort .tabsA {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.question-page .answer-sort .tabsA a {
    flex: none;
    white-space: nowrap;
}

.question-page .answer-sort .tabsA a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 0;
}

/* ---- Answer form ---- */

.question-page #fmanswer {
    margin-top: 28px;
}

.question-page .answer-form-title {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 18px;
    font-weight: 650;
}

.question-page .answer-editor #editor {
    min-height: 200px;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 0 0 8px 8px;
    font-size: 15px;
}

.question-page .editor-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 8px 0;
    color: var(--muted);
    font-size: 13px;
}

.question-page .link-button, .question-page .link-button:hover {
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.question-page .link-button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.question-page .editor-metrics {
    margin-left: auto;
}

.question-page .editor-wiki {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.question-page .editor-wiki label {
    font-weight: 500;
}

.question-page #previewer {
    min-height: 48px;
    padding: 14px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: transparent;
}

.question-page #previewer:empty {
    display: none;
}

.question-page .question-captcha {
    margin: 12px 0;
}

.question-page input.answer-submit {
    min-height: 44px;
    padding: 11px 22px;
    font-size: 15px;
}

/* ---- Sidebar: follow box and question tags ---- */

#subscription_box a.sidebar_button {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

#subscription_box a.sidebar_button:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
    text-decoration: none;
}

#CARight > .question-tags-box {
    margin-right: 0;
    margin-left: 0;
}

ul.question-tags-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

ul.question-tags-list li {
    margin: 0;
    list-style: none;
}

ul.question-tags-list .tag-number {
    color: var(--muted);
    font-size: 12px;
}

/* ---- Phones ---- */

@media (max-width: 640px) {
    .question-header h1 {
        font-size: 21px;
    }

    .question-page .post {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 0 10px;
    }

    .question-page .answer-card {
        margin: 0 -4px 12px;
        padding: 14px 12px 6px 8px;
    }

    .question-page a.post-vote, .question-page .favorite-mark {
        width: 36px;
        height: 36px;
        background-size: 18px;
    }

    .question-page a.accept-answer {
        padding-top: 32px;
    }

    .question-page .post-score {
        font-size: 17px;
    }

    .question-page .post-body {
        font-size: 15px;
        line-height: 1.65;
    }

    .question-page .code-block pre {
        padding-right: 16px;
        padding-top: 38px;
    }

    .question-page .post-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .question-page .post-update-info-container {
        justify-content: flex-start;
        margin-left: 0;
    }

    .question-page .post-update-info {
        max-width: 100%;
    }

    .question-page .post-controls .action-link a, .question-page .post-controls .context-menu-trigger,
    .question-page .post-controls .context-menu-trigger:hover {
        min-height: 36px;
        padding: 6px 10px;
    }

    /* The post menu as a sheet at the bottom of the screen: big touch targets. */
    .question-page .post-menu .context-menu-dropdown {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        min-width: 0;
        max-width: none;
        padding: 6px;
        border-radius: 12px;
        box-shadow: 0 -4px 32px rgba(16, 24, 40, .25);
        z-index: 1001;
    }

    .question-page .context-menu-dropdown li a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 16px;
        white-space: normal;
    }

    .question-page .comment-info, .question-page div.comment-tools, .question-page .comment-form-container {
        padding-left: 0;
    }

    .question-page .comment-score {
        width: auto;
        min-width: 22px;
    }

    .question-page span.comment-chars-left {
        flex: 1 1 100%;
    }

    .question-page .comment-score:empty {
        display: none;
    }

    .question-page .post-body th, .question-page .post-body td {
        white-space: nowrap;
    }

    .question-page .comment-info a.comment-like, .question-page .comment-info a.comment-edit,
    .question-page .comment-info a.comment-delete, .question-page .comment-info a.comment-convert,
    .question-page .comment-info a.comment-convert-to-question {
        width: 32px;
        height: 32px;
        opacity: .8;
    }

    .question-page .answers-header {
        flex-direction: row;
        align-items: center;
    }

    .question-page .answer-sort {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .question-page .editor-metrics {
        margin-left: 0;
    }

    .question-page input.answer-submit {
        width: 100%;
    }
}

/* ---- Dark mode ------------------------------------------------------ */

/* Every dark rule starts with :root[data-theme="dark"], here and in the later
   sections, so dark mode is one set of rules for both ways of getting it.
   data-theme on <html> is always "light" or "dark" (the resolved theme): the
   server writes the visitor's choice (theme switch: user.prop.preferences or
   the osqa_theme cookie), and for "System" the inline script of {% theme_head %}
   (forum/templatetags/display_tags.py) sets it from prefers-color-scheme before
   the first paint and again whenever the device setting changes. Admin > View
   settings > "Dark mode" off: no data-theme, always light. */
:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --brand: #79b0ff;
    --brand-dark: #a8cbff;
    --brand-soft: #1a2a42;
    /* White text (the Ask button) needs 4.5:1 on these. */
    --accent: #cf430c;
    --accent-dark: #c2410c;
    --success: #3fb950;
    --success-soft: #11251a;
    --danger-soft: #3a1d1f;
    --danger-text: #ff8b84;
    --accent-soft: #3a2316;
    --warn-bg: #2b2412;
    --warn-bg-strong: #3a3015;
    --warn-border: #5b4a1c;
    --warn-border-strong: #7a6220;
    --warn-text: #f0cf6c;
    --highlight-bg: #2a2614;
    --info-border: #2b3f5e;
    --code-bg: #0f141b;
    --code-inline-bg: #222a35;
    --quote-text: #c3ccd6;
    --hover-overlay: rgba(255, 255, 255, .08);
    --text: #e6edf3;
    --muted: #9ba7b4;
    --border: #30363d;
    --border-subtle: #262c34;
    --border-strong: #46505c;
    --surface: #161b22;
    --background: #0d1117;
    --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
    --hl-keyword: #ff7b72;
    --hl-string: #a5d6ff;
    --hl-comment: #8b949e;
    --hl-number: #79c0ff;
    --hl-title: #d2a8ff;
    --hl-builtin: #ffa657;
    --hl-addition: #aff5b4;
    --hl-addition-bg: #033a16;
    --hl-deletion: #ffdcd7;
    --hl-deletion-bg: #67060c;
    --button-bg: #2f6fd6;
    --button-bg-hover: #3b7ee8;
}

/* White text needs a deeper blue/green than the link colours. Outline-style
   buttons (.plain-button) keep their own colours. */
:root[data-theme="dark"] :is(input[type="submit"], input[type="button"], button, .submit, a.button, .dialog-yes,
        .paginator .curr):not(.dialog-no):not(.search-type):not(.account-delete-button):not(.plain-button) {
    border-color: var(--button-bg);
    background-color: var(--button-bg);
    color: #fff;
}

:root[data-theme="dark"] :is(input[type="submit"], input[type="button"], button, .submit, a.button, .dialog-yes):not(.dialog-no):not(.account-delete-button):not(.plain-button):hover {
    border-color: var(--button-bg-hover);
    background-color: var(--button-bg-hover);
}

:root[data-theme="dark"] .tags a:hover, :root[data-theme="dark"] a.post-tag:hover {
    background: var(--button-bg);
    color: #fff;
}

:root[data-theme="dark"] .short-summary .status.answered-accepted,
:root[data-theme="dark"] .short-summary .status.answered-accepted .item-count {
    border-color: #238636;
    background: #238636;
    color: #fff;
}

/* Legacy style.css colours that modern.css does not otherwise touch. */
:root[data-theme="dark"] a.medal, :root[data-theme="dark"] .medal {
    color: var(--warn-text);
}

:root[data-theme="dark"] .badges a {
    color: var(--brand);
}

:root[data-theme="dark"] .wmd-preview, :root[data-theme="dark"] .deleted {
    background-color: var(--code-bg);
}

:root[data-theme="dark"] .deleted {
    background-color: var(--danger-soft);
}

:root[data-theme="dark"] .darkred, :root[data-theme="dark"] span.form-error,
:root[data-theme="dark"] ul.errorlist li, :root[data-theme="dark"] .error {
    color: var(--danger-text);
}

:root[data-theme="dark"] .notify p.darkred {
    color: inherit;
}

:root[data-theme="dark"] .score, :root[data-theme="dark"] .accept_rate,
:root[data-theme="dark"] .questions-count span, :root[data-theme="dark"] .tickLabel,
:root[data-theme="dark"] .post-score, :root[data-theme="dark"] .scoreNumber,
:root[data-theme="dark"] .favorite-count, :root[data-theme="dark"] .comment-score {
    color: var(--text);
}

:root[data-theme="dark"] .answer-votes,
:root[data-theme="dark"] a.sidebar_button, :root[data-theme="dark"] .user-action-1,
:root[data-theme="dark"] .answer-title-link a, :root[data-theme="dark"] .post-type-2 a,
:root[data-theme="dark"] .post-type-4 a, :root[data-theme="dark"] .post-type-8 a,
:root[data-theme="dark"] .community-wiki {
    color: var(--text);
}

:root[data-theme="dark"] a.sidebar_button, :root[data-theme="dark"] .answer-votes,
:root[data-theme="dark"] .message, :root[data-theme="dark"] .revision .header {
    background: var(--code-inline-bg);
}

:root[data-theme="dark"] .revision .author {
    background: var(--brand-soft);
}

:root[data-theme="dark"] .negativeReputation {
    color: var(--danger-text);
}

:root[data-theme="dark"] img {
    color-scheme: light;
}

/* ---- AI duplicate detection on the ask page ------------------------- */

.ask-duplicates {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    background: var(--warn-bg);
    color: var(--text);
}

.ask-duplicates[hidden] {
    display: none;
}

.ask-duplicates-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--warn-text);
}

.ask-duplicates-dismiss {
    flex: none;
    padding: 4px 10px;
    border: 1px solid var(--warn-border-strong);
    border-radius: 6px;
    background: transparent;
    color: var(--warn-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.ask-duplicates ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.ask-duplicates li {
    padding: 8px 0;
    border-top: 1px solid var(--warn-border);
}

.ask-duplicates li a {
    font-weight: 600;
}

.ask-duplicates-status {
    margin-left: 4px;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.ask-duplicates-status.accepted {
    color: var(--success);
}

.ask-duplicates-reason {
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
}

.ask-duplicates-note {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
}

/* ---- Admin > Flagged posts: automated reports ----------------------- */

.moderation-report td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
}

.moderation-verdict {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--danger-soft);
    color: var(--danger-text);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.moderation-verdict-off_topic {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.moderation-meta {
    color: var(--muted);
    font-size: 13px;
}

.moderation-reason {
    margin: 6px 0;
    padding-left: 10px;
    border-left: 3px solid var(--border-strong);
}

.moderation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.moderation-actions button {
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.moderation-actions .moderation-delete {
    border-color: var(--danger-text);
    color: var(--danger-text);
}

/* ---- AI assistant (ask page) and suggested answers ---------------- */

.ask-assistant {
    margin: 0 0 18px;
}

.ask-assistant-hint {
    margin-left: 8px;
    color: var(--muted);
    font-size: 13px;
}

.ask-assistant button, .ai-suggestion-actions button {
    padding: 6px 12px;
    border: 1px solid var(--brand);
    border-radius: 6px;
    background: var(--surface);
    color: var(--brand);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.ask-assistant button:disabled {
    opacity: .6;
    cursor: progress;
}

.ask-assistant-answer, .ai-suggestion {
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px solid var(--info-border, var(--border));
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand-soft);
    color: var(--text);
}

.ask-assistant-answer[hidden] {
    display: none;
}

.ask-assistant-status {
    margin: 0 0 6px;
    color: var(--muted);
}

.ai-suggestion {
    margin: 20px 0;
}

.ai-suggestion-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ai-suggestion-head h2 {
    margin: 0;
    font-size: 17px;
}

.ai-suggestion-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.ai-suggestion-marked {
    color: var(--success);
    font-size: 13px;
}

.ai-suggestion-sources {
    margin-top: 10px;
    font-size: 14px;
}

.ai-suggestion-sources ol {
    margin: 4px 0 0;
    padding-left: 22px;
}

.ai-source-kind {
    color: var(--muted);
    font-size: 12px;
}

.ai-suggestion-note {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.ai-suggestion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ai-suggestion-actions form {
    margin: 0;
}

/* ---- Email settings, unsubscribe and help pages, tag following ----- */

.email-settings h2, .email-settings h3 {
    margin: 18px 0 8px;
}

.email-master {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--success);
    border-radius: var(--radius);
    background: var(--surface);
}

.email-master.is-off {
    border-left-color: var(--warn-border-strong);
    background: var(--warn-bg);
}

.email-master p {
    margin: 0 0 10px;
}

.email-master .email-help-link {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.email-settings-hint, .email-settings-empty {
    color: var(--muted);
    font-size: 14px;
}

.followed-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.email-settings-form fieldset {
    margin: 18px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.email-settings-form legend {
    padding: 0 6px;
    font-weight: 600;
}

.email-settings-form label {
    display: block;
    margin: 6px 0;
}

.email-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.email-choice:last-child {
    border-bottom: 0;
}

.email-choice ul, .email-choice div {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.email-choice label {
    margin: 0;
}

.email-master button, .email-prefs button, .tag-follow button {
    padding: 7px 14px;
    border-radius: 6px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.email-master .plain-button, .email-prefs .plain-button, .tag-follow .plain-button {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
}

.email-prefs {
    max-width: 640px;
    padding: 8px 0 24px;
}

.email-prefs h2 {
    margin: 20px 0 6px;
    font-size: 17px;
}

.email-prefs-result {
    font-size: 16px;
}

.email-prefs-actions {
    margin: 14px 0;
}

.email-prefs-alternative {
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--info-border);
    border-radius: var(--radius);
    background: var(--brand-soft);
}

.email-prefs-alternative h2 {
    margin: 0 0 4px;
}

.email-prefs-alternative p {
    margin: 0 0 10px;
}

.email-prefs-more {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 14px;
}

.tag-follow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.tag-follow form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.tag-follow-state {
    color: var(--success);
    font-weight: 600;
}

.tag-follow-help {
    color: var(--muted);
    font-size: 14px;
}

.tag-followers {
    margin-left: 6px;
    white-space: nowrap;
}

.tag-followers::before {
    content: "\00b7";
    margin-right: 6px;
}

/* Help text under a form field (e.g. the password rules on sign-up) */

/* Notification bell (header) and list */
.notification-bell { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.notification-bell .notification-count {
    position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #c62828; color: #fff; font-size: 10px; font-weight: 700;
    line-height: 16px; text-align: center; box-sizing: border-box;
}
.notification-bell .notification-count[hidden] { display: none; }
/* Moderation inbox link (staff), with the number of items waiting */
.moderation-link .moderation-count {
    display: inline-block; min-width: 18px; height: 18px; margin-left: 2px; padding: 0 5px;
    border-radius: 9px; background: #c62828; color: #fff; font-size: 11px; font-weight: 700;
    line-height: 18px; text-align: center; box-sizing: border-box;
}
/* Theme menu (header, members: display/theme_menu.html) and the footer's
   theme switch (display/theme_switch.html, styled as .language-switch);
   osqa.theme.js. The button shows the icon of the current choice. */
.theme-menu { position: relative; display: inline-flex; }
.theme-menu > summary {
    display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px;
    padding: 6px; border-radius: 6px; color: var(--muted); list-style: none; cursor: pointer;
}
.theme-menu > summary::-webkit-details-marker { display: none; }
.theme-menu > summary:hover, .theme-menu[open] > summary { background: var(--background); color: var(--text); }
.theme-menu > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.theme-icon { display: none; }
:root[data-theme-choice="auto"] .theme-icon-auto, :root[data-theme-choice="light"] .theme-icon-light,
:root[data-theme-choice="dark"] .theme-icon-dark { display: block; }
.theme-menu-panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 1002; min-width: 168px; margin: 0; padding: 6px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .18); white-space: normal;
}
.theme-menu-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-menu-panel legend { padding: 4px 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.theme-menu-option {
    display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border-radius: 6px;
    color: var(--text); font-size: 14px; font-weight: normal; cursor: pointer;
}
.theme-menu-option:hover { background: var(--hover-overlay); }
.theme-menu-option input { margin: 0; accent-color: var(--brand); }
/* Keyboard shortcuts: the list opened with "?" (display/shortcuts_dialog.html)
   and the question or post that j / k moved to (osqa.shortcuts.js). */
.shortcuts-dialog {
    width: min(660px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .3); white-space: normal;
}
.shortcuts-dialog::backdrop { background: rgba(16, 24, 40, .55); }
.shortcuts-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.shortcuts-header h2 { margin: 0; font-size: 18px; }
.shortcuts-dialog .shortcuts-close {
    min-width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 8px; background: none;
    color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer;
}
.shortcuts-dialog .shortcuts-close:hover { background: var(--hover-overlay); color: var(--text); }
.shortcuts-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 32px; padding: 8px 20px; }
.shortcuts-groups h3 {
    margin: 10px 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.shortcuts-list { margin: 0 0 6px; }
.shortcuts-list > div { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; }
.shortcuts-list dt { flex: 0 0 76px; margin: 0; font-weight: normal; }
.shortcuts-list dd { margin: 0; }
.shortcuts-dialog kbd {
    display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px;
    border-radius: 5px; background: var(--code-bg); color: var(--text); font: 600 12px/16px var(--mono); text-align: center;
}
.shortcuts-note { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--border-subtle); color: var(--muted); font-size: 13px; }
.shortcuts-note a { text-decoration: underline; }
.question-row.is-kbd-current, .question-page .post.is-kbd-current {
    outline: 2px solid var(--brand); outline-offset: 2px; scroll-margin: 80px 0;
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inbox-list { list-style: none; margin: 12px 0; padding: 0; border-top: 1px solid var(--border); }
.inbox-item a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 10px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.inbox-item a:hover, .inbox-item a:focus { background: var(--hover-overlay); }
.inbox-item.unread a { background: var(--brand-soft); border-left: 3px solid var(--brand); }
.inbox-item.unread a:hover, .inbox-item.unread a:focus { background: var(--info-border); }
.inbox-time { flex: none; color: var(--muted); font-size: 0.85em; white-space: nowrap; }
.inbox-empty, .inbox-note { color: var(--muted); }
@media (max-width: 640px) {
    .inbox-item a { flex-direction: column; gap: 4px; }
}
/* Browser push: "Get notifications on this device" (push/switch.html, osqa.push.js) and devices (push/settings.html) */
.push-switch { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.push-settings .push-switch { margin-top: 0; }
.push-toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; border: 0; background: none;
    color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.push-toggle-track {
    position: relative; flex: none; width: 44px; height: 24px; border: 2px solid var(--muted); border-radius: 14px;
    background: var(--background); box-sizing: border-box; transition: background-color .15s, border-color .15s;
}
.push-toggle-thumb {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted);
    transition: transform .15s, background-color .15s;
}
.push-toggle[aria-checked="true"] .push-toggle-track { border-color: var(--brand); background: var(--brand); }
.push-toggle[aria-checked="true"] .push-toggle-thumb { transform: translateX(20px); background: #fff; }
.push-toggle:disabled { cursor: not-allowed; color: var(--muted); }
.push-toggle:disabled .push-toggle-track { border-style: dashed; }
.push-toggle[aria-busy="true"] { cursor: progress; }
.push-help, .push-status { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.push-status:empty { display: none; }
.push-help a { text-decoration: underline; }
.push-note { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--warn-border-strong); background: var(--warn-bg); color: var(--warn-text); font-size: 14px; }
.push-kinds fieldset { margin: 14px 0 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.push-kinds legend { padding: 0 6px; font-weight: 600; }
.push-kinds label { display: block; margin: 6px 0; }
.push-devices { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.push-device { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border); }
.push-device form { margin: 0; }
.push-device-meta { display: block; color: var(--muted); font-size: 13px; }
.push-device-this { color: var(--success); font-size: 13px; font-weight: 600; }
.push-device .plain-button { padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
    .push-toggle-track, .push-toggle-thumb { transition: none; }
}

/* Language switcher (footer) */
.language-switch { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 0.9em; color: var(--muted); }
.language-switch select {      font: inherit; }

/* Label/field rows (password settings and similar forms): flexible instead of
   absolutely positioned, so help texts fit and phones don't scroll sideways. */

/* ---- Accessibility (WCAG 2.1 AA, checked by e2e/test_accessibility.py) -- */

/* Legacy style.css greys that are too light on white, or invisible in dark mode. */
.paginator .text {
    color: var(--muted);
}

.userinfo a, a.userinfo {
    color: var(--brand);
}

.short-summary .votes, .short-summary .views {
    color: var(--muted);
}

/* A name inside a line of grey text: bold, so it isn't told apart by colour alone. */
.short-summary .userinfo a {
    font-weight: 600;
}

/* Recent awards (sidebar): the member's name after the badge. */
.badge-list a:not(.medal) {
    color: var(--brand);
}

/* "Mark all as read" in the notification list: an outline button. */
.inbox-head .plain-button {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
}

.inbox-head .plain-button:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--text);
}

/* Links inside sentences are underlined, so they don't rely on colour alone. */
.tag-follow-help a,
.email-settings-hint a,
.email-settings-empty a,
.email-help-link a,
.inbox-note a,
.subscription-settings-note a,
.notify a,
.settings-lead a,
.for-you-note a,
.for-you-prefs a,
.sugg-meta a,
.md-help p a,
.api-docs p a,
.api-docs td a {
    text-decoration: underline;
}

/* ---- Search page (search.html) ---------------------------------------
 * Results with snippets, the search form, tips and the empty state.
 * Colours come from the variables above, so dark mode follows. */

.search-page-form {
    display: flex;
    gap: 8px;
    margin: 4px 0 10px;
}

.search-page-form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.search-page-form button {
    flex: none;
}

.search-tips {
    margin: 0 0 12px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.search-tips summary {
    cursor: pointer;
    color: var(--brand);
    font-weight: 600;
}

.search-tips dl {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: 6px 14px;
    margin: 8px 0 4px;
}

.search-tips dt, .search-tips dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.search-tips code {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--code-inline-bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
}

.search-count {
    margin: 0 0 4px;
    color: var(--muted);
}

ol.search-results {
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-result .search-snippet {
    flex-basis: 100%;
    margin: 0 0 2px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.search-result mark {
    padding: 0 1px;
    border-radius: 2px;
    background: var(--warn-bg-strong);
    color: var(--text);
    font-weight: 600;
}

.search-empty {
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.search-empty h2 {
    margin: 0 0 6px;
    font-size: 16px;
}

.search-empty ul {
    margin: 0;
    padding-left: 20px;
}

.search-empty a {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .search-tips dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .search-tips dd {
        margin-bottom: 6px;
    }
}

/* Filters (the sidebar, a dialog on narrow screens: osqa.searchpage.js),
 * chips of the active filters, facet counts, "did you mean" and the
 * results' status badges and meta line. */

.search-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.search-toolbar:not(:has(> :not([hidden]))) {
    display: none;
}

.search-filters-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}

.search-filters-toggle:hover {
    background: var(--hover-overlay);
}

.search-filters-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--surface);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.search-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 32px;
    padding: 4px 6px 4px 12px;
    border: 1px solid var(--info-border);
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.search-chip:hover, .search-chip:focus-visible {
    border-color: var(--brand);
    color: var(--text);
}

.search-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
}

.search-chip:hover .search-chip-remove {
    background: var(--hover-overlay);
    color: var(--text);
}

.search-chips-clear {
    padding: 4px 6px;
    font-size: 13px;
    text-decoration: underline;
}

.search-did-you-mean {
    margin: 0 0 8px;
    font-size: 15px;
}

.search-did-you-mean a {
    text-decoration: underline;
}

.search-result .search-result-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    flex-basis: 100%;
}

.search-result .search-result-meta .tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
}

.search-result .search-result-meta .userinfo {
    margin: 0 0 0 auto;
    color: var(--muted);
    font-size: 12px;
}

.search-status {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.search-status-accepted {
    border-color: var(--success);
    background: var(--success-soft);
}

.search-status-answered {
    background: var(--brand-soft);
    border-color: var(--info-border);
}

.search-status-closed {
    border-color: var(--warn-border-strong);
    background: var(--warn-bg);
}

.search-filters-title {
    margin: 0 0 10px;
    font-size: 16px;
}

.search-filter {
    min-width: 0;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.search-filter > label, .search-filter legend {
    display: block;
    margin: 0 0 4px;
    padding: 0;
    font-weight: 600;
}

.search-filter input[type="text"], .search-filter input[type="number"], .search-filter input[type="date"],
.search-filter select {
    box-sizing: border-box;
    width: 100%;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.search-filter-hint {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

label.search-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

.search-filter-option input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand);
}

.search-filter-closed {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle);
}

.search-facet-count {
    margin-left: auto;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--code-inline-bg);
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.search-filter-range {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 6px 8px;
    margin-top: 8px;
}

.search-filter-range[hidden] {
    display: none;
}

.search-filter-range label {
    font-weight: normal;
}

.search-facet-heading {
    margin: 10px 0 4px;
    color: var(--muted);
    font-size: 12px;
}

ul.search-facet-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-facet-tags a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 2px 4px 2px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--brand);
    font-size: 13px;
    text-decoration: none;
}

.search-facet-tags a:hover, .search-facet-tags a:focus-visible {
    border-color: var(--brand);
}

.search-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.search-filters-dialog {
    width: min(480px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    padding: 0;
    overflow: auto;
    /* A focused field scrolls out from under the sticky title (WCAG 2.4.11). */
    scroll-padding-top: 72px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
}

.search-filters-dialog::backdrop {
    background: rgba(16, 24, 40, .55);
}

.search-filters-dialog-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 16px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface);
}

.search-filters-dialog-head h2 {
    margin: 0;
    font-size: 18px;
}

.search-filters-dialog .search-filters-close {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.search-filters-dialog .search-filters-close:hover {
    background: var(--hover-overlay);
    color: var(--text);
}

.search-filters-dialog .search-filters {
    margin: 0;
    border: 0;
    box-shadow: none;
}

.search-filters-dialog .search-filters-title {
    display: none;
}

@media (max-width: 960px) {
    .search-filters-toggle:not([hidden]) {
        display: inline-flex;
    }

    .search-filters-home.is-enhanced {
        display: none;
    }
}

@media (max-width: 640px) {
    .search-result .search-result-meta .userinfo {
        flex-basis: 100%;
        margin-left: 0;
    }

    .search-filters-dialog .search-filter-actions .submit {
        flex: 1 1 auto;
        min-height: 44px;
    }
}

/* ---- Phone and dark-mode polish -------------------------------------- */

/* Tab rows that scroll sideways: a fade on each edge where tabs are hidden
   (classes set by osqa.scrolltabs.js), so the clipping reads as "more". */
.scroll-row {
    --fade-left: 0px;
    --fade-right: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
}



.scroll-row a:focus-visible {
    outline-offset: -2px;
}

/* Avatars that couldn't load show the initial (osqa.avatars.js), not a broken image. */
img.gravatar.gravatar-fallback {
    background: var(--muted);
}

/* Page titles: one size for every page (h1, as on the list and sign-in pages). */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin: 0 0 16px;
}

h1.page-title, h1.headNormal, .page-header h1 {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text);
    font-size: 24px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

h1.headNormal {
    margin-bottom: 16px;
}

.page-lead {
    margin: 0 0 16px;
    color: var(--muted);
}

h1.page-title + .page-lead {
    margin-top: 8px;
}

/* style.css centres every div (margin: 0 auto); these lay out with flex/grid. */
.page-header, .badge-detail div, #revisions div, .feedback-actions, .auth-empty {
    margin-left: 0;
    margin-right: 0;
}

.page-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 32px;
    padding: 4px 10px 4px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.page-back:hover {
    border-color: var(--brand);
    color: var(--brand);
    text-decoration: none;
}

h2.error-lead {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 18px;
    font-weight: 650;
}

.static-content h2, .static-content h3 {
    margin: 22px 0 6px;
    color: var(--text);
    font-size: 17px;
    font-weight: 650;
}

.static-content h2.subtitle {
    padding: 0;
    border: 0;
    background: none;
}

.static-content p, .static-content li {
    max-width: 72ch;
}

/* ---- Footer ---- */

#ground .footer-meta {
    overflow: hidden;
}

/* The dot before each item; at the start of a line it falls outside
   .footer-meta and is clipped. */
.footer-meta-items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -16px;
}

.footer-meta-item {
    position: relative;
    margin-left: 16px;
}

.footer-meta-item::before {
    content: "\00b7";
    position: absolute;
    left: -11px;
    width: 6px;
    text-align: center;
}

.language-switch label {
    color: var(--muted);
}

.language-switch select, .language-switch select:focus {
    width: auto;
    min-height: 36px;
    padding: 6px 34px 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.language-switch select:hover {
    border-color: var(--brand);
}

.language-switch select:focus-visible {
    border-color: var(--brand);
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* ---- Messages ("First time here?") ---- */

#close-notify, #close-notify:hover {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--warn-text);
    font-weight: 400;
}

#close-notify:hover {
    background: var(--hover-overlay);
}

#close-notify:focus-visible {
    outline: 2px solid var(--warn-text);
    outline-offset: -2px;
}

.notify a {
    color: inherit;
    text-decoration: underline;
}

/* ---- Votes and accepting: idle, pressed and accepted look different ---- */

a.post-vote.up, a.post-vote.down {
    border-color: var(--border-strong);
    background-color: var(--surface);
}

a.post-vote.up {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4752' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}

a.post-vote.down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4752' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

a.post-vote.up:hover {
    border-color: var(--brand);
    background-color: var(--brand-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c5aa0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}

a.post-vote.down:hover {
    border-color: var(--accent);
    background-color: var(--accent-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* style.css sets these states with the background shorthand (size: auto). */
a.post-vote.up:hover, a.post-vote.down:hover, a.post-vote.up.on, a.post-vote.down.on {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

/* Pressed: filled, with a white arrow. */
a.post-vote.up.on, a.post-vote.up.on:hover {
    border-color: var(--brand);
    background-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}

a.post-vote.down.on, a.post-vote.down.on:hover {
    border-color: var(--accent);
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* The asker's accept toggle: an outlined button until pressed, then green. */
.question-page a.accept-answer, .question-page a.accept-answer:hover {
    width: auto;
    min-width: 52px;
    padding-right: 5px;
    padding-left: 5px;
    background-repeat: no-repeat;
    background-size: 26px;
    opacity: 1;
}

.question-page a.accept-answer:not(.on) {
    border-color: var(--border-strong);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4752' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
    color: var(--text);
}

.question-page a.accept-answer:not(.on):hover {
    border-color: var(--success);
    background-color: var(--success-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
    color: var(--success);
}

.question-page a.accept-answer.on, .question-page a.accept-answer.on:hover {
    border-color: var(--success);
    background-color: var(--success-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231a7f37'/%3E%3Cpath d='M7.5 12.5l3 3L16.5 9.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color: var(--success);
}

.accept-label-on {
    display: none;
}

.question-page a.accept-answer.on .accept-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.question-page a.accept-answer.on .accept-label-on {
    display: block;
}

/* ---- Question page bits ---- */

/* Comment actions as one group: they wrap together, never one by one. */
.comment-actions {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 2px;
}

.question-page .comment-info .comment-actions a {
    flex: none;
}

/* "accept rate: 100%" stays on one line. */
.accept-rate-pair {
    white-space: nowrap;
}

.question-page .editor-wiki label {
    margin: 0;
    color: var(--text);
    cursor: pointer;
}

.question-page .editor-wiki input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.question-page .answer-form-error {
    margin: 0;
}

.question-page .answer-form-error:has(.form-error:empty) {
    display: none;
}

.question-page #fmanswer .answer-submit {
    margin-top: 12px;
}

/* Follow this question (sidebar) */
.follow-section + .follow-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.follow-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.follow-label svg {
    flex: none;
    color: var(--muted);
}

.follow-section p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.follow-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.follow-actions a.subscription-settings-note {
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

ul.follow-feeds {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.follow-feeds li {
    margin: 0;
    list-style: none;
}

a.follow-feed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
}

a.follow-feed::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='5' fill='%23f26522'/%3E%3Cpath d='M6.5 11a6.5 6.5 0 016.5 6.5M6.5 6.5a11 11 0 0111 11' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='7.3' cy='16.7' r='1.6' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
}

a.follow-feed:hover {
    color: var(--brand);
    text-decoration: underline;
}

/* Markdown basics (question page sidebar, while writing an answer) */
.markdown-basics h3.subtitle {
    color: var(--muted);
}

ul.markdown-basics-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

ul.markdown-basics-list li {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    list-style: none;
}

ul.markdown-basics-list li.md-syntax, ul.markdown-basics-list code {
    font-family: var(--mono);
    font-size: 12.5px;
}

ul.markdown-basics-list code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--code-inline-bg);
    overflow-wrap: anywhere;
}

.markdown-basics .info-box-follow-up-links {
    margin: 0;
    text-align: left;
}

.markdown-basics .info-box-follow-up-links a {
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Revision history ---- */

#revisions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

details.revision {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    font-size: inherit;
}

details.revision.by-author {
    border-left: 3px solid var(--brand);
}

summary.revision-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
}

summary.revision-header::-webkit-details-marker {
    display: none;
}

summary.revision-header:hover {
    background: var(--hover-overlay);
}

summary.revision-header:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

details.revision[open] > summary.revision-header {
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 10px 10px 0 0;
}

.revision-header .revision-number {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
}

.revision-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.revision-summary {
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.revision-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    color: var(--muted);
    font-size: 13px;
}

.revision-meta img.gravatar {
    width: 20px;
    height: 20px;
}

.revision-chevron {
    flex: none;
    color: var(--muted);
    transition: transform .15s;
}

details.revision[open] .revision-chevron {
    transform: rotate(180deg);
}

.revision-body {
    padding: 14px 16px 16px;
}

.revision-body .revision-mark {
    display: block;
    width: auto;
    margin: 0 0 12px;
    font-size: inherit;
    overflow: visible;
}

/* The author card (the date is already in the header). */
.revision-body .revision-mark .post-update-info {
    display: inline-flex;
    float: none;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--info-border);
    border-radius: 999px;
    background: var(--brand-soft);
}

.revision-body .revision-mark .post-update-info-when {
    display: none;
}

.revision-body .revision-mark .post-update-info-who p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 14px;
}

.revision-body .revision-mark .post-update-info-who br {
    display: none;
}

.revision-body .revision-mark .post-update-info-who a {
    font-weight: 600;
}

.revision-body .revision-mark p {
    margin: 0;
}

.revision-body .revision-mark .post-update-info-who {
    display: flex;
    align-items: center;
    gap: 8px;
}

.revision-body .rev-body {
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
}

.revision-body .rev-body pre {
    overflow-x: auto;
}

.revision-body h2.revision-title {
    margin: 0 0 8px;
    padding: 0;
    color: var(--text);
    font-size: 19px;
    font-weight: 650;
}

.revision-body .tags {
    margin-top: 8px;
}

ins {
    padding: 0 2px;
    border-radius: 3px;
    background: var(--success-soft);
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--success);
}

del {
    padding: 0 2px;
    border-radius: 3px;
    background: var(--danger-soft);
    color: var(--danger-text);
    text-decoration: line-through;
}

/* ---- Badges ---- */

ul.badge-index {
    margin: 0;
    padding: 0;
    list-style: none;
}

#medalList > li.badge-row {
    display: grid;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    align-items: center;
    gap: 4px 16px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    list-style: none;
    line-height: 1.4;
}

#medalList > li.badge-row:last-child {
    border-bottom: 0;
}

#medalList .badgeListItem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    float: none;
    width: auto;
    margin: 0;
}

#medalList .badgeListDescription {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    color: var(--muted);
}

.badge-count {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.badge-mine {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--success-soft);
    color: var(--success);
    font-size: 12px;
    font-weight: 600;
}

.badge-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 24px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--border);
}

.badge-hero-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--warn-border);
    border-radius: 50%;
    background: var(--warn-bg);
    font-size: 30px;
    line-height: 1;
}

.badge-hero-text {
    min-width: 0;
}

.badge-hero-kicker {
    margin: 0 0 2px;
    font-size: 13px;
}

.badge-hero-kicker a {
    color: var(--muted);
}

.badge-hero-description {
    margin: 6px 0 10px;
    color: var(--text);
    font-size: 16px;
}

.badge-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.badge-class {
    padding: 1px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text);
    font-weight: 600;
    text-transform: capitalize;
}

h2.badge-awardees-title {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

ul.badge-awardees {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.badge-awardees li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    list-style: none;
}

a.badge-awardee {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
}

a.badge-awardee:hover .badge-awardee-name {
    color: var(--brand);
    text-decoration: underline;
}

a.badge-awardee img.gravatar {
    flex: none;
    width: 40px;
    height: 40px;
}

.badge-awardee-name {
    min-width: 0;
    overflow: hidden;
    color: var(--brand);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-awardee-rep {
    flex: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.badge-awardee-count {
    flex: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.badge-awardees-empty {
    color: var(--muted);
}

/* ---- Contact form ---- */

.feedback-card {
    max-width: 560px;
}

.feedback-card textarea {
    display: block;
    width: 100%;
    min-height: 160px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
}

.feedback-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 6px;
}

.auth-card .feedback-cancel, .auth-card .feedback-cancel:hover {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
}

.auth-card .feedback-cancel:hover {
    color: var(--text);
    text-decoration: underline;
}

/* Connect another account, with no sign-in services set up */
.auth-empty {
    padding: 18px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    color: var(--muted);
    text-align: center;
}

.auth-empty p {
    margin: 0;
}

.auth-empty p + p {
    margin-top: 8px;
}

@media (max-width: 640px) {
    h1.page-title, h1.headNormal, .page-header h1 {
        font-size: 21px;
    }

    #medalList > li.badge-row {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px 0;
    }

    .badge-hero {
        gap: 12px;
    }

    .badge-hero-icon {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    ul.badge-awardees {
        grid-template-columns: minmax(0, 1fr);
    }

    summary.revision-header {
        gap: 10px;
        padding: 10px 12px;
    }

    .revision-body {
        padding: 12px;
    }

    .language-switch select, .language-switch select:focus {
        width: auto;
        font-size: 16px;
    }

    /* Messages: a compact bar at the bottom that stops above the footer
       instead of covering the end of the page. */
    .notify {
        position: sticky;
        top: auto;
        right: auto;
        bottom: 0;
        left: auto;
        z-index: 60;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 10px 52px 10px 16px;
        border-width: 1px 0 0;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -6px 20px rgba(16, 24, 40, .14);
    }

    .notify p {
        margin: 2px 0;
        font-size: 14px;
        line-height: 1.4;
    }

    #close-notify, #close-notify:hover {
        top: 50%;
        right: 6px;
        width: 44px;
        height: 44px;
        margin-top: -22px;
    }

    .question-page a.accept-answer {
        width: auto;
        min-width: 48px;
        font-size: 10px;
    }

    .question-page .comment-info .comment-actions a.comment-like, .question-page .comment-info .comment-actions a.comment-edit,
    .question-page .comment-info .comment-actions a.comment-delete, .question-page .comment-info .comment-actions a.comment-convert,
    .question-page .comment-info .comment-actions a.comment-convert-to-question {
        width: 30px;
        height: 30px;
    }
}

/* A light pill behind the logo, so dark lettering stays readable. */
:root[data-theme="dark"] #logo img {
    padding: 3px 8px;
    border-radius: 10px;
    background: #eef2f7;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] a.post-vote.up {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3ccd6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] a.post-vote.down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3ccd6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] a.post-vote.up:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379b0ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] a.post-vote.down:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9a6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] a.post-vote.up.on, :root[data-theme="dark"] a.post-vote.up.on:hover {
    border-color: var(--button-bg);
    background-color: var(--button-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] a.post-vote.down.on, :root[data-theme="dark"] a.post-vote.down.on:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .question-page a.accept-answer:not(.on) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3ccd6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .question-page a.accept-answer:not(.on):hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fb950' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .language-switch select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba7b4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .badge-hero-icon {
    border-color: var(--warn-border);
}

/* A clearer fade on scrolling tab rows. */
.scroll-row.fade-start { --fade-left: 56px; }
.scroll-row.fade-end { --fade-right: 56px; }

/* Badge names keep their medal colours in dark mode. */
:root[data-theme="dark"] .badges a.medal {
    color: inherit;
}

/* ======================================================================
   3. Profile pages
   ====================================================================== */

/*
 * Profile pages (templates/user.html, users/*.html) and the settings pages
 * (edit profile, email settings, preferences, sign-in and password, your data):
 * a header card, a tab bar, stat tiles, section cards and settings forms in the
 * style of the question page and the sign-in pages. Loaded after modern.css,
 * whose older profile rules it overrides; colours come from its variables, so
 * dark mode follows them.
 */

/* Line icons, used as masks (they take the text colour). */
:root {
    --profile-icon-ask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    --profile-icon-answer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");
    --profile-icon-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.5 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7A8.4 8.4 0 0 1 4 11.5 8.5 8.5 0 0 1 12.5 3h.5a8.5 8.5 0 0 1 8 8z'/%3E%3C/svg%3E");
    --profile-icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z'/%3E%3C/svg%3E");
    --profile-icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E");
    --profile-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    --profile-icon-award: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpath d='M8.2 13.9L7 23l5-3 5 3-1.2-9.1'/%3E%3C/svg%3E");
    --profile-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E");
    --profile-icon-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 6l-9.5 9.5-5-5L1 18'/%3E%3Cpath d='M17 6h6v6'/%3E%3C/svg%3E");
    --profile-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    --profile-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
    --profile-icon-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cpath d='M4 22v-7'/%3E%3C/svg%3E");
    --profile-icon-userplus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='M20 8v6M23 11h-6'/%3E%3C/svg%3E");
    --profile-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
    --profile-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    --profile-icon-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
    --profile-icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E");
    --profile-icon-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E");
    --profile-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    --profile-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
    --profile-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --profile-icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");
    --profile-icon-cake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8'/%3E%3Cpath d='M4 16s1.5-1 4-1 4 2 4 2 1.5-2 4-2 4 1 4 1'/%3E%3Cpath d='M2 21h20M12 7v4'/%3E%3Cpath d='M12 3.5l.01 0'/%3E%3C/svg%3E");
    --profile-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---- Page frame ------------------------------------------------------ */

/* The profile is a stack of cards on the page background, not one white box. */
#CAFull:has(> .profile-page) {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.profile-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: auto;
    margin: 0;
}

/* style.css centres every div (margin: 0 auto), which shrinks flex and grid items. */
:where(.profile-page) div {
    margin-left: 0;
    margin-right: 0;
}

.profile-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.profile-page a:focus-visible, .profile-page button:focus-visible, .profile-page input:focus-visible,
.profile-page select:focus-visible, .profile-page textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---- Header card ----------------------------------------------------- */

.profile-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "avatar identity actions";
    align-items: start;
    gap: 4px 24px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.profile-card.suspended-user {
    border-color: var(--danger-text);
    box-shadow: inset 4px 0 0 var(--danger-text), var(--shadow);
}

.profile-avatar {
    grid-area: avatar;
    margin: 0;
}

.profile-card .profile-avatar img.gravatar {
    display: block;
    width: 112px;
    max-width: none;
    height: 112px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border);
}

.profile-identity {
    grid-area: identity;
    min-width: 0;
    margin: 0;
}

.profile-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
}

.profile-card h1.profile-name {
    margin: 0;
    color: var(--text);
    font-size: 26px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.profile-role {
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
}

.profile-role-suspended {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.profile-realname {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 15px;
}

ul.profile-figures {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 20px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

ul.profile-figures li {
    margin: 0;
    list-style: none;
}

.profile-figure-rep {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.profile-card .profile-figure-rep .scoreNumber {
    color: var(--text);
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 4px;
}

.profile-figure-label {
    color: var(--muted);
    font-size: 13px;
}

.profile-figure-badges {
    display: inline-flex;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.profile-badge-count .badge1, .profile-badge-count .badge2, .profile-badge-count .badge3 {
    font-size: 13px;
}

ul.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 12px 0 0;
    padding: 0;
    color: var(--muted);
    font-size: 13px;
    list-style: none;
}

ul.profile-meta li {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    min-width: 0;
    margin: 0;
    list-style: none;
    overflow-wrap: anywhere;
}

ul.profile-meta li::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: var(--profile-icon-dot) center / contain no-repeat;
    mask: var(--profile-icon-dot) center / contain no-repeat;
}

ul.profile-meta .profile-meta-joined::before { -webkit-mask-image: var(--profile-icon-calendar); mask-image: var(--profile-icon-calendar); }
ul.profile-meta .profile-meta-seen::before { -webkit-mask-image: var(--profile-icon-clock); mask-image: var(--profile-icon-clock); }
ul.profile-meta .profile-meta-location::before { -webkit-mask-image: var(--profile-icon-pin); mask-image: var(--profile-icon-pin); }
ul.profile-meta .profile-meta-website::before { -webkit-mask-image: var(--profile-icon-link); mask-image: var(--profile-icon-link); }
ul.profile-meta .profile-meta-age::before { -webkit-mask-image: var(--profile-icon-user); mask-image: var(--profile-icon-user); }
ul.profile-meta .profile-meta-email::before { -webkit-mask-image: var(--profile-icon-mail); mask-image: var(--profile-icon-mail); }

ul.profile-meta time {
    color: var(--text);
}

ul.profile-meta a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.profile-unvalidated {
    color: var(--warn-text);
    font-weight: 600;
}

.profile-about {
    max-width: 72ch;
    margin: 14px 0 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

/* The old grey box (style.css, modern.css .user-about). */
.profile-card .profile-about.user-about {
    width: auto;
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
    border-radius: 0;
    background: none;
}

.profile-about p {
    margin: 0 0 8px;
}

.profile-about p:last-child {
    margin-bottom: 0;
}

.profile-about a {
    text-decoration: underline;
}

.profile-suspension {
    margin: 12px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--danger-text);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--text);
}

/* ---- Header actions: edit, report, settings and moderation menu ------- */

.profile-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

.profile-card .profile-actions a.button {
    padding: 8px 14px;
    font-size: 14px;
}

.profile-card a.profile-report-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.profile-card a.profile-report-link:hover {
    background: var(--hover-overlay);
    color: var(--text);
}

.profile-card #user-menu-container {
    position: relative;
    margin: 0;
    text-align: left;
}

.profile-card #user-menu.profile-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    min-height: 36px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.profile-card #user-menu.profile-menu-trigger:hover,
.profile-card #user-menu.profile-menu-trigger[aria-expanded="true"] {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--text);
}

.profile-card #user-menu.profile-menu-trigger::after {
    width: 12px;
    height: 12px;
    margin: 0;
    background: currentColor;
    -webkit-mask: var(--profile-icon-chevron) center / contain no-repeat;
    mask: var(--profile-icon-chevron) center / contain no-repeat;
}

.profile-card #user-menu-dropdown {
    top: calc(100% + 6px);
    right: 0;
    z-index: 600;
    min-width: 240px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
}

.profile-card #user-menu-dropdown li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-card #user-menu-dropdown li.item:hover {
    background: none;
    color: inherit;
}

.profile-card #user-menu-dropdown li.item a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    white-space: normal;
}

.profile-card #user-menu-dropdown li.item a:hover, .profile-card #user-menu-dropdown li.item a:focus {
    background: var(--hover-overlay);
    color: var(--text);
    outline: none;
}

.profile-card #user-menu-dropdown li.item a:focus-visible {
    box-shadow: inset 0 0 0 2px var(--brand);
}

/* The sprite icons of user.css don't fit the new menu. */
.profile-card #user-menu-dropdown li.item span {
    display: none;
}

.profile-card #user-menu-dropdown li.separator {
    margin: 6px 0 2px;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--border-subtle);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}

/* ---- Tabs ------------------------------------------------------------ */

.profile-tabs.tabBar {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border);
}

.profile-tabs .tabsA {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 0;
    border-radius: 0;
    background: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-tabs .tabsA::-webkit-scrollbar {
    display: none;
}

.profile-tabs .tabsA a {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    margin: 0 0 -1px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    background: none;
    box-shadow: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.profile-tabs .tabsA a:hover {
    background: var(--hover-overlay);
    color: var(--text);
}

.profile-tabs .tabsA a.on, .profile-tabs .tabsA a[aria-current="page"] {
    border-bottom-color: var(--brand);
    background: none;
    box-shadow: none;
    color: var(--text);
    font-weight: 600;
}

.profile-tabs .tabsA a:focus-visible {
    outline-offset: -2px;
}

.profile-tab-count {
    min-width: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--code-inline-bg);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---- Sections -------------------------------------------------------- */

.profile-section {
    min-width: 0;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.profile-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin: 0 0 12px;
}

.profile-section-head h2 {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
}

/* "<span class=count>3</span> Questions": the number as part of the heading. */
.profile-section-head h2 .count {
    color: var(--text);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
}

.profile-section-head .feed-icon {
    margin-left: auto;
}

.profile-section-more {
    font-size: 13px;
    font-weight: 600;
}

.profile-section-note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.profile-section-note strong {
    color: var(--text);
    font-size: 15px;
}

.profile-empty {
    margin: 0;
    padding: 20px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.profile-empty p {
    margin: 0 0 8px;
    color: var(--text);
    font-weight: 500;
}

.profile-empty p:last-child {
    margin-bottom: 0;
}

.profile-empty p.profile-empty-hint {
    color: var(--muted);
    font-weight: 400;
}

p.profile-empty {
    color: var(--muted);
}

.profile-empty a:not(.button) {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.profile-empty .button {
    margin-top: 4px;
}

.profile-sort {
    margin: 0 0 4px;
}

.profile-page .pager:empty {
    display: none;
}

/* ---- Overview: stat tiles, columns, tags and badges ------------------- */

.profile-overview {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

ul.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

li.profile-stat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    list-style: none;
}

li.profile-stat:has(> .profile-stat-link) {
    padding: 0;
}

a.profile-stat-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 14px 16px;
    border-radius: 11px;
    color: inherit;
    text-decoration: none;
}

a.profile-stat-link:hover {
    background: var(--hover-overlay);
    color: inherit;
    text-decoration: none;
}

a.profile-stat-link:hover .profile-stat-label {
    color: var(--brand);
}

.profile-stat-value {
    color: var(--text);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.profile-stat-label {
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.profile-stat-accepted .profile-stat-value {
    color: var(--success);
}

.profile-stat-detail {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.profile-stat-detail .vote-count {
    color: var(--text);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
}

.profile-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 16px;
}

.profile-main, .profile-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    margin: 0;
}

ul.profile-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    list-style: none;
}

ul.profile-tag-list li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    list-style: none;
}

ul.profile-tag-list a.post-tag {
    margin: 0;
}

.profile-page .tag-number {
    color: var(--muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

ul.profile-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.profile-badge-grid li {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 0;
    list-style: none;
}

ul.profile-badge-grid a.medal {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Questions inside a section card: the list's own top border is enough. */
.profile-section .user-stats-table .short-summary:first-child {
    border-top: 0;
}

/* ---- Answers list ---------------------------------------------------- */

ul.profile-answers {
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-answers li.answer-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--border-subtle);
    list-style: none;
}

.profile-answers li.answer-summary:first-child {
    border-top: 0;
}

.profile-answers .answer-summary .answer-votes {
    float: none;
    flex: none;
    width: auto;
    min-width: 40px;
    height: auto;
    margin: 0;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.profile-answers .answer-summary .answer-votes.answered-accepted {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.profile-answers .answer-link {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.profile-answers .answer-when, .vote-list .vote-when {
    flex: none;
    color: var(--muted);
    font-size: 12px;
}

/* ---- Activity -------------------------------------------------------- */

.action_date {
    text-align: right;
}

ol.activity-list, ol.reputation-list, ol.vote-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

ol.activity-list > li, ol.reputation-list > li, ol.vote-list > li {
    margin: 0;
    list-style: none;
}

ol.activity-list > li + li, ol.reputation-list > li + li, ol.vote-list > li + li {
    border-top: 1px solid var(--border-subtle);
}

.profile-page .activity-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: start;
    gap: 2px 12px;
    margin: 0;
    padding: 10px 0;
}

.profile-page .activity-item .action_body {
    min-width: 0;
    margin: 0;
    padding-top: 5px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.profile-page .activity-item .action_body a {
    font-weight: 500;
}

.profile-page .activity-item .action_date {
    margin: 0;
    padding-top: 6px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.activity-icon {
    display: none;
}

.profile-page .activity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
}

.profile-page .activity-icon::before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: var(--profile-icon-dot) center / contain no-repeat;
    mask: var(--profile-icon-dot) center / contain no-repeat;
}

.activity-ask .activity-icon::before, .activity-answertoquestion .activity-icon::before,
.activity-commenttoquestion .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-ask); mask-image: var(--profile-icon-ask);
}
.activity-answer .activity-icon::before, .activity-commenttoanswer .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-answer); mask-image: var(--profile-icon-answer);
}
.activity-comment .activity-icon::before, .activity-answertocomment .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-comment); mask-image: var(--profile-icon-comment);
}
.activity-revise .activity-icon::before, .activity-rollback .activity-icon::before,
.activity-wikify .activity-icon::before, .activity-editprofile .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-edit); mask-image: var(--profile-icon-edit);
}
.activity-retag .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-tag); mask-image: var(--profile-icon-tag);
}
.activity-acceptanswer .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-check); mask-image: var(--profile-icon-check);
}
.activity-award .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-award); mask-image: var(--profile-icon-award);
}
.activity-favorite .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-star); mask-image: var(--profile-icon-star);
}
.activity-bonusrep .activity-icon::before, .activity-awardpoints .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-trend); mask-image: var(--profile-icon-trend);
}
.activity-close .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-lock); mask-image: var(--profile-icon-lock);
}
.activity-delete .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-trash); mask-image: var(--profile-icon-trash);
}
.activity-report .activity-icon::before, .activity-suspend .activity-icon::before,
.activity-flag .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-flag); mask-image: var(--profile-icon-flag);
}
.activity-userjoins .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-userplus); mask-image: var(--profile-icon-userplus);
}
.activity-emailvalidation .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-mail); mask-image: var(--profile-icon-mail);
}
.activity-voteup .activity-icon::before, .activity-voteupcomment .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-up); mask-image: var(--profile-icon-up);
}
.activity-votedown .activity-icon::before {
    -webkit-mask-image: var(--profile-icon-down); mask-image: var(--profile-icon-down);
}

.profile-page .activity-acceptanswer .activity-icon {
    background: var(--success-soft);
    color: var(--success);
}

.profile-page .activity-award .activity-icon, .profile-page .activity-favorite .activity-icon,
.profile-page .activity-bonusrep .activity-icon, .profile-page .activity-awardpoints .activity-icon {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.profile-page .activity-delete .activity-icon, .profile-page .activity-report .activity-icon,
.profile-page .activity-suspend .activity-icon, .profile-page .activity-close .activity-icon,
.profile-page .activity-votedown .activity-icon {
    background: var(--danger-soft);
    color: var(--danger-text);
}

/* ---- Reputation ------------------------------------------------------ */

.profile-page .reputation-history {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 0;
}

.profile-page .reputation-history #diagram.reputation-chart {
    float: none;
    width: 100%;
    height: 280px;
    margin: 0;
}

.profile-page .reputation-chart .flot-svg text, .profile-page .reputation-chart .flot-tick-label {
    fill: var(--muted);
    color: var(--muted);
}

.profile-page .reputation-list {
    float: none;
    width: auto;
    height: auto;
    overflow: visible;
}

.profile-page .reputation-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: 0 12px;
}

.profile-page .reputation-item .activity-item {
    grid-template-columns: minmax(0, 1fr) auto;
}

.profile-page .reputation-item .activity-icon {
    display: none;
}

.profile-page .reputation-change {
    display: flex;
    justify-content: center;
    margin: 10px 0 0;
    padding: 0;
    background: none;
    font-family: inherit;
}

.profile-page .reputation-change .positiveReputation, .profile-page .reputation-change .negativeReputation {
    float: none;
    min-width: 52px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.profile-page .reputation-change .positiveReputation {
    background: var(--success-soft);
    color: var(--success);
}

.profile-page .reputation-change .positiveReputation::before {
    content: "+";
}

.profile-page .reputation-change .negativeReputation {
    background: var(--danger-soft);
    color: var(--danger-text);
}

/* ---- Votes ----------------------------------------------------------- */

.vote-list .vote-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.vote-list .vote-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
}

.vote-list .vote-up .vote-icon {
    background: var(--success-soft);
    color: var(--success);
}

.vote-list .vote-down .vote-icon {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.vote-list .vote-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.vote-list .vote-title a {
    color: var(--brand);
    font-weight: 500;
}

/* ---- Moderation dialogs (report, suspend, award points) --------------- */

.profile-dialog {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min(360px, calc(100vw - 72px));
    text-align: left;
}

.profile-dialog h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 650;
}

.profile-dialog label {
    margin: 8px 0 2px;
    color: var(--text);
    font-weight: 600;
}

.profile-dialog textarea, .profile-dialog select, .profile-dialog input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.profile-dialog-days {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.profile-dialog-days[hidden] {
    display: none;
}

.profile-dialog-days label {
    flex: 1 0 100%;
}

.profile-dialog .profile-dialog-days input[type="number"] {
    width: 90px;
}

.profile-dialog-help {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

/* ---- Settings pages -------------------------------------------------- */

.settings-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
}

.settings-header-avatar img.gravatar {
    display: block;
    width: 56px;
    height: 56px;
}

.settings-header-text {
    min-width: 0;
    margin: 0;
}

.settings-header h1 {
    margin: 0;
    color: var(--text);
    font-size: 26px;
    font-weight: 650;
    line-height: 1.25;
}

.settings-header p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.settings-header a {
    font-weight: 600;
}

.settings-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.settings-nav {
    position: sticky;
    top: 12px;
    margin: 0;
}

.settings-nav ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-nav li {
    margin: 0;
    list-style: none;
}

.settings-nav a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.settings-nav a:hover {
    background: var(--hover-overlay);
    color: var(--text);
    text-decoration: none;
}

.settings-nav a[aria-current="page"] {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
    color: var(--text);
    font-weight: 650;
}

.settings-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: 760px;
    margin: 0;
}

.settings-card {
    margin: 0;
    padding: 24px 28px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.settings-card h2 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 19px;
    font-weight: 650;
    line-height: 1.3;
}

.settings-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0 0 10px;
}

.settings-card-head h2 {
    margin: 0;
}

.settings-lead, .settings-card .email-settings-hint, .settings-card .email-settings-empty {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.settings-card > :last-child {
    margin-bottom: 0;
}

.settings-alert.auth-alert {
    margin: 12px 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--danger-text);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--text);
}

.settings-alert.auth-alert:focus {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.settings-alert p {
    margin: 0;
}

.settings-alert .auth-alert-title {
    font-weight: 600;
}

.settings-alert p + p {
    margin-top: 4px;
}

/* Fields: as on the sign-in pages (auth.css), label above the input. */
.settings-card .auth-field {
    margin: 0 0 18px;
}

.settings-card .auth-field label, .settings-label {
    display: block;
    margin: 0 0 6px;
    color: var(--text);
    font-weight: 600;
}

.settings-value {
    margin: 0;
    color: var(--text);
    font-size: 15px;
}

.settings-card .auth-help {
    margin: -2px 0 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.settings-card .auth-help::first-letter {
    text-transform: uppercase;
}

.settings-card ul.auth-rules {
    padding-left: 18px;
    list-style: disc;
}

.settings-card ul.auth-rules li {
    margin: 0;
    list-style: disc;
}

.settings-card .auth-error {
    margin: 0 0 8px;
    color: var(--danger-text);
    font-size: 14px;
    font-weight: 600;
}

.settings-card .auth-field input[type="text"], .settings-card .auth-field input[type="email"],
.settings-card .auth-field input[type="password"], .settings-card .auth-field input:not([type]) {
    display: block;
    width: 100%;
    max-width: 440px;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-size: 16px;
}

.settings-card .auth-field input[aria-invalid="true"] {
    border-color: var(--danger-text);
}

.settings-card .password-field {
    position: relative;
    max-width: 440px;
}

.settings-card .password-field input[type="password"], .settings-card .password-field input[type="text"] {
    padding-right: 52px;
}

.settings-card .password-toggle {
    position: absolute;
    top: 50%;
    right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    transform: translateY(-50%);
}

.settings-card .password-toggle[hidden] {
    display: none;
}

.settings-card .password-toggle:hover {
    border: 0;
    background: var(--hover-overlay);
    color: var(--text);
}

.settings-card .password-toggle svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-card .password-toggle .icon-hide, .settings-card .password-toggle[aria-pressed="true"] .icon-show {
    display: none;
}

.settings-card .password-toggle[aria-pressed="true"] .icon-hide {
    display: block;
}

/* Password rules ticked as the person types, and the strength bar (osqa.password.js), on the
   settings pages and the sign-in pages (auth/field.html). */
ul.auth-rules li.is-met {
    color: var(--success);
}

ul.auth-rules li.is-met::marker {
    content: "\2713  ";
}

ul.auth-rules li.is-unmet {
    color: var(--danger-text);
}

.password-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.password-meter[hidden] {
    display: none;
}

.password-meter-bar {
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--border-subtle);
}

.password-meter-bar span {
    display: block;
    width: 8%;
    height: 100%;
    border-radius: 3px;
    background: var(--danger-text);
    transition: width 0.15s ease;
}

.password-meter[data-level="1"] .password-meter-bar span {
    width: 25%;
    background: var(--danger-text);
}

.password-meter[data-level="2"] .password-meter-bar span {
    width: 50%;
    background: var(--warn-border-strong);
}

.password-meter[data-level="3"] .password-meter-bar span {
    width: 75%;
    background: var(--success);
}

.password-meter[data-level="4"] .password-meter-bar span {
    width: 100%;
    background: var(--success);
}

.password-meter-text {
    min-width: 7em;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .password-meter-bar span {
        transition: none;
    }
}

/* What deleting the account does (users/data.html). */
.account-delete-list {
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--text);
    list-style: disc;
}

.account-delete-list li {
    margin: 0 0 4px;
    list-style: disc;
}

.settings-avatar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 20px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--background);
}

.settings-avatar img {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.settings-avatar p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.settings-avatar a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.settings-actions, .settings-card .submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--border-subtle);
}

.settings-actions input[type="submit"] {
    min-height: 42px;
    padding: 10px 20px;
    font-size: 15px;
}

.settings-cancel {
    color: var(--muted);
    font-weight: 600;
}

.settings-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-fieldset legend {
    margin: 0 0 8px;
    padding: 0;
    color: var(--text);
    font-weight: 600;
}

.settings-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.settings-check input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--brand);
}

.settings-check label {
    margin: 0;
    color: var(--text);
}

/* Preferences: the explanation under "Suggest questions I could answer". */
.settings-check + .email-settings-hint {
    margin: 6px 0 16px 28px;
}

ul.settings-list {
    margin: 0 0 16px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    list-style: none;
}

ul.settings-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 0;
    padding: 10px 14px;
    list-style: none;
}

ul.settings-list li + li {
    border-top: 1px solid var(--border-subtle);
}

.settings-list-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.settings-list form {
    margin: 0;
}

/* Outline buttons (.plain-button keeps them out of the dark-mode button colours). */
.settings-card a.button.secondary-button, .settings-card button.danger-outline-button,
.settings-main .email-master .plain-button, .settings-card .subscription_unsubscribe_button {
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.settings-card a.button.secondary-button:hover, .settings-main .email-master .plain-button:hover,
.settings-card .subscription_unsubscribe_button:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--text);
}

.settings-card button.danger-outline-button {
    border-color: var(--danger-text);
    color: var(--danger-text);
}

.settings-card button.danger-outline-button:hover {
    border-color: var(--danger-text);
    background: var(--danger-soft);
    color: var(--danger-text);
}

/* Passkeys and two-step verification (users/security.html, two_factor_setup.html, recovery_codes.html). */
.security-card .security-primary {
    min-height: 42px;
    padding: 10px 18px;
    font-size: 15px;
}

.security-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.security-item-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
}

.security-item-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.security-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.security-item-name {
    color: var(--text);
    font-weight: 600;
}

.security-item-meta, .security-empty, .security-note {
    color: var(--muted);
    font-size: 13px;
}

.security-empty {
    margin: 0 0 16px;
}

.security-passkey-add[hidden], .security-note[hidden], .security-card .auth-error[hidden] {
    display: none;
}

.security-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.settings-card .security-inline input[type="text"] {
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
}

.security-status {
    padding: 2px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.security-status-on {
    border-color: var(--success);
    background: var(--success-soft);
    color: var(--success);
}

.security-details {
    margin: 0 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.security-details summary {
    padding: 12px 14px;
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}

.security-details form {
    padding: 0 14px 14px;
}

.security-details .settings-actions {
    margin-top: 4px;
    padding-top: 14px;
}

.security-proof-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.security-steps {
    margin: 12px 0 0;
    padding-left: 22px;
}

.security-steps > li {
    margin: 0 0 22px;
    padding-left: 4px;
}

.security-steps h3 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 16px;
    font-weight: 650;
}

.security-qr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

/* A QR code needs dark modules on a light background, also in dark mode. */
.security-qr-image {
    flex: none;
    width: 196px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.security-qr-image svg {
    display: block;
    width: 100%;
    height: auto;
}

.security-secret {
    flex: 1 1 220px;
    min-width: 0;
}

.security-secret p {
    margin: 0 0 8px;
}

.security-secret-key, .security-codes code {
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--code-bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

.security-secret-key {
    display: inline-block;
    margin: 0 0 8px;
}

.settings-card .auth-field input.security-code-input {
    max-width: 220px;
    font-family: var(--mono);
    font-size: 20px;
    letter-spacing: 0.2em;
}

.security-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    margin: 0;
    padding-left: 28px;
}

.security-codes li {
    margin: 0;
    color: var(--muted);
}

.security-success {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 4px solid var(--success);
    border-radius: 8px;
    background: var(--success-soft);
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 640px) {
    .security-proof-fields, .security-codes {
        grid-template-columns: 1fr;
    }

    .security-qr-image {
        width: 172px;
    }
}

/* Sub-tabs of the email settings page. */
.settings-subtabs {
    margin: 0;
}

.settings-subtabs .tabsA {
    display: inline-flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.settings-subtabs .tabsA a {
    flex: none;
    padding: 7px 14px;
    font-size: 14px;
}

.settings-subtabs .tabsA a[aria-current="page"] {
    color: var(--text);
}

/* Email settings inside cards. */
.settings-main .email-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-main .email-settings h2 {
    margin: 0 0 12px;
}

.settings-main .email-master {
    margin: 0;
}

.settings-main .email-help-link {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.settings-main .email-settings-form > fieldset {
    margin: 0 0 18px;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
}

.settings-main .email-settings-form > fieldset > legend {
    margin: 0 0 8px;
    padding: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 650;
}

.settings-main .email-settings-form > .settings-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.settings-main .email-settings-form label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0;
}

.settings-main .email-settings-form input[type="checkbox"], .settings-main .email-settings-form input[type="radio"] {
    flex: none;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--brand);
}

.settings-main fieldset.email-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
}

.settings-main fieldset.email-choice:last-child {
    border-bottom: 0;
}

.settings-main fieldset.email-choice > legend {
    float: left;
    flex: 1 1 260px;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
}

.settings-main fieldset.email-choice > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.settings-main fieldset.email-choice label {
    margin: 0;
}

/* How often: radio cards (email settings). */
.settings-main fieldset.frequency-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.settings-main .frequency-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.settings-main .frequency-option:hover {
    border-color: var(--border-strong);
}

.settings-main .frequency-option:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.settings-main .frequency-option:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.settings-main .frequency-option input[type="radio"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--brand);
}

.settings-main .frequency-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-main .frequency-name {
    font-weight: 650;
}

.settings-main .frequency-hint {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.settings-main .email-frequency .settings-actions {
    margin-top: 12px;
}

.settings-main .email-settings-form label.email-sub-option {
    margin-left: 25px;
    color: var(--muted);
    font-size: 13px;
}

/* Questions you follow. */
ul.subscription-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.subscription-items li.subscription_summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--border-subtle);
    list-style: none;
}

.subscription-items li.subscription_summary:first-child {
    border-top: 0;
}

.subscription-text {
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
}

.subscription-items .subscription_title a {
    font-size: 15px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.subscription-items .subscription_details {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.subscription-items form {
    margin: 0;
}

.subscription-filter {
    font-size: 13px;
    font-weight: 600;
}

/* Your data and account: the danger zone. */
.settings-card.account-section {
    margin: 0;
}

.settings-card.account-danger {
    border-color: var(--danger-text);
    box-shadow: inset 4px 0 0 var(--danger-text), var(--shadow);
}

.settings-card.account-danger h2 {
    color: var(--danger-text);
}

.settings-card .account-delete-form {
    display: block;
    max-width: none;
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--border-subtle);
}

.settings-card .account-delete-form label {
    margin: 0 0 6px;
    font-size: 14px;
}

.settings-card .account-delete-form label strong {
    font-family: var(--mono);
}

.account-delete-note {
    margin: 0 0 10px;
    color: var(--danger-text);
    font-size: 13px;
    font-weight: 600;
}

.settings-card input[type="submit"].account-delete-button {
    min-height: 42px;
    margin: 0;
    padding: 10px 20px;
    border-color: #b42318;
    background: #b42318;
    color: #fff;
    font-size: 15px;
}

.settings-card input[type="submit"].account-delete-button:hover {
    border-color: #912018;
    background: #912018;
}

.settings-card input[type="submit"].account-delete-button:disabled {
    border-color: var(--border-strong);
    background: var(--code-inline-bg);
    color: var(--muted);
    cursor: not-allowed;
}

/* ---- Tablets and phones ---------------------------------------------- */

@media (max-width: 900px) {
    .profile-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .settings-nav {
        position: static;
        border-bottom: 1px solid var(--border);
    }

    .settings-nav ul {
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .settings-nav li {
        flex: none;
    }

    .settings-nav a {
        margin-bottom: -1px;
        padding: 10px 12px;
        border-bottom: 2px solid transparent;
        border-radius: 6px 6px 0 0;
        white-space: nowrap;
    }

    .settings-nav a[aria-current="page"] {
        border-bottom-color: var(--brand);
        background: none;
        box-shadow: none;
    }
}

@media (max-width: 640px) {
    .profile-page, .profile-content, .profile-overview, .profile-main, .profile-side, .settings-main {
        gap: 12px;
    }

    .profile-card {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "avatar identity"
            "actions actions";
        gap: 14px 14px;
        padding: 16px;
    }

    .profile-card .profile-avatar img.gravatar {
        width: 72px;
        height: 72px;
        box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border);
    }

    .profile-card h1.profile-name {
        font-size: 22px;
    }

    ul.profile-meta {
        flex-direction: column;
        gap: 6px;
    }

    .profile-about {
        margin-top: 12px;
    }

    .profile-actions {
        justify-content: flex-start;
        padding-top: 12px;
        border-top: 1px solid var(--border-subtle);
    }

    .profile-card #user-menu-container {
        margin-left: auto;
    }

    .profile-card #user-menu-dropdown {
        position: absolute;
        right: 0;
        width: min(300px, calc(100vw - 40px));
        min-width: 0;
    }

    .profile-tabs .tabsA a {
        padding: 10px 12px;
    }

    ul.profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    li.profile-stat-votes {
        grid-column: 1 / -1;
    }

    li.profile-stat, a.profile-stat-link {
        padding: 12px 14px;
    }

    .profile-stat-value {
        font-size: 22px;
    }

    .profile-section {
        padding: 14px;
        border-radius: 10px;
    }

    .profile-page .activity-item {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .profile-page .activity-item .action_date {
        grid-column: 2;
        padding-top: 0;
        text-align: left;
    }

    .profile-page .reputation-item {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 0 10px;
    }

    .profile-page .reputation-item .activity-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-page .reputation-item .activity-item .action_date {
        grid-column: 1;
    }

    .profile-page .reputation-change .positiveReputation, .profile-page .reputation-change .negativeReputation {
        min-width: 44px;
        padding: 2px 6px;
    }

    .profile-page .reputation-history #diagram.reputation-chart {
        height: 220px;
    }

    .profile-answers li.answer-summary {
        flex-wrap: wrap;
    }

    .profile-answers .answer-link {
        flex-basis: calc(100% - 64px);
    }

    .profile-answers .answer-when {
        margin-left: 52px;
    }

    .vote-list .vote-item {
        flex-wrap: wrap;
    }

    .vote-list .vote-title {
        flex-basis: calc(100% - 48px);
    }

    .vote-list .vote-when {
        margin-left: 40px;
    }

    .settings-header h1 {
        font-size: 22px;
    }

    .settings-header-avatar img.gravatar {
        width: 44px;
        height: 44px;
    }

    .settings-card {
        padding: 18px 16px;
        border-radius: 10px;
    }

    .settings-actions input[type="submit"], .settings-card input[type="submit"].account-delete-button {
        width: 100%;
    }

    .settings-main fieldset.email-choice > legend {
        flex-basis: 100%;
    }
}

/* ======================================================================
   4. Ask and edit pages
   ====================================================================== */

/*
 * Post forms: ask a question (ask.html), edit a question or an answer
 * (question_edit.html, answer_edit.html, node/convert_to_question.html) and
 * change tags (question_retag.html), with the pieces in templates/compose/.
 * Loaded right after modern.css and scoped to .compose-page (the main
 * column) and .compose-header / .compose-tips, so it wins over the older
 * generic rules. Colours come from the tokens in modern.css, so dark mode
 * follows them; the look matches the sign-in pages (auth.css) and the
 * question page's answer form.
 */

.compose-page [hidden] {
    display: none !important;
}

/* style.css centres every div ("margin: 0 auto"), which stops them stretching. */
.compose-page div, .compose-tips div {
    margin-left: 0;
    margin-right: 0;
}

/* ---- Heading ---- */

.compose-header {
    margin-bottom: 22px;
    padding-bottom: 14px;
}

.compose-header h1 {
    margin: 0;
    color: var(--text);
    font-size: 26px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.compose-lead {
    margin: 6px 0 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.compose-lead a {
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 3px;
}

.compose-lead a:hover {
    color: var(--brand);
}

.compose-page.ask-body {
    padding-right: 0;
}

.compose-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
}

.compose-form > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* ---- Fields ---- */

.compose-field {
    min-width: 0;
}

.compose-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px 12px;
}

.compose-label {
    display: block;
    margin: 0 0 4px;
    color: var(--text);
    font-size: 15px;
    font-weight: 650;
}

.compose-help {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

/* "Applies to version" (compose/versions.html, osqa.versions.js). */
.compose-versions {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

#fmanswer .compose-versions {
    margin: 16px 0;
}

#fmanswer .version-choices, #fmanswer .version-choice {
    margin: 0;
}

.compose-versions[hidden], .version-choice[hidden] {
    display: none;
}

.compose-versions legend {
    padding: 0;
}

.compose-optional {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

.version-choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 16px;
}

.version-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.version-choice label {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.version-choice select {
    min-width: 160px;
    max-width: 100%;
    min-height: 40px;
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
}

.compose-page input#id_title, .compose-page input#id_summary {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
}

.compose-page input#id_title {
    font-size: 17px;
}

.compose-page input:focus-visible, .compose-page select:focus-visible, .compose-page textarea:focus-visible {
    border-color: var(--brand);
    outline: 2px solid rgba(44, 90, 160, .25);
    outline-offset: 0;
}

.compose-page [aria-invalid="true"], .compose-page .has-error .tag-chips, .compose-page .has-error #editor {
    border-color: var(--danger-text) !important;
}

/* ---- Messages ---- */

.compose-alert {
    padding: 12px 14px;
    border: 1px solid var(--danger-text);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--text);
}

.compose-alert:focus {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.compose-alert-title {
    margin: 0 0 4px;
    font-weight: 600;
}

.compose-alert ul {
    margin: 0;
    padding-left: 20px;
}

.compose-alert li {
    margin: 2px 0;
    list-style: disc;
}

.compose-alert a {
    color: var(--danger-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* "This post was changed while you were editing it" (compose/revision.html). */
.compose-conflict {
    margin-bottom: 16px;
    border-color: var(--warn-border-strong);
    background: var(--warn-bg);
}

.compose-conflict p {
    margin: 0;
}

.compose-conflict p + p {
    margin-top: 6px;
}

.compose-conflict a {
    color: var(--brand);
}

.compose-error {
    margin: 0 0 8px;
    color: var(--danger-text);
    font-size: 14px;
    font-weight: 600;
}

.compose-note {
    padding: 12px 14px;
    border: 1px solid var(--info-border);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--text);
    font-size: 14px;
}

.compose-note p {
    margin: 0;
}

.compose-note .compose-note-title {
    margin-bottom: 4px;
    font-weight: 600;
}

.compose-note a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Draft restored · Discard (osqa.drafts.js) */
.compose-page .draft-notice {
    gap: 6px;
    margin: 0;
    padding: 10px 14px;
}

.compose-page .draft-notice-text::after {
    content: "\00b7";
    margin-left: 6px;
    color: var(--muted);
}

.compose-page .draft-notice .draft-discard, .compose-page .draft-notice .draft-discard:hover {
    margin: 0;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Similar questions (osqa.ask.js) ---- */

/* style.css limits #ask-related-questions to a 150px scrolling box. */
#ask-related-questions.similar-questions {
    max-height: none;
    overflow: visible;
    margin-top: -10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.similar-details > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
}

.similar-details > summary::-webkit-details-marker {
    display: none;
}

.similar-details > summary::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin: 0 3px 0 1px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform .15s;
}

.similar-details[open] > summary::before {
    transform: rotate(45deg);
}

.similar-details > summary:focus-visible {
    border-radius: 8px;
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.similar-title {
    color: var(--text);
    font-weight: 650;
}

.similar-count {
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.similar-hint {
    margin: -4px 14px 6px 34px;
    color: var(--muted);
    font-size: 13px;
}

ul.similar-list {
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
}

li.similar-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    margin: 0;
    padding: 8px 14px 8px 34px;
    border-top: 1px solid var(--border-subtle);
    list-style: none;
}

.similar-link {
    flex: 1 1 260px;
    min-width: 0;
    color: var(--brand);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.similar-status {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.similar-status.is-answered {
    border-color: var(--success);
    color: var(--success);
}

.similar-status.is-accepted {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.similar-status.is-accepted::before {
    content: "";
    width: 8px;
    height: 4px;
    margin: -3px 1px 0 0;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* The AI duplicate check sits right under the title as well. */
.compose-page .ask-duplicates {
    margin: -10px 0 0;
}

/* ---- Editor and preview ---- */

.compose-tabs {
    display: none;
}

.compose-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compose-page #editor {
    display: block;
    min-height: 240px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 0 0 8px 8px;
    font-size: 15px;
}

.compose-preview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.compose-preview-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.compose-page .link-button, .compose-page .link-button:hover {
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.compose-page .link-button:focus-visible, .compose-tab:focus-visible, .tag-chip-remove:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.compose-page #previewer {
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: break-word;
    overflow-x: auto;
}

.compose-page #previewer:empty::before {
    content: attr(data-empty);
    color: var(--muted);
    font-size: 14px;
    font-style: italic;
}

.compose-page #previewer > :first-child {
    margin-top: 0;
}

.compose-page #previewer > :last-child {
    margin-bottom: 0;
}

.compose-page #previewer pre {
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--code-bg);
    overflow-x: auto;
}

.compose-page #previewer img {
    max-width: 100%;
    height: auto;
}

.compose-editor-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}

.compose-editor-footer:has(.editor-metrics:empty) {
    display: none;
}

/* ---- Tags as chips (osqa.tagchips.js) ---- */

.tag-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 5px 6px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    cursor: text;
}

.tag-chips:not(.is-ready) {
    padding: 0;
    border: 0;
}

.tag-chips:not(.is-ready) input {
    width: 100%;
    min-height: 44px;
    border-color: var(--border-strong);
    border-radius: 8px;
    font-size: 16px;
}

.tag-chips.is-ready:focus-within {
    border-color: var(--brand);
    outline: 2px solid rgba(44, 90, 160, .25);
}

ul.tag-chips-list {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}

li.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    margin: 0;
    padding: 0 2px 0 10px;
    border: 1px solid var(--info-border);
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 28px;
    list-style: none;
    cursor: default;
}

.tag-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compose-page button.tag-chip-remove, .compose-page button.tag-chip-remove:hover {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--brand-dark);
}

.compose-page button.tag-chip-remove:hover {
    background: var(--hover-overlay);
}

.compose-page input.tag-chips-entry {
    flex: 1 1 60px;
    min-width: 60px;
    min-height: 32px;
    margin: 0;
    padding: 4px 6px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 16px;
    box-shadow: none;
}

.compose-page input.tag-chips-entry:focus, .compose-page input.tag-chips-entry:focus-visible {
    border: 0;
    outline: 0;
}

.tag-chips-keys {
    white-space: nowrap;
}

/* ---- Community wiki, revision, retag preview ---- */

.compose-wiki {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 10px;
}

.compose-wiki input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand);
}

.compose-wiki label {
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}

.compose-wiki .compose-help {
    grid-column: 2;
    margin: 0;
}

.compose-revision-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compose-page select#id_revision {
    flex: 1 1 260px;
    width: 100% !important;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-size: 15px;
}

.compose-page input.compose-secondary, .compose-page input.compose-secondary:hover {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
}

.compose-quote {
    max-height: 320px;
    padding: 12px 16px;
    border-left: 4px solid var(--border-strong);
    border-radius: 0 8px 8px 0;
    background: var(--code-bg);
    overflow: auto;
}

.compose-quote > :first-child {
    margin-top: 0;
}

.compose-quote > :last-child {
    margin-bottom: 0;
}

/* ---- AI assistant (ask page) ---- */

.compose-page .ask-assistant {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--info-border);
    border-radius: 8px;
    background: var(--brand-soft);
}

.compose-page .ask-assistant-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.compose-page .ask-assistant-intro::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    background: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8zM19 15l.8 2.2 2.2.8-2.2.8L19 21l-.8-2.2-2.2-.8 2.2-.8zM5 15l.6 1.4L7 17l-1.4.6L5 19l-.6-1.4L3 17l1.4-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8zM19 15l.8 2.2 2.2.8-2.2.8L19 21l-.8-2.2-2.2-.8 2.2-.8zM5 15l.6 1.4L7 17l-1.4.6L5 19l-.6-1.4L3 17l1.4-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.compose-page .ask-assistant button {
    min-height: 38px;
    padding: 7px 14px;
    border-radius: 8px;
    font-weight: 600;
}

.compose-page .ask-assistant-hint {
    flex: 1 1 220px;
    margin: 0;
}

.compose-page .ask-assistant-answer {
    margin-top: 12px;
    border-left-width: 1px;
    border-color: var(--info-border);
    background: var(--surface);
}

/* ---- Buttons ---- */

.compose-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
}

.compose-page input.compose-submit {
    min-height: 46px;
    margin: 0;
    padding: 11px 24px;
    border-radius: 8px;
    font-size: 16px;
}

.compose-page input.compose-submit:disabled {
    opacity: .6;
    cursor: progress;
}

.compose-cancel {
    color: var(--muted);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.compose-cancel:hover {
    color: var(--text);
}

.compose-shortcut {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
}

.compose-shortcut kbd {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--background);
    color: var(--text);
    font: 600 11px/1.5 var(--font);
    text-align: center;
}

/* ---- Writing tips (sidebar) ---- */

.compose-tips {
    padding: 16px 16px 12px;
}

.compose-tips .compose-tips-title {
    /* Like the other sidebar headings (modern.css). */
    margin: 0 0 6px;
}

.compose-tip {
    border-top: 1px solid var(--border-subtle);
}

.compose-tip > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.compose-tip > summary::-webkit-details-marker {
    display: none;
}

.compose-tip > summary::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform .15s;
}

.compose-tip[open] > summary::after {
    transform: rotate(-135deg);
}

.compose-tip > summary:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.compose-tips .list-item {
    margin: 0 0 10px;
    padding-left: 18px;
    color: var(--text);
}

.compose-tips .list-item p, .compose-tips .list-item li {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.5;
}

/* markdown_help.html is a box of its own elsewhere: flattened in here. */
.compose-tip-markdown .boxC {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.compose-tip-markdown .boxC > .subtitle {
    display: none;
}

.compose-tip-markdown .boxC .list-item {
    margin-top: 0;
}

.compose-tip-markdown .boxC .info-box-follow-up-links {
    border: 0;
    text-align: left;
}

.compose-tip-markdown .boxC .list-item li {
    overflow-wrap: anywhere;
}

.compose-tips p.info-box-follow-up-links {
    margin: 2px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

/* ---- Phones ---- */

@media (max-width: 640px) {
    .compose-header {
        margin-bottom: 16px;
    }

    .compose-header h1 {
        font-size: 22px;
    }

    .compose-form {
        gap: 20px;
    }

    /* Write / Preview tabs instead of the preview under the editor. */
    .compose-tabs {
        display: flex;
        gap: 2px;
        padding: 2px;
        border-radius: 8px;
        background: var(--background);
        border: 1px solid var(--border);
        margin-bottom: 4px;
    }

    .compose-page button.compose-tab, .compose-page button.compose-tab:hover {
        min-width: 76px;
        min-height: 34px;
        margin: 0;
        padding: 6px 12px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--muted);
        font-size: 14px;
        font-weight: 600;
    }

    .compose-page button.compose-tab[aria-selected="true"] {
        background: var(--surface);
        color: var(--text);
        box-shadow: var(--shadow);
    }

    .compose-preview-head {
        display: none;
    }

    .compose-page #previewer {
        min-height: 240px;
        border-style: solid;
    }

    .compose-page #editor {
        min-height: 220px;
        font-size: 16px;
    }

    .compose-actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .compose-page input.compose-submit {
        width: 100%;
    }

    .compose-cancel {
        padding: 6px;
    }

    .compose-shortcut {
        display: none;
    }

    .compose-page .ask-assistant button {
        width: 100%;
    }

    li.similar-item, .similar-hint {
        padding-left: 14px;
        margin-left: 0;
    }

    .similar-hint {
        margin-left: 14px;
        padding-left: 0;
    }
}

/* ---- Dark mode ---- */

:root[data-theme="dark"] .similar-status.is-accepted {
    border-color: #238636;
    background: #238636;
    color: #fff;
}

:root[data-theme="dark"] .compose-page #previewer {
    background: transparent;
}

:root[data-theme="dark"] .compose-page input:focus-visible,
:root[data-theme="dark"] .compose-page select:focus-visible,
:root[data-theme="dark"] .compose-page textarea:focus-visible,
:root[data-theme="dark"] .tag-chips.is-ready:focus-within {
    outline-color: rgba(121, 176, 255, .35);
}

/* ---- Suggested edits (suggest_edit, review page suggested_edits/review.html) ---- */

.action-link .edit-pending {
    color: var(--muted);
    cursor: help;
}

.suggested-edits-link .suggested-edits-count {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    margin-left: 2px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.sugg-review {
    max-width: 920px;
}

.sugg-intro, .sugg-count, .sugg-more, .sugg-empty {
    color: var(--muted);
}

.sugg-undo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--info-border);
    border-radius: var(--radius);
    background: var(--brand-soft);
}

.sugg-card {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.sugg-head {
    margin-bottom: 10px;
}

.sugg-type {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 600;
}

.sugg-card h2.sugg-title {
    margin: 6px 0 2px;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.sugg-meta, .sugg-summary {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.sugg-summary {
    margin-bottom: 10px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.sugg-warning, .sugg-note {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
}

.sugg-warning {
    border: 1px solid var(--warn-border);
    background: var(--warn-bg);
    color: var(--warn-text);
}

.sugg-note {
    border: 1px solid var(--info-border);
    background: var(--brand-soft);
    color: var(--text);
}

.sugg-diff {
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--background);
    overflow-wrap: anywhere;
}

.sugg-diff h2.revision-title {
    margin: 0 0 8px;
    font-size: 16px;
}

.sugg-diff .text {
    white-space: pre-wrap;
    font-family: var(--mono);
    font-size: 13px;
}

.sugg-diff .tags {
    margin-top: 8px;
}

.sugg-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
}

.sugg-actions form {
    margin: 0;
}

.sugg-actions .sugg-approve, .sugg-improve, .sugg-reject-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 6px;
    font-weight: 600;
}

.sugg-actions .sugg-approve {
    border: 1px solid var(--success);
    background: var(--success);
    color: #fff;
    cursor: pointer;
}

/* --success is a light green in dark mode: white needs a darker one (4.5:1). */
:root[data-theme="dark"] .sugg-actions .sugg-approve {
    border-color: #238636;
    background: #238636;
}

.sugg-improve, .sugg-reject-toggle {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}

.sugg-reject {
    flex: 1 1 100%;
}

.sugg-reject-toggle {
    width: max-content;
    list-style: none;
}

.sugg-reject-toggle::-webkit-details-marker {
    display: none;
}

.sugg-reject[open] .sugg-reject-toggle {
    border-color: var(--danger-text);
    color: var(--danger-text);
}

.sugg-reject-form {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.sugg-reject-form fieldset {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

.sugg-reject-form legend {
    margin-bottom: 6px;
    font-weight: 600;
}

.sugg-reason {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
}

.sugg-reason input {
    flex: none;
    margin-top: 3px;
}

.sugg-comment-label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 13px;
}

.sugg-reject-form textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.sugg-reject-form .sugg-reject-button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--danger-text);
    border-radius: 6px;
    background: var(--danger-soft);
    color: var(--danger-text);
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 640px) {
    .sugg-card {
        padding: 12px;
    }

    .sugg-actions .sugg-approve, .sugg-improve, .sugg-reject-toggle {
        flex: 1 1 auto;
        justify-content: center;
    }

    .sugg-approve-form {
        flex: 1 1 auto;
        display: flex;
    }

    .sugg-approve-form .sugg-approve {
        width: 100%;
    }

    .sugg-reject-toggle {
        width: 100%;
    }
}

/* ======================================================================
   5. List pages
   ====================================================================== */

/*
 * List pages: the home page and question lists (questions.html, index.html,
 * question_list/*.html), the tags index (tags.html), the users index
 * (users/users.html), pagination (paginator/*.html) and the sidebar boxes
 * next to the lists. Loaded after modern.css and overrides its older list
 * rules; colours come from its variables, so dark mode follows them.
 */

/* ---- Page header: title, call to action, toolbar --------------------- */

.list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 0 0 14px;
}

.list-header h1.headQuestions, .list-header h1.headUsers {
    margin: 0;
    color: var(--text);
    font-size: 24px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

/* "Questions tagged [collect]": the tag as a chip inside the heading. */
.list-header h1 span.tag {
    margin: 0 0 0 4px;
    padding: 2px 12px;
    font-size: 18px;
    font-weight: 600;
    vertical-align: 2px;
}

a.list-ask.button {
    flex: none;
    padding: 9px 16px;
    border-color: var(--accent);
    border-radius: 8px;
    background: var(--accent);
    font-size: 14px;
}

a.list-ask.button:hover {
    border-color: var(--accent-dark);
    background: var(--accent-dark);
}

.tabBar.list-toolbar {
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 4px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border);
}

.list-count {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.list-toolbar-end {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 0 auto;
}

.list-toolbar a.feed-icon {
    flex: none;
    display: inline-block;
    border-radius: 4px;
}

nav.sort-tabs {
    min-width: 0;
    max-width: 100%;
}

nav.sort-tabs .tabsA a {
    white-space: nowrap;
}

.tabsA a:focus-visible, .list-toolbar a:focus-visible, .paginator a:focus-visible,
.question-row a:focus-visible, .tag-card a:focus-visible, .user-card a:focus-visible,
.boxA a:focus-visible, .boxC a:focus-visible, .list-empty a:focus-visible, .list-status a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* No empty #tail band under the list pages (the pager is inside the card). */
#room:has(.list-page) > #tail {
    display: none;
}

/* ---- Filter box (tags and users) ------------------------------------- */

.list-filter {
    display: flex;
    flex: 1 1 260px;
    gap: 8px;
    max-width: 420px;
    margin: 0;
}

.list-filter input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 7px 12px 7px 34px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7785' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 11px center / 16px;
    color: var(--text);
    font-size: 15px;
}

.list-filter input[type="search"]:focus {
    border-color: var(--brand);
    outline: 2px solid var(--brand);
    outline-offset: 0;
}

.list-filter input[type="search"]::placeholder {
    color: var(--muted);
    opacity: 1;
}

.list-filter button.list-filter-submit {
    flex: none;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.list-filter button.list-filter-submit:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.list-filter button.list-filter-submit:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.list-status {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.list-status:empty {
    display: none;
}

.list-status a {
    margin-left: 6px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Question rows ----------------------------------------------------- */

#listA {
    margin: 0;
}

.short-summary.question-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 4px 18px;
    width: auto;
    margin: 0 -24px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    overflow: visible;
}

#listA > .question-row:first-child {
    border-top: 0;
}

.short-summary.question-row:hover {
    background: var(--hover-overlay);
}

/* Stats: a quiet right-aligned column; the answer count stands out. */
.short-summary.question-row .counts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    width: auto;
    margin: 0;
    padding: 2px 0 0;
}

.short-summary.question-row .counts > div {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
}

.short-summary.question-row .counts .item-count {
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
    line-height: inherit;
}

.short-summary.question-row .counts .thousand {
    color: inherit;
}

.short-summary.question-row .counts > .status {
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
}

.short-summary.question-row .counts > .status.answered {
    border-color: var(--success);
    color: var(--success);
}

.short-summary.question-row .counts > .status.answered .item-count {
    color: var(--success);
}

.short-summary.question-row .counts > .status.answered-accepted,
.short-summary.question-row .counts > .status.answered-accepted .item-count {
    border-color: var(--success);
    background: var(--success);
    color: var(--surface);   /* white in light mode, dark on the lighter green of dark mode */
}

.short-summary.question-row .counts > .status.answered-accepted::before {
    content: "";
    align-self: center;
    width: 12px;
    height: 12px;
    margin-right: 1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* No answer yet: a warm pill, so these stand out for people who can help. */
.short-summary.question-row .counts > .status.unanswered {
    border: 1px dashed var(--warn-border-strong);
    background: var(--warn-bg);
    color: var(--warn-text);
}

.short-summary.question-row .counts > .status.unanswered .item-count {
    color: var(--warn-text);
}

.short-summary.question-row .counts > .favorites {
    order: 9;
    align-items: center;
}

.short-summary.question-row .question-summary-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    width: auto;
    min-width: 0;
    margin: 0;
}

.short-summary.question-row h2 {
    flex: 1 1 100%;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: 1.35;
}

.short-summary.question-row h2 a {
    color: var(--brand);
    font-size: 16.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.short-summary.question-row h2 a:hover {
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.short-summary.question-row h2 a:visited {
    color: var(--brand-dark);
}

.short-summary.question-row .summary {
    flex: 1 1 100%;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.short-summary.question-row .summary.excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.short-summary.question-row .tags {
    order: 1;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 2px 0 0;
    line-height: 1.6;
}

.short-summary.question-row .tags a {
    margin: 0;
}

.short-summary.question-row .userinfo {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 2px 6px;
    margin: 2px 0 0 auto;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: normal;
}

.userinfo-user {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.userinfo-user .score {
    color: var(--muted);
    font-weight: 600;
}

.userinfo-when time {
    color: var(--text);
}

/* The viewer's interesting and ignored tags (marked by osqa.lists.js). */
.short-summary.question-row.is-interesting {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
}

.short-summary.question-row.is-ignored {
    box-shadow: inset 3px 0 0 var(--border-strong);
}

.short-summary.question-row.is-ignored h2 a {
    color: var(--muted);
    font-weight: 500;
}

.short-summary .tags a.tag-interesting {
    background: var(--brand);
    color: var(--surface);
}

.short-summary .tags a.tag-ignored {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--border-strong);
    color: var(--muted);
    text-decoration: line-through;
}

/* ---- Questions for you (questions_for_you.html) --------------------------
 * Each row is wrapped in .for-you-item: the reason above the questions the
 * member was asked to answer (.is-requested, tinted like interesting tags)
 * and the "Not for me" button under it.
 */

.for-you-item.is-requested {
    margin: 0 -24px;
    padding: 0 24px;
    border-top: 1px solid var(--border-subtle);
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
}

#listA > .for-you-item:first-child, #listA > .for-you-item:first-child > .question-row {
    border-top: 0;
}

.for-you-reason {
    margin: 0;
    padding: 12px 0 0;
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
}

.for-you-item.is-requested .question-row {
    border-top: 0;
}

.for-you-item.is-requested .question-row:hover {
    background: transparent;
}

.for-you-decline {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 0;
    padding: 0 0 10px;
}

.for-you-decline .plain-button {
    min-height: 28px;
    padding: 3px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.for-you-decline .plain-button:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.for-you-note {
    margin: 12px 0;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--background);
    color: var(--text);
    font-size: 14px;
}

/* ---- Empty state ------------------------------------------------------- */

.list-empty {
    margin: 12px 0 4px;
    padding: 36px 20px 32px;
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    background: var(--background);
    text-align: center;
}

.list-empty-icon {
    display: block;
    margin: 0 auto 10px;
    color: var(--brand);
}

.list-empty h2 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 18px;
    font-weight: 650;
}

.list-empty p {
    max-width: 460px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 14px;
}

.list-empty p.list-empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    margin-top: 18px;
}

.list-empty .button {
    border-radius: 8px;
}

a.list-empty-link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Pagination ------------------------------------------------------ */

.list-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 4px -24px -20px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
}

.list-footer:empty {
    display: none;
}

.paginator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: 14px;
}

.paginator .page-numbers {
    display: contents;
}

.paginator .page, .paginator .page a, .paginator .curr,
.paginator .prev a, .paginator .next a, .paginator .prev.disabled, .paginator .next.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 36px;
    height: 36px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

/* Page sizes: the link inside the span is the box. */
.paginator span.page {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
}

.paginator .prev, .paginator .next {
    margin: 0;
}

.paginator .prev a, .paginator .next a {
    font-weight: 600;
}

.paginator .prev.disabled, .paginator .next.disabled {
    border-style: dashed;
    background: none;
    color: var(--muted);
}

.paginator .curr {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--surface);
    font-weight: 650;
}

.paginator a.page:hover, .paginator .page a:hover, .paginator .prev a:hover, .paginator .next a:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
    text-decoration: none;
}

.paginator .gap {
    padding: 0 2px;
    color: var(--muted);
}

.paginator.page-sizes {
    gap: 4px;
    margin-left: auto;
    color: var(--muted);
    font-size: 13px;
}

.paginator.page-sizes .text {
    margin-right: 4px;
    padding: 0;
    color: var(--muted);
    font: inherit;
    font-weight: 500;
}

.paginator.page-sizes .curr, .paginator.page-sizes .page a {
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
}

.paginator.page-sizes .curr {
    border-color: var(--border-strong);
    background: var(--background);
    color: var(--text);
}

/* Older pages that place the pager under the card. */
.pager, .pagesize {
    float: none;
    margin: 12px 0;
}

/* ---- Tags index -------------------------------------------------------- */

ul.tag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    min-height: 0;
    margin: 16px 0 4px;
    padding: 0;
    line-height: 1.4;
    list-style: none;
}

ul.tag-grid li.tag-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    float: none;
    width: auto;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

ul.tag-grid li.tag-card[hidden] {
    display: none;
}

ul.tag-grid li.tag-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

ul.tag-grid li.tag-card > a {
    max-width: 100%;
    margin: 0;
    padding: 2px 11px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* The whole card opens the tag; the link's text stays the tag's name. */
ul.tag-grid li.tag-card > a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
}

ul.tag-grid .tag-number {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

ul.tag-grid .tag-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

/* ---- Tag management (moderators: tag_edit.html, tag_merge.html,
        tag_synonyms.html, the tags index's "Synonyms" link) ------------- */

.list-header a.tags-synonyms-link.button {
    flex: none;
    margin-left: auto;
    padding: 9px 16px;
    border-color: var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
}

.list-header a.tags-synonyms-link.button:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
}

/* "Ask a question" follows it on the right. */
.list-header a.tags-synonyms-link + a.list-ask {
    margin-left: 0;
}

.tag-manage {
    max-width: 760px;
}

.tag-manage-header h1 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 24px;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.tag-manage-header h1 .tag, .tag-merge-changes .tag, .tag-synonym-table .tag {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .8em;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tag-manage-back {
    margin: 0 0 8px;
    font-size: 14px;
}

.tag-manage-meta, .tag-manage-help {
    color: var(--muted);
    font-size: 14px;
}

.tag-manage-section {
    margin: 16px 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.tag-manage-section h2 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 18px;
    font-weight: 650;
}

.tag-manage-section label {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.tag-manage-section .tag-edit-form label {
    font-weight: 400;
    color: var(--muted);
}

.tag-manage-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 8px;
}

.tag-manage-row input[type="text"], .tag-synonym-add input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
}

.tag-manage-section label.tag-manage-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
}

.tag-manage-check input {
    margin-top: 3px;
}

.tag-history {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-history li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 14px;
}

.tag-history li:last-child {
    border-bottom: 0;
}

.tag-history-text {
    flex: 1 1 260px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tag-history .tag {
    font-weight: 600;
}

/* Links inside the sentence: told apart by more than their colour. */
.tag-history-text a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tag-history-date, .tag-history-state {
    margin-left: 4px;
    color: var(--muted);
    font-size: 13px;
}

.tag-history li.is-undone .tag-history-text {
    color: var(--muted);
    text-decoration: line-through;
}

.tag-history form {
    margin: 0;
}

button.tag-history-undo, button.tag-history-undo:hover {
    padding: 4px 12px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
}

/* The tag's versions (forum/views/tags.py). */
.tag-version-list {
    margin: 10px 0;
    padding: 0;
    list-style: none;
}

.tag-version-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.tag-version-text {
    display: flex;
    flex: 1 1 220px;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
}

.tag-version-current {
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 600;
}

.tag-version-meta {
    color: var(--muted);
    font-size: 13px;
}

.tag-version-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.tag-version-controls button, .tag-version-controls button:hover {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
}

.tag-version-controls button.tag-version-remove {
    color: var(--danger-text);
}

.tag-version-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 6px 0 8px;
}

.tag-version-fields > div {
    display: flex;
    flex: 1 1 180px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Room around the small checkbox (WCAG 2.5.8 target spacing). */
.tag-manage-section .tag-version-add label.tag-manage-check {
    margin: 14px 0;
}

.tag-merge-changes {
    margin: 0 0 12px 20px;
    color: var(--text);
    line-height: 1.55;
}

.tag-merge-changes li {
    margin: 0 0 6px;
}

.tag-merge-warning {
    padding: 10px 12px;
    border: 1px solid var(--warn-border);
    border-radius: 8px;
    background: var(--warn-bg);
    color: var(--warn-text);
}

.tag-merge-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.tag-merge-confirm input.tag-merge-submit {
    max-width: 100%;
    white-space: normal;
}

.tag-synonym-add-pair {
    align-items: flex-end;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.tag-synonym-field {
    display: flex;
    flex: 1 1 180px;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.tag-synonym-add-pair .tag-synonym-field input[type="text"] {
    flex: none;
    width: 100%;
}

.tag-synonym-table button.tag-synonym-remove, .tag-synonym-table button.tag-synonym-remove:hover {
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--danger-text);
    font-size: 13px;
}

.tag-synonym-field label {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.tag-synonym-arrow {
    color: var(--muted);
}

.tag-synonym-add-pair > .tag-synonym-arrow {
    padding: 0 0 9px;
}

table.tag-synonym-table {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
    font-size: 14px;
}

.tag-synonym-table th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.tag-synonym-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.tag-synonym-table td:last-child {
    text-align: right;
}

.tag-synonym-table form {
    margin: 0;
}

@media (max-width: 640px) {
    .tag-manage-header h1 {
        font-size: 20px;
    }

    .tag-manage-section {
        padding: 14px;
    }

    .tag-synonym-add-pair > .tag-synonym-arrow {
        display: none;
    }

    .tag-synonym-table td {
        padding: 8px 4px;
    }
}

/* ---- Users index ------------------------------------------------------- */

ul.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 16px 0 4px;
    padding: 0;
    list-style: none;
}

ul.user-grid li.user-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    line-height: 1.4;
}

ul.user-grid li.user-card[hidden] {
    display: none;
}

ul.user-grid li.user-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.user-card-avatar {
    flex: none;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--border-subtle);
    overflow: hidden;
}

.user-card-avatar img.gravatar {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.user-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
}

a.user-card-name {
    color: var(--brand);
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* The whole card opens the profile. */
a.user-card-name::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
}

.user-card-score {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.user-card-score .score {
    color: var(--text);
    font-weight: 650;
}

.user-card-score .badgecount {
    margin: 0 0 0 2px;
    color: var(--muted);
}

/* ---- Sidebar boxes ------------------------------------------------------- */

#CARight .boxA, #CARight .boxC {
    padding: 16px 18px;
    border-radius: 10px;
}

#CARight .boxC h3, #CARight .boxA h3 {
    margin: 0 0 10px;
}

.boxC .more, .boxA .more {
    margin: 10px 0 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.boxC p.more a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Welcome box (home page, visitors). */
.welcome-box {
    border-top: 3px solid var(--brand) !important;
}

.welcome-box h2.welcome-title {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
}

.welcome-box .welcome-intro {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}

.welcome-box .welcome-intro p {
    margin: 0 0 8px;
}

.welcome-box p.welcome-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
}

.welcome-box p.welcome-links a.more {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.welcome-box p.welcome-links a.more:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
    text-decoration: none;
}

/* Count box: big figures and the current sort. */
.list-stats .list-stats-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: 0;
}

.list-stats .questions-count {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-size: inherit;
}

.list-stats .questions-count-number {
    color: var(--text);
    font-size: 26px;
    font-weight: 650;
    line-height: 1.15;
}

.list-stats .questions-count-label {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.list-stats .questions-count-label span.tag {
    font-size: 12px;
}

.list-stats p.list-stats-sort {
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--border-subtle);
    color: var(--muted);
    font-size: 13px;
}

.list-stats p.list-stats-sort strong {
    color: var(--text);
}

/* Tag chips in the sidebar. */
#CARight .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    line-height: 1.6;
}

#CARight .tags a {
    margin: 0;
}

ul.related-tags {
    padding: 0;
    list-style: none;
}

ul.related-tags li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

#CARight .tag-number {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

/* Recent awards: badge, then who earned it. */
.sidebar-awards ul.badge-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.sidebar-awards ul.badge-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    font-size: 13px;
}

.sidebar-awards a.medal {
    padding: 1px 10px 1px 8px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
}

.sidebar-awards a.badge-list-user {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Interesting and ignored tags. */
.tag-selector h3.subtitle + .tags {
    min-height: 0;
}

.tag-selector .marked-tags {
    margin: 0 0 8px;
}

.tag-selector .marked-tags:empty {
    display: none;
}

.tag-selector .deletable-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px 0 0;
    border-radius: 999px;
    background: var(--brand-soft);
}

.tag-selector .tags.ignored .deletable-tag {
    background: var(--background);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.tag-selector .tags.ignored .deletable-tag a {
    background: transparent;
    color: var(--muted);
}

.tag-selector .deletable-tag .delete-icon {
    width: 16px;
    height: 16px;
    padding: 2px;
    border-radius: 50%;
    cursor: pointer;
    box-sizing: content-box;
}

.tag-selector .deletable-tag .delete-icon:hover {
    background: var(--hover-overlay);
}

.tag-selector .deletable-tag .delete-icon:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.tag-selector .tag-picker {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
}

.tag-selector .tag-picker:last-of-type {
    margin-bottom: 0;
}

.tag-selector .tag-picker input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 34px;
    padding: 5px 10px;
    font-size: 14px;
}

.tag-selector .tag-picker input[type="submit"] {
    flex: none;
    height: 34px;
    padding: 0 12px;
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
}

.tag-selector .tag-picker input[type="submit"]:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.tag-selector p.tag-selector-help {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 12.5px;
}

/* ---- Tablets: the sidebar goes under the list ------------------------- */

@media (max-width: 960px) {
    /* style.css gives every div "margin: 0 auto", which stops grid items from stretching. */
    #CARight > div {
        width: auto;
        margin: 0;
    }
}

/* ---- Phones ------------------------------------------------------------ */

@media (max-width: 640px) {
    .list-header {
        margin-bottom: 10px;
    }

    .list-header h1.headQuestions, .list-header h1.headUsers {
        font-size: 20px;
    }

    .list-header h1 span.tag {
        font-size: 15px;
    }

    /* The header's "ask a question" button stays in view on phones. */
    a.list-ask.button {
        display: none;
    }

    .tabBar.list-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .list-toolbar-end {
        margin: 0;
    }

    .list-toolbar-end nav.sort-tabs {
        flex: 1 1 auto;
    }

    .list-filter {
        flex: none;
        max-width: none;
    }

    .list-filter input[type="search"] {
        font-size: 16px;
    }

    /* Stats in one line above the title. */
    .short-summary.question-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0 -12px;
        padding: 14px 12px;
    }

    .short-summary.question-row .counts {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 12px;
        padding: 0;
    }

    .short-summary.question-row .counts > div {
        font-size: 12.5px;
    }

    .short-summary.question-row .counts > .status {
        order: -1;
        padding: 1px 8px;
    }

    .short-summary.question-row .counts > .favorites {
        display: none;
    }

    .short-summary.question-row h2 a {
        font-size: 16px;
    }

    .short-summary.question-row .userinfo {
        justify-content: flex-start;
        margin-left: 0;
        flex-basis: 100%;
    }

    .list-footer {
        margin: 4px -12px -14px;
        padding: 12px;
    }

    .paginator {
        justify-content: center;
        width: 100%;
    }

    /* Prev and next on the sides, the numbers between. */
    .paginator .prev a, .paginator .next a, .paginator .prev.disabled, .paginator .next.disabled {
        padding: 0 12px;
    }

    .paginator.page-sizes {
        margin: 0;
    }

    ul.tag-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 8px;
    }

    ul.tag-grid li.tag-card {
        padding: 10px 12px;
    }

    ul.user-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    #CARight .boxA, #CARight .boxC {
        padding: 14px 16px;
    }
}

/* ======================================================================
   6. Header search box
   ====================================================================== */

/*
 * The header search box (header.html #searchBar, media/js/osqa.searchbox.js):
 * one rounded field with the search icon (the submit button) inside, a clear
 * button, a "/" hint, and a suggestions panel (an ARIA 1.2 combobox listbox)
 * with questions, tags and people from /search/suggest/.
 *
 * Loaded after modern.css. modern.css still has rules for the old markup
 * (.search-field, .search-type, .searchBtn, .gcse-container); none of those
 * classes are used any more. The selectors here start with #searchBar so they
 * win over the generic input and button rules. Colours come from the
 * modern.css variables, so dark mode follows them.
 */

#searchBar .searchbox {
    position: relative;
    margin: 0;
}

#searchBar .searchbox-field {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 0 6px 0 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: var(--muted);
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

#searchBar .searchbox-field:hover {
    border-color: var(--border-strong);
}

#searchBar .searchbox-field:focus-within {
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(44, 90, 160, .18);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* The magnifier is the submit button. */
#searchBar .searchbox-submit, #searchBar .searchbox-clear {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    line-height: 1;
    cursor: pointer;
}

#searchBar .searchbox-submit:hover, #searchBar .searchbox-clear:hover {
    background: var(--hover-overlay);
    color: var(--text);
}

#searchBar .searchbox-field:focus-within .searchbox-submit {
    color: var(--brand);
}

#searchBar .searchbox-submit:focus-visible, #searchBar .searchbox-clear:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 0;
}

#searchBar .searchbox-clear[hidden] {
    display: none;
}

#searchBar .searchbox-submit svg, #searchBar .searchbox-clear svg {
    display: block;
    pointer-events: none;
}

#searchBar input.searchbox-input, #searchBar input.searchbox-input:focus {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: none;
    box-shadow: none;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    -webkit-appearance: none;
    appearance: none;
}

#searchBar input.searchbox-input::placeholder {
    color: var(--muted);
    opacity: 1;
}

/* The clear button replaces the browser's own. */
#searchBar input.searchbox-input::-webkit-search-cancel-button,
#searchBar input.searchbox-input::-webkit-search-decoration {
    display: none;
    -webkit-appearance: none;
}

#searchBar .searchbox-kbd {
    flex: none;
    min-width: 22px;
    margin: 0 4px 0 0;
    padding: 1px 6px;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--surface);
    color: var(--muted);
    font: 600 12px/16px var(--mono);
    text-align: center;
}

/* The hint only while the field is empty and not in use, and only with a keyboard-ish device. */
#searchBar .searchbox-field:focus-within .searchbox-kbd,
#searchBar .searchbox-input:not(:placeholder-shown) ~ .searchbox-kbd {
    display: none;
}

@media (hover: none) {
    #searchBar .searchbox-kbd {
        display: none;
    }
}

/* Keyboard shortcuts turned off in the member's preferences: no "/" hint. */
:root[data-shortcuts="off"] #searchBar .searchbox-kbd {
    display: none;
}

/* ---- Suggestions ------------------------------------------------------ */

#searchBar .searchbox-panel {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: min(70vh, 540px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .08);
    color: var(--text);
    text-align: left;
}

#searchBar .searchbox-panel[hidden] {
    display: none;
}

#searchBar .searchbox-group + .searchbox-group,
#searchBar .searchbox-group + .searchbox-option {
    margin-top: 4px;
    border-top: 1px solid var(--border-subtle);
}

#searchBar .searchbox-group-label {
    padding: 8px 14px 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#searchBar .searchbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 7px 14px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#searchBar .searchbox-option:hover {
    background: var(--hover-overlay);
}

#searchBar .searchbox-option[aria-selected="true"] {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
}

#searchBar .searchbox-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--background);
    color: var(--muted);
}

#searchBar .searchbox-option[aria-selected="true"] .searchbox-icon {
    background: var(--surface);
    color: var(--brand);
}

#searchBar .searchbox-icon svg {
    display: block;
}

#searchBar .searchbox-initial {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 700;
}

#searchBar img.searchbox-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

#searchBar .searchbox-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#searchBar .searchbox-tag {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

#searchBar .searchbox-option[aria-selected="true"] .searchbox-tag {
    background: var(--surface);
}

#searchBar .searchbox-meta {
    flex: none;
    margin-left: auto;
    padding-left: 8px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

#searchBar .searchbox-meta.is-accepted {
    color: var(--success);
}

#searchBar .searchbox-option mark {
    padding: 0;
    background: none;
    color: inherit;
    font-weight: 700;
}

#searchBar .searchbox-option.searchbox-all .searchbox-label {
    color: var(--brand-dark);
    font-weight: 600;
}

/* ---- Phones ------------------------------------------------------------ */

@media (max-width: 640px) {
    #searchBar .searchbox-field {
        height: 44px;
    }

    #searchBar .searchbox-submit, #searchBar .searchbox-clear {
        width: 36px;
        height: 36px;
    }

    /* 16px: iOS does not zoom into the field. */
    #searchBar input.searchbox-input, #searchBar input.searchbox-input:focus {
        font-size: 16px;
    }

    #searchBar .searchbox-kbd {
        display: none;
    }

    /* The panel spans the screen, under the field. */
    #searchBar .searchbox-panel {
        left: -12px;
        right: -12px;
        top: calc(100% + 4px);
        max-height: calc(100vh - 130px);
        max-height: calc(100dvh - 130px);
        border-width: 1px 0;
        border-radius: 0 0 14px 14px;
    }

    #searchBar .searchbox-option {
        min-height: 52px;
        padding: 10px 16px;
        font-size: 15px;
    }

    #searchBar .searchbox-group-label {
        padding: 10px 16px 4px;
    }

    #searchBar .searchbox-icon {
        width: 32px;
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #searchBar .searchbox-field {
        transition: none;
    }
}

/* ======================================================================
   7. Accessibility and print
   ====================================================================== */

/*
 * Cross-cutting UI rules for the default skin: the "Skip to content" link,
 * reduced motion, the command dialogs' focus, and the print style sheet.
 * Loaded after modern.css and the page style sheets (e2e/test_ui_robustness.py
 * checks these rules).
 */

/* ---- Skip link: the first thing Tab reaches, shown only while focused -- */

.skip-link {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 10000;
    padding: 10px 16px;
    border-radius: var(--radius, 8px);
    background: var(--surface, #fff);
    color: var(--brand, #2c5aa0);
    font-weight: 600;
    text-decoration: underline;
    box-shadow: var(--shadow);
    transform: translateY(-200%);
}

.skip-link:focus, .skip-link:focus-visible {
    transform: none;
    outline: 2px solid var(--brand, #2c5aa0);
    outline-offset: 2px;
}

/* The skip link's target takes focus without a ring around the whole page. */
#wrapper:focus {
    outline: none;
}

/* ---- Text fields: the focus shows in their border (WCAG 1.4.11) -------- */

/* Section 2 gives a focused field the brand colour's border and a pale
   halo; the pages' own field rules (sign-in, search filters, editor...)
   set their borders more specifically and left only the halo, under 3:1.
   Fields with an error keep their red border. */
:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="range"], [type="image"]),
    select, textarea):focus-visible:not([aria-invalid="true"]) {
    border-color: var(--brand) !important;
}

/* Checkboxes and radio buttons: the solid ring, not the fields' halo. */
input:is([type="checkbox"], [type="radio"]):focus-visible {
    outline: 2px solid var(--brand) !important;
    outline-offset: 2px !important;
}

/* ---- Focus not hidden under bars at the bottom (WCAG 2.4.11) ---------- */

/* The live "new answers · Show" banner and, on phones, the message bar sit
   over the end of the screen: with this padding the browser scrolls a
   focused control above them instead of leaving it underneath. */
html:has(#live-banner:not(:empty)) {
    scroll-padding-bottom: 88px;
}

/* ...and the end of the page can scroll up from under the banner. */
html:has(#live-banner:not(:empty)) body {
    padding-bottom: 88px;
}

/* On wider screens the messages float over the bottom right corner. */
html:has(.notify:not([style*="none"])) {
    scroll-padding-bottom: 140px;
}

@media (max-width: 640px) {
    html:has(.notify:not([style*="none"])) {
        scroll-padding-bottom: 120px;
    }
}

/* ---- Command dialogs (flag, close, delete…) ---------------------------- */

div.dialog:focus {
    outline: none;
}

div.dialog :focus-visible {
    outline: 2px solid var(--brand, #2c5aa0);
    outline-offset: 2px;
}

/* ---- Reduced motion ------------------------------------------------------ */

/* Durations of 0s, not the usual 0.01ms: transition-property defaults to
   "all", so a non-zero duration on every element would start transitions
   that were never there (and keep a just-shown dialog hidden for a frame). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Print: the post and its answers, without the site around them ----- */

@media print {
    /* Light colours even when the screen is in dark mode. */
    :root, :root[data-theme] {
        color-scheme: light;
        --text: #000;
        --muted: #333;
        --quote-text: #222;
        --brand: #000;
        --brand-dark: #000;
        --surface: #fff;
        --background: #fff;
        --border: #999;
        --border-subtle: #ccc;
        --code-bg: #f6f8fa;
        --code-inline-bg: #eff1f3;
    }

    .skip-link, #roof, #searchBar, #top, #nav, #announcement, #custom_header, #custom_footer, #ground,
    #CARight, .offline-banner, .confirm-banner, .notify, #command-loader, div.dialog,
    form, .post-votes, .vote-buttons, .post-controls, .comment-tools, .comment-form-container,
    .answer-sort, .jump-to-accepted, .paginator, .paginator-container-left, .code-copy,
    .context-menu-dropdown, .searchbox-panel, .ai-suggestion-actions, #fmanswer {
        display: none !important;
    }

    html, body, .wrapper, #wrapper, #room, #CALeft, #CAFull, #main-body {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    body {
        font-size: 11pt;
        line-height: 1.45;
    }

    #CALeft, #CAFull, .post, .answer-card, .question-post, .post-main, .boxC {
        border-color: #999 !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
    }

    a {
        color: #000 !important;
        text-decoration: underline;
    }

    /* Where outside links in posts go. */
    .post-body a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 90%;
        word-break: break-all;
    }

    pre, code, blockquote, table, img {
        break-inside: avoid;
    }

    pre {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere;
        border: 1px solid #999;
    }

    h1, h2, h3 {
        break-after: avoid;
    }
}

/* Tag chips anywhere (lists, sidebar, posts): a long tag name wraps instead
   of pushing the page sideways. */
.tags a, span.tag, .post-tag, a[class^="tag-link-"] {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* ======================================================================
   8. Markdown editor
   The post editor (compose/toolbar.html, osqa.editor.js, osqa.paste.js):
   toolbar, code language menu, tooltips, link and image dialogs, the
   preview's tables, the length hint and upload errors.
   ====================================================================== */

.compose-write, .answer-editor {
    position: relative;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid var(--border-strong);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--background);
}

.editor-toolbar ~ #editor {
    border-radius: 0 0 8px 8px;
}

.editor-button, .editor-button:hover {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.editor-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.editor-button:hover, .editor-button[aria-expanded="true"] {
    background: var(--hover-overlay);
    color: var(--text);
}

.editor-button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.editor-button[aria-pressed="true"], .editor-button[aria-pressed="true"]:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

.editor-button[aria-disabled="true"], .editor-button[aria-disabled="true"]:hover {
    background: transparent;
    color: var(--muted);
    opacity: .45;
    cursor: default;
}

.editor-help {
    margin-left: auto;
}

.editor-separator {
    flex: none;
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--border-strong);
}

/* The code block language menu, under its button. */
.editor-menu {
    position: absolute;
    z-index: 1100;
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .15);
}

.editor-menu[hidden] {
    display: none;
}

.editor-menu [role="menuitem"], .editor-menu [role="menuitem"]:hover {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}

.editor-menu [role="menuitem"]:hover, .editor-menu [role="menuitem"]:focus {
    background: var(--brand-soft);
    color: var(--brand-dark);
    outline: none;
}

.editor-menu [role="menuitem"]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* One tooltip, placed by osqa.editor.js under the hovered or focused button. */
.editor-tooltip {
    position: fixed;
    z-index: 1300;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--text);
    color: var(--surface);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

/* The pointer can move from the button onto the tip across the gap (WCAG 1.4.13). */
.editor-tooltip::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 0;
    left: 0;
    height: 7px;
}

.editor-tooltip[hidden] {
    display: none;
}

/* Link and image dialogs (<dialog>, moved to the end of the page). */
.editor-dialog {
    box-sizing: border-box;
    width: min(440px, calc(100vw - 32px));
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 20px 50px rgba(16, 24, 40, .25);
}

.editor-dialog::backdrop {
    background: rgba(16, 24, 40, .5);
}

.editor-dialog-title {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
}

.editor-dialog label {
    display: block;
    margin: 14px 0 4px;
    font-size: 14px;
    font-weight: 600;
}

.editor-dialog input[type="url"], .editor-dialog input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    font-size: 15px;
}

.editor-dialog input[type="file"] {
    max-width: 100%;
    font-size: 14px;
}

.editor-dialog-help, .editor-upload-status {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.editor-upload-status:empty {
    display: none;
}

.editor-upload-status.upload-error {
    padding: 8px 12px;
    color: var(--danger-text);
}

.editor-dialog-error {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--danger-text);
    font-size: 13px;
}

.editor-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.editor-dialog-cancel, .editor-dialog-cancel:hover {
    padding: 9px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
}

.editor-dialog-cancel:hover {
    background: var(--hover-overlay);
}

.editor-dialog-ok[disabled], .editor-dialog-cancel[disabled] {
    opacity: .6;
    cursor: default;
}

/* Under the text box: the minimum length and the count. */
.compose-editor-footer {
    justify-content: space-between;
    gap: 12px;
}

.editor-min-hint {
    color: var(--muted);
}

.editor-min-hint.is-short {
    color: var(--danger-text);
}

.editor-min-hint.is-met::before {
    content: "\2713\00a0" / "";
    color: var(--success);
}

.editor-metrics {
    font-variant-numeric: tabular-nums;
}

/* Upload errors from pasted or dropped images (osqa.paste.js). */
.upload-errors {
    margin: 6px 0;
}

.upload-errors .upload-error {
    margin: 4px 0;
}

/* Tables in the preview, as in posts. */
.wmd-preview table {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 0 1em;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}

.wmd-preview th, .wmd-preview td {
    padding: 6px 12px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.wmd-preview th {
    background: var(--background);
    font-weight: 600;
}

.wmd-preview [align="center"], .question-page .post-body [align="center"] {
    text-align: center;
}

.wmd-preview [align="right"], .question-page .post-body [align="right"] {
    text-align: right;
}

/* On a phone the toolbar scrolls sideways inside itself, with larger buttons. */
@media (max-width: 640px) {
    .editor-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .editor-toolbar::-webkit-scrollbar {
        display: none;
    }

    .editor-button, .editor-button:hover {
        width: 40px;
        height: 40px;
    }

    .editor-help {
        margin-left: 0;
    }

    .editor-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: calc(100vw - 48px);
    }
}

/* ======================================================================
   9. Profile menu
   Profile settings menu (users/menu.html).
   ====================================================================== */

@media screen {

#user-menu-container {
    position: relative;
    text-align: right;
}

#user-menu {
    cursor: pointer;
    height: 1em;
    font-size: 120%;
    font-weight: bold;
    color: var(--brand, #3060A8);
}

#user-menu-dropdown {
    position: absolute;
    background-color: var(--surface, #EEEEEE);
    color: var(--text, #333333);
    border: 1px solid var(--border, #DDDDDD);
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 2px 2px 5px #3060A8;
}

div.dialog.award-rep-points table {
    margin: auto;
    margin-top: 8px;
}

div.dialog.award-rep-points table th {
    text-align: left;
}

div.dialog.award-rep-points table input, div.dialog.award-rep-points table textarea {
    width: 150px;
    max-height: 35px;
}

#user-menu-dropdown {
    display: none;
    right: 0px;
    top: 1.5em;
    text-align: left;
    list-style-type: none;
}

#user-menu-dropdown li.item {
    padding: 4px 8px 4px 8px;
    -webkit-border-radius: 5px;
}

#user-menu-dropdown li.item a {
    color: inherit;
    white-space: nowrap;
    text-decoration: none;
}

#user-menu-dropdown li.separator {
    text-align: center;
    padding: 10px 0 4px 0;
    font-size: 120%;
    font-weight: bold;
}

#user-menu-dropdown li.item:hover {
    background-color: #3060A8;
    color: white;
}

#user-menu-dropdown span {
    margin-right: 4px;
    float: left;
    width: 16px;
    height: 16px;
}

.user-auth { background: url('/m/default/media/images/user-sprite.png') no-repeat 0 0; }
.user-award_rep { background: url('/m/default/media/images/user-sprite.png') no-repeat 0 -17px; }
.user-edit { background: url('/m/default/media/images/user-sprite.png') no-repeat 0 -34px; }
.user-moderator { background: url('/m/default/media/images/user-sprite.png') no-repeat 0 -51px; }
.user-subscriptions { background: url('/m/default/media/images/user-sprite.png') no-repeat 0 -68px; }
.user-superuser { background: url('/m/default/media/images/user-sprite.png') no-repeat 0 -85px; }

}

/* ======================================================================
   10. Markdown help page
   ====================================================================== */

/*
 * Markdown help page (markdown_help.html): each example as the Markdown you
 * type beside the result, stacked on phones. Colours come from the variables
 * in modern.css, so dark mode follows them.
 */

.md-help {
    max-width: 860px;
}

.md-help .page-lead a {
    text-decoration: underline;
}

.md-help-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.md-help-toc li {
    margin: 0;
    list-style: none;
}

.md-help-toc a {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
}

.md-help-toc a:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.md-section {
    margin: 0;
    padding: 24px 0 0;
    scroll-margin-top: 12px;
}

.md-section > h2 {
    margin: 0 0 6px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 19px;
    font-weight: 650;
}

.md-section > p {
    margin: 10px 0;
    color: var(--text);
}

.md-example {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 10px 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.md-example > div {
    min-width: 0;
    padding: 12px 14px;
}

.md-source {
    border-right: 1px solid var(--border);
    background: var(--code-bg);
}

.md-pane-label {
    display: block;
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.md-source pre {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.md-result {
    background: var(--surface);
    color: var(--text);
    overflow-wrap: anywhere;
}

.md-result p, .md-result ol, .md-result ul, .md-result blockquote {
    margin: 0 0 6px;
}

.md-result ol, .md-result ul {
    padding-left: 22px;
}

.md-result ol li {
    list-style: decimal;
}

.md-result ul li {
    list-style: disc;
}

.md-result blockquote {
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--border-strong);
    color: var(--quote-text);
}

.md-result a {
    text-decoration: underline;
}

.md-result .md-h1, .md-result .md-h2, .md-result .md-h3 {
    margin: 0;
    font-weight: 700;
    line-height: 1.25;
}

.md-result .md-h1 { font-size: 24px; }
.md-result .md-h2 { font-size: 20px; }
.md-result .md-h3 { font-size: 17px; }

.md-result pre {
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--code-bg);
    font-size: 13px;
    white-space: pre-wrap;
}

.md-table {
    border-collapse: collapse;
    font-size: 14px;
}

.md-table th, .md-table td {
    padding: 4px 10px;
    border: 1px solid var(--border);
    text-align: left;
}

.md-table [align="right"] {
    text-align: right;
}

.md-keys {
    margin: 10px 0;
}

.md-keys td:first-child {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .md-example {
        grid-template-columns: minmax(0, 1fr);
    }

    .md-source {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
}

/* style.css centres every div (margin: 0 auto). */
.md-help div {
    margin: 0;
}

.md-help .md-example {
    margin: 10px 0;
}

/* ======================================================================
   11. API pages
   The API documentation (api/docs.html, which also uses the Markdown help
   page's table of contents) and the API tokens settings page
   (users/api_tokens.html, with the settings and security cards).
   ====================================================================== */

.api-docs {
    max-width: 920px;
}

.api-docs div {
    margin: 0;
}

.api-docs .md-section ul {
    margin: 8px 0 12px;
    padding-left: 22px;
}

.api-docs .md-section li {
    margin: 4px 0;
    list-style: disc;
}

/* Long lines wrap instead of scrolling inside the box, which the keyboard
   can't reach (and nothing scrolls sideways at 320px, WCAG 1.4.10). */
.api-code {
    margin: 10px 0 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.api-table-wrap {
    max-width: 100%;
    margin: 10px 0 14px;
    overflow-x: auto;
}

.api-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.api-table caption {
    padding: 0 0 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.api-table th, .api-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: top;
}

.api-table th {
    border-bottom-color: var(--border);
    color: var(--muted);
    font-size: 13px;
}

.api-table tr:target {
    background: var(--highlight-bg);
}

.api-where, .api-required {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.api-required {
    display: inline;
    color: var(--accent-dark);
}

:root[data-theme="dark"] .api-required {
    color: #ff9a6b;
}

.api-docs .api-index ul {
    padding: 0;
}

.api-docs .api-index li {
    list-style: none;
    overflow-wrap: anywhere;
}

.api-index-summary, .api-group-text, .api-op-auth, .api-op-errors {
    color: var(--muted);
}

.api-group {
    margin: 28px 0 4px;
    font-size: 18px;
}

.api-op, .api-object {
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    scroll-margin-top: 12px;
}

.api-op h4, .api-object h3 {
    margin: 0 0 6px;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.api-op-summary {
    font-weight: 600;
}

.api-method {
    display: inline-block;
    min-width: 58px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.api-method-post {
    background: var(--success-soft);
    color: var(--success);
}

.api-method-delete {
    background: var(--danger-soft);
    color: var(--danger-text);
}

/* The API tokens page. */
.api-token-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px;
}

.api-token-copy .api-token-value {
    flex: 1 1 260px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--code-bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
}

.api-new-token {
    border-color: var(--success);
}

.api-token-status:empty {
    display: none;
}

.api-token-expired {
    color: var(--danger-text);
}

.api-scope-field {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.api-choice {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 6px 0;
    font-weight: normal;
}

.api-choice input {
    flex: none;
    margin-top: 3px;
}