/*
    Standard Theme - Version 1.5.0 (11/29/2013)
    http://ejun.online/

    Designed and Implementation by Farzin Seyfolahi (@Seyfolahi)
    http://seyfolahi.net/

    Content:
        00.variables                15.categorylist
        01.header                   16.linklist
        02.well-global              17.monthlist
        03.post                     18.mostcomments
        04.comment-item             19.newsletter
        05.comment-form             20.pagelist
        06.related-posts            21.recentcomments
        07.postpaging               22.recentposts
        08.navigation-posts         23.search
        09.widget                   24.tagcloud
        10.administration           25.archive-page
        11.authorlist               26.contact-page
        12.bloglist                 27.search-page
        13.blogroll                 28.syntaxhighlighter
        14.calendar                 29.q-notes
                                    30.footer
                                    31.index-page
                                    32.post-comment-section
*/

/*[00.variables]*/
:root {
    /* Brand blues */
    --color-primary: #0681ea;
    --color-primary-hover: #0565be;
    --color-primary-dark: #0056b3;
    /* Greens */
    --color-success: #27ae60;
    --color-success-light: #00c759;
    --color-self-bg: #ebffe5;
    --color-self-border: #c0e0b2;
    --color-self-heading: #376f1d;
    --color-self-link: #74af5a;
    --color-url-green: #00802a;
    /* Reds */
    --color-danger: #e83232;
    /* Syntax highlighter */
    --color-syntax-alt: #d6ebff;
    /* Greys */
    --color-text-white: #fff;
    --color-text-black: #000;
    --color-text-dark: #333;
    --color-text-body: #444;
    --color-text-muted: #666;
    --color-text-light: #aaa;
    --color-text-lighter: #999;
    --color-text-faint: #ccc;
    --color-text-dimmed: #888;
    --color-text-search: #555;
    /* Borders */
    --color-border-light: #eee;
    --color-border-medium: #ddd;
    --color-border-dark: #ccc;
    /* Backgrounds */
    --color-bg-body: #eee;
    --color-bg-white: #fff;
    --color-bg-alt: #F9F9F7;
    --color-bg-header-blue: #001f59;
    --color-bg-footer: #222;
    --color-bg-footer-dark: #111;
    --color-bg-footer-blue: #001f59;
    /* Shared layout */
    --widget-radius: 6px;
    --widget-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    --widget-padding: 4%;
}

html {
    font-size: 16px; /* Increase global font size */
}

body {
    line-height: 1.8;
    color: var(--color-text-dark);
    background-color: var(--color-bg-alt);
    cursor: default;
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

h1, .h1 {
    font-size: 32px;
}

h2, .h2 {
    font-size: 26px;
}

h3, .h3 {
    font-size: 20px;
}

h4, .h4 {
    font-size: 18px;
}

h5, .h5 {
    font-size: 14px;
}

h6, .h6 {
    font-size: 12px;
}

img {
    max-width: 100%;
}

.glyphicon {
    margin-right: 3px;
}

table {
    width: 100%;
}

.btn-wrapper {
    border-top: 1px solid var(--color-border-light);
    padding-top: 25px;
    margin-top: 15px;
}

.btn-more, btn-primary {
    margin: 0;
    padding: 10px;
    font-size: 12px;
    font-weight: 300;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-bg-white);
    border-bottom: 3px solid var(--color-primary-dark);
}

.required-field {
    color: var(--color-danger);
    margin-right: 4px;
    margin-left: 4px;
}

.text-uppercase {
    text-transform: uppercase;
}

/*[01.header]*/

.bg-header {
    background-color: #001f59;
    opacity: 1.0;
}

.header .container > .navbar-header,
.header .container > .navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}

.header .logo {
    margin-right: 10px;
}

.header .title-wrapper {
    background-color: var(--color-bg-white);
    padding: 30px 0;
    margin-bottom: 35px;
    box-shadow: var(--widget-shadow);
}

    .header .title-wrapper hgroup {
        height: 80px;
    }

        .header .title-wrapper hgroup h1 {
            font-size: 40px;
            line-height: 40px;
            margin: 4px 0 8px;
            font-weight: 700;
        }

            .header .title-wrapper hgroup h1 a {
                color: var(--color-text-dark);
                text-decoration: none;
            }

        .header .title-wrapper hgroup h3 {
            font-size: 16px;
            font-weight: normal;
            margin: 0;
            color: var(--color-text-muted);
        }
/* Flexbox so the icon row wraps instead of overflowing the floated title block,
   and so additional networks can be added without re-tuning widths. */
.header .social-icon {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

    .header .social-icon a {
        text-decoration: none;
        display: inline-flex;
        padding: 6px;
        border-radius: 4px;
        color: var(--color-primary);
        transition: color .15s, background-color .15s;
    }

        .header .social-icon a:hover {
            color: var(--color-primary-dark);
            background-color: var(--color-border-light);
        }
        /* Removing the underline stripped the only focus affordance (WCAG 2.4.7); restore one. */
        .header .social-icon a:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }

.header .navbar {
    margin: 0;
    border-radius: 0;
}

.header .navbar-inverse .navbar-nav > .open > a {
    color: var(--color-text-white);
}

.header .nav > li > a.dropdown-m {
    padding: 15px 7px 15px 10px;
}

.header .nav > li > a {
    padding: 15px 10px;
}

    .header .nav > li > a.dropdown-toggle {
        padding: 15px 10px;
    }
/*[02.well-global]*/
.well-global,
#trackbacks {
    background-color: var(--color-bg-white);
    padding: var(--widget-padding);
    margin-bottom: 20px;
    border-radius: var(--widget-radius);
    box-shadow: var(--widget-shadow);
}

    .well-global .well-global-title {
        margin: 0;
        font-weight: 700;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--color-border-light);
        padding-bottom: 20px;
    }

        .well-global .well-global-title h3 {
            margin: 0;
            font-weight: 700;
        }

.page-global {
    background-color: var(--color-bg-white);
    padding: var(--widget-padding);
    margin-bottom: 20px;
    border-radius: var(--widget-radius);
    box-shadow: var(--widget-shadow);
}

    .page-global .page-global-title {
        border-bottom: 1px solid var(--color-border-light);
        margin: 0 0 20px 0;
        padding-bottom: 15px;
        font-weight: bold;
        font-size: 26px;
    }
/*[03.post]*/
.post {
    background-color: var(--color-bg-white);
    padding: 2% 4% 4%;
    margin-bottom: 20px;
    border-radius: var(--widget-radius);
    box-shadow: var(--widget-shadow);
}

    .post .post-header {
        margin-bottom: 15px;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--color-border-medium);
    }

    .post .post-title {
        line-height: 20px;
        font-size: 20px;
        margin: 15px 0 10px;
    }

        .post .post-title a {
            text-decoration: none;
            font-weight: bold;
        }

    .post .post-info {
        font-size: 16px;
        color: var(--color-text-light);
    }

        .post .post-info span {
            margin-right: 7px;
        }

        .post .post-info a {
            color: var(--color-text-light);
        }

    .post .post-meta {
        font-size: 16px;
        color: var(--color-text-light);
        margin-bottom: 10px;
    }

        .post .post-meta span {
            margin-right: 7px;
        }

        .post .post-meta a {
            color: var(--color-text-light);
        }

    .post .post-body {
        font-size: 18px;
        line-height: 1.8;
        margin-bottom: 10px;
        color: var(--color-text-black);
        font-weight: 400;
    }

    .post .post-tags {
        margin-top: 15px;
        font-size: 16px;
        color: var(--color-text-light);
    }

        .post .post-tags a {
            margin-right: 5px;
        }

    .post .post-footer {
        margin-top: 30px;
        padding: 15px;
        background-color: var(--color-bg-body);
        font-size: 16px;
        min-height: 35px;
        border-radius: 4px;
        border: 1px solid var(--color-bg-body);
    }

        .post .post-footer:hover {
            border-color: var(--color-border-medium);
        }

        .post .post-footer a {
            text-decoration: none;
            font-weight: bold;
        }

    .post .post-rating {
        height: 21px;
        max-width: 50%;
    }

        .post .post-rating * {
            margin: 0;
            padding: 0;
            top: 0;
            line-height: 10px;
        }

        .post .post-rating p {
            top: 9px;
        }
/*[04.comment-item]*/
.comment-item .comment-content {
    border: 1px solid var(--color-border-dark);
    border-radius: 4px;
    padding: 2%;
    margin-bottom: 10px;
}

.comment-item .comment-gravatar {
    position: relative;
}

    .comment-item .comment-gravatar img {
        border-radius: 4px;
    }

.comment-item .comment-header {
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 5px;
}

    .comment-item .comment-header h4 {
        font-weight: bold;
        font-size: 18px;
        color: var(--color-text-dark);
    }

        .comment-item .comment-header h4 a {
            color: var(--color-text-dark);
        }

.comment-item .comment-content.self {
    background-color: var(--color-self-bg);
    border-color: var(--color-self-border);
}

.comment-item .self .comment-header {
    border-bottom-color: var(--color-self-border);
}

    .comment-item .self .comment-header h4 a,
    .comment-item .self .comment-header h4 {
        color: var(--color-self-heading);
    }

.comment-item .self a {
    color: var(--color-self-link);
}

.comment-item .self .comment-header .text-uppercase {
    color: var(--color-self-border);
}

.comment-item .comment-form {
    border: 1px solid var(--color-border-dark);
    margin: 15px 0;
}

.comment-item .carrow {
    background: url(../images/carrow.png) no-repeat 0 0;
    width: 9px;
    height: 17px;
    position: absolute;
    right: -11px;
    top: 14px;
    z-index: 999;
}

.comment-item .self .carrow {
    background: url(../images/sarrow.png) no-repeat 0 0;
}

#commentlist .media,
#commentlist ul,
#commentlist ol {
    margin: 0;
}
/*[05.comment-form]*/
#comment-form .success {
    background: var(--color-success);
    border-radius: 4px;
    color: var(--color-bg-white);
    display: block;
    padding: 15px;
}

.comment-form .comment-menu a {
    padding: 0;
}

    .comment-form .comment-menu a span {
        padding: 2px 7px;
        min-width: 70px;
    }

.comment-form .comment-preview {
    height: auto;
}

    .comment-form .comment-preview .comment-content {
        border: none;
    }

    .comment-form .comment-preview .comment-header small {
        display: none;
    }
/*[06.related-posts]*/
.related-posts ul li div {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: var(--color-text-dimmed);
    margin-bottom: 10px;
}
/*[07.postpaging]*/
#PostPager {
    display: block;
    text-align: center;
    margin: 0 0 10px;
    background-color: var(--color-bg-white);
    padding: var(--widget-padding);
    margin-bottom: 20px;
    border-radius: var(--widget-radius);
    box-shadow: var(--widget-shadow);
}

    #PostPager li {
        display: inline-block;
        border: 1px solid var(--color-border-medium);
        margin: 1px;
        padding: 5px 7px;
        font-size: 13px;
        font-weight: normal;
        background: var(--color-bg-white);
        border-radius: 3px;
    }

        #PostPager li a {
            padding: 2px;
            text-decoration: none;
        }

    #PostPager .PagerLinkCurrent {
        color: var(--color-bg-white);
        padding: 5px 14px;
        background-color: var(--color-primary);
        border: 1px solid var(--color-primary);
    }

        #PostPager .PagerLinkCurrent li {
            padding: 2px;
        }

    #PostPager .PagerLinkDisabled {
        color: var(--color-text-faint);
        padding: 5px 14px;
        background: var(--color-bg-white);
        border-color: var(--color-border-medium);
    }

    #PostPager .PagerEllipses {
        border: 0;
        padding: 2px;
    }
/*[08.navigation-posts]*/
.navigation-posts a {
    text-decoration: none;
    outline: none;
}
/*[09.widget]*/
.widget {
    background-color: var(--color-bg-white);
    padding: 6%;
    margin-bottom: 20px;
    border-radius: var(--widget-radius);
    box-shadow: var(--widget-shadow);
}

    .widget .widget-header {
        margin: 0 0 15px 0;
        border-bottom: 1px solid var(--color-border-light);
        padding-bottom: 4%;
        font-weight: bold;
        font-size: 16px;
    }

    .widget ul {
        list-style: none;
        padding: 0;
    }

        .widget ul li {
            border-bottom: 1px solid var(--color-border-light);
            padding: 4px 0;
        }

        .widget ul ul li {
            border: none;
        }
/*[10–16. Consolidated widget-header overrides]*/
.administration .widget-header,
.authorlist .widget-header,
.bloglist .widget-header,
.categorylist .widget-header,
.linklist .widget-header,
.monthlist .widget-header,
.pagelist .widget-header,
.recentcomments .widget-header,
.recentposts .widget-header {
    margin-bottom: 0;
}
/*[11.authorlist]*/
.authorlist li a.authorlink {
    margin-left: 5px;
}
/*[13.blogroll]
   Audit BR13 / section 3: the rules that lived here were dead.

   They targeted `.blogroll ul li a`, `.blogroll ul li img`, `.blogroll ul ul` and
   `.blogroll ul ul li` - a bare .blogroll container wrapping a two-level nested list.
   The view component emits .blogroll-widget > .blogroll-header / .blogroll-container
   and a single flat .blogroll-list, and never emits a bare .blogroll class at all, so
   not one of those selectors could match. The nested `ul ul` in particular styled the
   per-blog child list of recent posts - the RSS-fetching feature BlogrollUpdateMinutes
   and BlogrollVisiblePosts were built for, which no longer exists in this port.

   The block also carried `.blogroll a[title="Download OPML file"]`, which keyed layout
   off an English UI string. Even against matching markup that rule would have stopped
   applying in every other language, and audit BR6 has since moved that title to
   labels.downloadOPML.

   Live blogroll styling starts at the .blogroll-widget rules further down this file. */
/*[14.calendar]*/
#calendarContainer {
    text-transform: capitalize;
    text-align: center;
}

.calendar table {
    width: 100%;
    text-align: center;
}

.calendar td,
.calendar table {
    background-color: var(--color-bg-white);
    text-align: center;
}

.calendar .header {
    background: none;
    width: auto;
    height: auto;
}

.calendar .weekend {
    background-color: var(--color-bg-alt);
}

.calendar .other {
    color: silver;
}

.calendar a.exist {
    display: inline-block;
    padding: 0 5px;
    border-radius: 104px;
    color: var(--color-bg-white);
    font-weight: normal;
    background-color: var(--color-primary);
}

.calendar td {
    vertical-align: top;
    background: var(--color-bg-white);
}
/*[15.categorylist]*/
.categorylist ul li a {
    padding-right: 3px;
}
/*[17.monthlist]*/
.monthlist li {
    font-weight: normal;
}

.monthlist .year {
    cursor: pointer;
    font-weight: bold;
}

    .monthlist .year li {
        margin: 0 10px;
    }

.monthlist ul ul {
    display: none;
}

.monthlist .open {
    display: block;
}
/*[18.mostcomments]*/
.mostcomments table td {
    border: none;
    border-bottom: 1px solid var(--color-border-dark);
    background: none;
}

.mostcomments table tr td:first-child {
    width: 50px;
}

    .mostcomments table tr td:first-child img {
        position: relative;
        top: 2px;
    }
/*[19.newsletter]*/
.newsletter input[type=text] {
    margin-bottom: 15px;
}

.newsletter #newsletteraction {
    font-size: 22px;
    color: var(--color-success-light);
}

.newsletter #newsletterform input[type="text"] {
    direction: ltr;
}

.footer .newsletter #newsletterform input[type="text"] {
    background-color: var(--color-text-dark);
    border-color: var(--color-bg-footer-blue);
    color: var(--color-text-faint);
    box-shadow: none;
}
/*[21.recentcomments]*/
.recentcomments li {
    color: var(--color-text-light);
    font-size: 12px;
}

    .recentcomments li a {
        font-size: 14px;
    }
/*[22.recentposts]*/
.recentposts li {
    color: var(--color-text-light);
    font-size: 12px;
}

    .recentposts li a {
        font-size: 14px;
        margin-right: 4px;
        display: block;
    }

    .recentposts li span {
        margin-right: 5px;
    }
/*[23.search]*/
.search {
    padding: 4px;
    background: var(--color-bg-white);
}

    .search input[type=text] {
        background-color: var(--color-bg-white);
        border: none;
        padding: 2%;
        height: 40px;
        width: 75%;
        outline: none;
    }

    .search input[type=button] {
        border: none;
        padding: 0;
        height: 40px;
        width: 25%;
        background-color: var(--color-primary);
        color: var(--color-bg-white);
        border-radius: 4px;
    }

        .search input[type=button]:hover {
            background-color: var(--color-primary-hover);
        }
/*[24.tagcloud]*/
.tagcloud ul li {
    display: inline-block;
    margin: 1px;
    border: none;
    padding: 3px;
}

    .tagcloud ul li a {
        padding: 3px;
        border-radius: 3px;
    }

        .tagcloud ul li a:hover {
            background: var(--color-primary);
            color: var(--color-bg-white);
        }

        .tagcloud ul li a.biggest {
            font-size: 120%;
        }

        .tagcloud ul li a.big {
            font-size: 110%;
        }

        .tagcloud ul li a.medium {
            font-size: 100%;
        }

        .tagcloud ul li a.small {
            font-size: 90%;
        }

        .tagcloud ul li a.smallest {
            font-size: 80%;
        }
/*[25.archive-page]*/
.archive-page .archive-page-content h2 {
    font-size: 16px;
    height: 30px;
    line-height: 35px;
    font-weight: bold;
}

    .archive-page .archive-page-content h2 img {
        margin: 0 3px;
        position: relative;
        top: -2px;
    }

.archive-page ul {
    list-style-type: square;
    margin: 0 10px;
    padding: 10px;
}

.archive-page table {
    width: 100%;
    border-collapse: collapse;
}

    .archive-page table th:first-child {
        width: 90px;
    }

    .archive-page table th {
        background: var(--color-bg-alt);
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        border: 1px solid var(--color-border-medium);
        padding: 3px;
        text-align: center;
    }

    .archive-page table td {
        border: 1px solid var(--color-border-medium);
        font-size: 14px;
        padding: 3px;
    }

.archive-page .date {
    width: 90px;
    text-align: center;
}

.archive-page .comments {
    width: 70px;
    text-align: center;
}

.archive-page .rating {
    width: 70px;
    text-align: center;
}
/*[26.contact-page]*/
.contact-page .required-field[style="visibility:hidden;"] {
    display: none;
}

.attach-file-btn {
    display: inline-block;
    margin-bottom: 0;
    padding: 6px 12px;
    border: 1px solid var(--color-border-dark);
    border-radius: 4px;
    background-color: var(--color-bg-white);
    font-weight: normal;
    line-height: 1.42857143;
    vertical-align: middle;
    cursor: pointer;
}

    .attach-file-btn:hover {
        background-color: #e6e6e6;
    }

    /*  Gap between the icon and the caption. _Layout.cshtml puts the
        LangDirection label ("ltr"/"rtl") on the body element, so the pair
        below mirrors the margin for Arabic, Farsi and Hebrew instead of
        leaving the icon jammed against the text. Physical properties with
        an .rtl override are used rather than the logical
        margin-inline-start, to match the convention already established
        by ".rtl .btn i" in Content/app.css.                              */
    .attach-file-btn svg {
        vertical-align: text-bottom;
        margin-right: 4px;
    }

.rtl .attach-file-btn svg {
    margin-right: 0;
    margin-left: 4px;
}

/*  Clipped rather than display:none so the input stays focusable and
    exposed to assistive technology; display:none would drop it from the
    tab order and from the accessibility tree entirely.                   */
.attach-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/*  Keyboard focus lands on the hidden input, so surface the ring on the
    label the user can actually see.                                      */
.attach-file-btn:focus-within {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.attach-file-name {
    margin-left: 8px;
    vertical-align: middle;
}

.rtl .attach-file-name {
    margin-left: 0;
    margin-right: 8px;
}
/*[27.search-page]*/
.search-page .search-page-searchbox {
    background: var(--color-bg-white);
    padding: 3px;
    border-radius: var(--widget-radius);
    border: 1px solid var(--color-border-dark);
    margin-bottom: 15px;
}

    .search-page .search-page-searchbox input[type=button] {
        float: right;
        width: 20%;
        border: none;
        height: 100%;
        padding: 8px 0;
    }

    .search-page .search-page-searchbox input[type=text] {
        border: none;
        width: 76%;
        border-radius: 3px;
        padding: 4px 1%;
        outline: none;
    }

.search-page .searchresult {
    border-bottom: 1px dotted var(--color-border-dark);
    padding: 10px 0;
    font-size: 14px;
}

    .search-page .searchresult a {
        font-weight: normal;
        font-size: 16px;
    }

    .search-page .searchresult span.text {
        clear: both;
        line-height: 35px;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13px;
        color: var(--color-text-search);
    }

    .search-page .searchresult span.type {
        font-size: 13px;
        display: none;
    }

    .search-page .searchresult span.url {
        color: var(--color-url-green);
    }

    /* Empty state for a search that matched nothing. It reuses .searchresult for the
       block's padding/font-size but drops the dotted rule, which only makes sense as a
       separator between two results and reads as a stray line under a single message. */
    .search-page .searchresult.no-results {
        border-bottom: none;
        color: var(--color-text-search);
        font-style: italic;
    }

.search-page .searchpage ul.paging {
    list-style-type: none;
    margin: 20px auto;
    padding: 0;
    text-align: center;
    display: block;
}

    .search-page .searchpage ul.paging li {
        display: inline-block;
        width: 30px;
        text-align: center;
        height: 30px;
        border: 1px solid var(--color-border-dark);
        background: var(--color-bg-white);
        margin-right: 2px;
    }

        .search-page .searchpage ul.paging li a {
            display: block;
            height: 100%;
            line-height: 30px;
        }

        .search-page .searchpage ul.paging li.active {
            border-width: 1px;
            border-style: solid;
        }

            .search-page .searchpage ul.paging li.active a {
                color: var(--color-bg-white);
            }
/*[28.syntaxhighlighter]*/
.syntaxhighlighter {
    padding: 15px 3px;
    direction: ltr;
}

    .syntaxhighlighter .alt1 {
        background: var(--color-syntax-alt);
    }

    .syntaxhighlighter .line {
        font-size: 13px;
        line-height: 20px;
        background: var(--color-text-faint);
    }

    .syntaxhighlighter .container textarea {
        font-size: 13px;
        line-height: 20px;
    }

    .syntaxhighlighter table td.code .container {
        top: -15px;
    }
/*[29.q-notes]*/
#q-notes {
    height: 0;
}

    #q-notes .q-tab {
        height: 0;
    }

    #q-notes #q-toggle {
        padding: 0;
        width: 40px;
        height: 30px;
        text-align: center;
        background-color: var(--color-bg-white);
        border: 2px solid var(--color-border-medium);
        border-top: none;
        position: relative;
        top: -2px;
        margin-right: 5px;
        z-index: 1000;
    }

        #q-notes #q-toggle a {
            padding: 0;
            margin: 0;
            float: none;
        }

    #q-notes * {
        border-radius: 0;
    }

    #q-notes input[type=text],
    #q-notes select {
        padding: 5px;
        width: 200px;
    }

    #q-notes #q-listbox {
        width: 100%;
    }

    #q-notes input[type=submit] {
        background-color: var(--color-primary);
        color: var(--color-bg-white);
        border: none;
        font-weight: normal;
        border-radius: 3px;
    }

#q-panel {
    height: 180px;
}
/*[30.footer]*/
.bg-footer {
    background-color: #001f59;
    opacity: 0.8;
}

.footer {
    margin: 0;
    padding: 0;
}

    .footer a {
        color: var(--color-text-light);
    }

    .footer .widgets-footer .widget {
        margin-right: 3%;
        width: 31.3%;
        float: left;
        background: none;
        color: var(--color-text-light);
        padding: 2% 0;
        box-shadow: none;
    }

        .footer .widgets-footer .widget .widget-header {
            border-color: var(--color-primary);
            border-width: 2px;
        }

        .footer .widgets-footer .widget ul li {
            border-color: var(--color-bg-footer-dark);
        }

        .footer .widgets-footer .widget:last-child {
            margin: 0;
        }

    .footer .end-line {
        min-height: 50px;
        background-color: var(--color-bg-footer-blue);
        line-height: 50px;
        text-transform: uppercase;
        font-size: 12px;
    }

        .footer .end-line p {
            margin: 0;
            color: var(--color-text-light);
        }
/*[31.index-page — merged from index.css]*/
.container-fluid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
}

.post {
    transition: box-shadow 0.3s ease;
}

    .post:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

.post-title a {
    color: var(--color-text-dark);
    transition: color 0.3s;
}

    .post-title a:hover {
        color: var(--color-primary);
    }

.post-date,
.post-author,
.post-categories {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .post-date i,
    .post-author i,
    .post-categories i {
        color: var(--color-primary);
        width: 16px;
        text-align: center;
    }

.post-body p {
    margin-bottom: 15px;
}

.post-body img {
    max-width: 100%;
    height: auto;
    margin: 15px 0;
    border-radius: 4px;
}

.post-footer a {
    display: inline-block;
}

.post-separator {
    margin: 30px 0;
    border: none;
    border-top: 1px solid var(--color-border-medium);
}
/* Sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sidebar-widget {
    background: var(--color-bg-alt);
    border-radius: 4px;
    box-shadow: var(--widget-shadow);
    overflow: hidden;
}

.widget-title {
    margin: 0;
    padding: 20px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-bg-white);
    border-bottom: 3px solid var(--color-primary-dark);
}

.widget-content {
    padding: 20px;
}
/* Calendar Widget */
.calendar-widget {
    position: sticky;
    top: 20px;
}
/* Recent Posts Widget */
.recent-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-post-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-light);
    transition: transform 0.2s;
}

    .recent-post-item:last-child {
        border-bottom: none;
    }

    .recent-post-item:hover {
        transform: translateX(5px);
    }

    .recent-post-item a {
        color: var(--color-primary);
        text-decoration: none;
        font-weight: 500;
        word-break: break-word;
    }

        .recent-post-item a:hover {
            text-decoration: underline;
        }

.post-date-small {
    font-size: 0.85rem;
    color: var(--color-text-lighter);
    margin-top: 5px;
}
/* ==============================================================================
   ViewComponents Combined Stylesheet
   Auto-extracted from ViewComponent .cshtml files
   ============================================================================== */
/* ==============================================================================
   Administration
   ============================================================================== */
.admin-widget {
    background: linear-gradient(135deg, #f5f7fa 0%, #f8f9fb 100%);
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out;
}

    .admin-widget:hover {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    }

.admin-widget-header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 16px;
    border-bottom: 2px solid #004085;
}

.admin-widget-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.admin-widget-nav {
    padding: 8px 0;
}

.admin-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.admin-widget-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
}

    .admin-widget-item:last-child {
        border-bottom: none;
    }

.admin-widget-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #0366d6;
    text-decoration: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-weight: 500;
    font-size: 14px;
}

    .admin-widget-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: transparent;
        transition: background 0.15s ease;
    }

    .admin-widget-link:hover {
        background-color: #f0f6fc;
        color: #004085;
        padding-left: 18px;
    }

        .admin-widget-link:hover::before {
            background: #007bff;
        }

    .admin-widget-link:active {
        background-color: #e7f3ff;
        color: #002d5c;
    }

    .admin-widget-link:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px #007bff;
    }

.admin-link-text {
    display: inline-block;
}
/* Responsive Design */
@media (max-width: 768px) {
    .admin-widget {
        margin-bottom: 16px;
    }

    .admin-widget-header {
        padding: 12px;
    }

    .admin-widget-title {
        font-size: 16px;
    }

    .admin-widget-link {
        padding: 10px 12px;
        font-size: 13px;
    }

        .admin-widget-link:hover {
            padding-left: 14px;
        }
}

@media (max-width: 480px) {
    .admin-widget-link {
        padding: 10px;
    }

        .admin-widget-link:hover {
            padding-left: 12px;
        }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .admin-widget,
    .admin-widget-link {
        transition: none;
    }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .admin-widget {
        background: linear-gradient(135deg, #2d333b 0%, #22272e 100%);
        border-color: #444c56;
    }

    .admin-widget-header {
        background: linear-gradient(135deg, #1f6feb 0%, #1548c7 100%);
        border-bottom-color: #0d47a1;
    }

    .admin-widget-item {
        border-bottom-color: #30363d;
    }

    .admin-widget-link {
        color: #58a6ff;
    }

        .admin-widget-link:hover {
            background-color: #30363d;
            color: #79c0ff;
        }

        .admin-widget-link:active {
            background-color: #3b434b;
            color: #85c7ff;
        }
}
/* Active link styling */
.admin-widget-link.active-link {
    background-color: #e7f3ff;
    color: #002d5c;
    font-weight: 600;
}

    .admin-widget-link.active-link::before {
        background: #007bff;
    }

@media (prefers-color-scheme: dark) {
    .admin-widget-link.active-link {
        background-color: #3b434b;
        color: #85c7ff;
    }
}
/* ==============================================================================
   SHARED SIDEBAR WIDGET PRIMITIVES

   Audit: the sidebar widgets (AuthorList, BlogList, BlogRoll, CategoryList,
   LinkList, MonthList, MostComments, PageList, RecentComments, RecentPosts,
   RelatedPosts, TagCloud, Twitter, VisitorInfo, Administration) each carried a
   byte-identical copy of the same shell/header/title/count/container/list/item
   rules, repeated again inside four media queries apiece. That is where most of
   the duplication in this file came from.

   The invariant parts now live here once. The only thing that genuinely differed
   between widgets was the header's accent colour, so that is exposed as
   --widget-accent / --widget-accent-dark / --widget-accent-border and set by the
   per-widget rule further down. Everything else - spacing, radius, elevation,
   responsive overrides, reduced-motion and dark-mode handling - is defined a
   single time here and inherited.

   Everything is namespaced "sidebar-widget-*" deliberately. The bare .widget-header,
   .widget-title and .widget-container names are already taken by the WidgetZone
   component (Components/WidgetZone/Default.cshtml:82-86 and WidgetContainer.cshtml:20)
   and mean something different there - a plain grey admin chrome bar, not a coloured
   sidebar header. Reusing those names would have restyled the widget zone.

   Usage: <div class="sidebar-widget-shell <name>-widget"> with
          .sidebar-widget-header / .sidebar-widget-heading / .sidebar-widget-count /
          .sidebar-widget-count-badge / .sidebar-widget-body / .sidebar-widget-list /
          .sidebar-widget-list-item on the inner parts.
   ============================================================================== */
.sidebar-widget-shell {
    /* Default accent; individual widgets override these three custom properties. */
    --widget-accent: #007bff;
    --widget-accent-dark: #0056b3;
    --widget-accent-border: #004085;
    background: linear-gradient(135deg, #f5f7fa 0%, #f8f9fb 100%);
    /*border: 1px solid #e1e4e8;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);*/
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}

    .sidebar-widget-shell:hover {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    }

/* Header: identical everywhere except the accent colour, which comes from the
   custom properties above. The flex row is what lets a count badge sit opposite
   the heading; widgets with no badge are unaffected by it. */
.sidebar-widget-header {
    background: linear-gradient(135deg, var(--widget-accent) 0%, var(--widget-accent-dark) 100%);
    color: #fff;
    padding: 16px;
    border-bottom: 2px solid var(--widget-accent-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.sidebar-widget-heading {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    flex: 1;
}

.sidebar-widget-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-widget-count-badge {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.sidebar-widget-body {
    flex: 1;
    padding: 8px 0;
    min-height: 100px;
    overflow-y: auto;
}

.sidebar-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-widget-list-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
}

    .sidebar-widget-list-item:last-child {
        border-bottom: none;
    }

/* Inline SVG sizing repeated by ~16 icon rules. The icon box itself keeps its
   per-widget size; only the "fill the box" part is shared. */
.sidebar-widget-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Empty state.

   Audit: nine widgets render a "nothing to show" message, but only five of the
   class names they use had a rule. .month-list-empty (MonthList:77),
   .most-comments-empty (MostComments:57), .recent-posts-empty (RecentPosts:197)
   and .tag-cloud-empty (TagCloud:116) were emitted and never styled, so those
   four widgets dropped an unpadded, full-contrast line of text straight onto the
   widget body while their neighbours showed a centred, muted message. That is the
   same duplication problem read from the other side: the styled cases had each
   re-declared the message locally, so the unstyled ones had nothing to inherit.

   The declarations below are RecentComments' .empty-message, which was the most
   complete of the existing versions, promoted to the shared name. The old
   per-widget names are pointed at it rather than deleted, because they are what
   the views already emit and several are referenced by the widgets' own JS. Two
   of those aliases have since gone: .empty-message and .recent-posts-empty were
   only ever emitted by RecentComments and RecentPosts, and both of those views
   now emit .sidebar-widget-empty directly, so keeping the aliases would have left
   two names in the stylesheet that nothing renders. .tag-cloud-empty has since gone
   the same way now that TagCloud is converted. The two below are still emitted by
   MonthList and MostComments and stay until those widgets are converted. */
.sidebar-widget-empty,
.month-list-empty,
.most-comments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 20px;
    margin: 0;
    color: #999;
    text-align: center;
}

    /* The svg and paragraph inside the message were also declared per widget. They
       come from RecentComments' copy, the only one that had them, so that the four
       widgets which previously had no empty-state rule at all get the icon fade and
       the paragraph reset as well instead of just the layout. */
    .sidebar-widget-empty svg,
    .month-list-empty svg,
    .most-comments-empty svg {
        opacity: 0.5;
    }

    .sidebar-widget-empty p,
    .month-list-empty p,
    .most-comments-empty p {
        margin: 0;
        font-size: 14px;
    }

@media (max-width: 768px) {
    .sidebar-widget-shell {
        margin-bottom: 16px;
    }

    .sidebar-widget-header {
        padding: 12px;
    }

    .sidebar-widget-heading {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .sidebar-widget-header {
        padding: 10px;
    }

    .sidebar-widget-heading {
        font-size: 15px;
    }

    .sidebar-widget-count-badge {
        font-size: 11px;
        padding: 3px 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-widget-shell {
        transition: none;
    }
}

@media (prefers-color-scheme: dark) {
    .sidebar-widget-shell {
        background: linear-gradient(135deg, #2d333b 0%, #22272e 100%);
        border-color: #444c56;
    }

    .sidebar-widget-count-badge {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .sidebar-widget-list-item {
        border-bottom-color: #30363d;
    }

    .sidebar-widget-empty,
    .month-list-empty,
    .most-comments-empty {
        color: #6e7681;
    }
}
/* ==============================================================================
   AuthorList
   Shell/header/title/list/item come from the shared primitives; only the accent
   colour and the author-specific avatar/feed parts remain here.

   Note: .author-list-header and .author-list-title were removed rather than
   converted - the view has always rendered .blog-list-header/.blog-list-title
   (AuthorList/Default.cshtml:17-18), so those two rules never matched anything.
   ============================================================================== */
.author-list-widget {
    --widget-accent: var(--color-primary);
    --widget-accent-dark: var(--color-primary-dark);
    --widget-accent-border: var(--color-primary-dark);
}
/* Author rows are taller than the shared default and have their own hover tint. */
.author-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.author-list-item:hover .author-item-content {
    background-color: #f0f8f5;
}

.author-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background-color: #e9ecef;
    border: 2px solid #dee2e6;
}

.author-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-info {
    flex: 1;
    min-width: 0;
}

.author-name-link {
    display: inline-block;
    color: #0366d6;
    text-decoration: none;
    transition: all 0.15s ease;
    font-weight: 500;
    word-break: break-word;
}

    .author-name-link:hover {
        color: #004085;
        text-decoration: underline;
    }

    .author-name-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0366d6;
        border-radius: 2px;
    }

.author-display-name {
    font-size: 14px;
    display: block;
}

.author-feed-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    background-color: transparent;
    border: 1px solid transparent;
}

    .author-feed-link:hover {
        background-color: #fff3cd;
        border-color: #ffc107;
    }

    .author-feed-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ffc107;
    }

.author-rss-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Responsive Design - shell/header/title breakpoints come from the shared
   primitives; only the author-specific rows need overriding here. */
@media (max-width: 768px) {
    .author-item-content {
        padding: 10px 12px;
        gap: 10px;
    }

    .author-display-name {
        font-size: 13px;
    }

    .author-feed-link {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .author-item-content {
        padding: 10px;
        gap: 8px;
    }

    .author-avatar {
        border-width: 1px;
    }

    .author-feed-link {
        width: 22px;
        height: 22px;
    }

    .author-rss-icon {
        width: 12px;
        height: 12px;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .author-item-content,
    .author-name-link,
    .author-feed-link {
        transition: none;
    }
}
/* Dark mode support - the header simply re-points the accent variables; the
   row border is already handled by .sidebar-widget-list-item. */
@media (prefers-color-scheme: dark) {
    .author-list-widget {
        --widget-accent: #238636;
        --widget-accent-dark: #1a6d2a;
        --widget-accent-border: #0f6d2c;
    }

    .author-list-item:hover .author-item-content {
        background-color: #2d3a35;
    }

    .author-avatar {
        background-color: #30363d;
        border-color: #444c56;
    }

    .author-name-link {
        color: #58a6ff;
    }

        .author-name-link:hover {
            color: #79c0ff;
            text-decoration: underline;
        }

    .author-feed-link:hover {
        background-color: #3a3000;
        border-color: #a0860e;
    }
}
/* Active author styling */
.author-name-link.active-author {
    color: #238636;
    font-weight: 700;
}

    .author-name-link.active-author:hover {
        color: #1a6d2a;
    }

@media (prefers-color-scheme: dark) {
    .author-name-link.active-author {
        color: #58d926;
    }

        .author-name-link.active-author:hover {
            color: #58d926;
        }
}
/* ==============================================================================
   BlogList
   Shell/header/heading/body/list/item come from the shared primitives; only the
   purple accent and the link/icon/arrow internals remain here.
   ============================================================================== */
.blog-list-widget {
    --widget-accent: #6f42c1;
    --widget-accent-dark: #5a32a3;
    --widget-accent-border: #4a217d;
}
/* Note: .blog-list-title used to be 16px here while every other widget heading
   was 18px. That was an inconsistency rather than an intent - the shared
   .sidebar-widget-heading normalises it to 18px. */
.blog-list-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #0366d6;
    text-decoration: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-weight: 500;
    font-size: 14px;
}

    .blog-list-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: transparent;
        transition: background 0.15s ease;
    }

    .blog-list-link:hover {
        background-color: #f5f0ff;
        color: #5a32a3;
        padding-left: 18px;
    }

        .blog-list-link:hover::before {
            background: #6f42c1;
        }

    .blog-list-link:active {
        background-color: #ebe5f5;
        color: #3d1f5c;
    }

    .blog-list-link:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px #6f42c1;
    }

.blog-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: currentColor;
}
/* svg sizing comes from .sidebar-widget-icon on the same element. */

.blog-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-item-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: currentColor;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* svg sizing comes from .sidebar-widget-icon on the same element. */

.blog-list-link:hover .blog-item-arrow {
    opacity: 1;
    transform: translateX(0);
}
/* Responsive Design - shell/header/heading breakpoints are shared. */
@media (max-width: 768px) {
    .blog-list-link {
        padding: 10px 12px;
        font-size: 13px;
    }

        .blog-list-link:hover {
            padding-left: 14px;
        }

    .blog-item-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

@media (max-width: 480px) {
    .blog-list-link {
        padding: 10px;
        gap: 8px;
    }

        .blog-list-link:hover {
            padding-left: 10px;
        }

    .blog-item-icon {
        width: 18px;
        height: 18px;
    }

    .blog-item-arrow {
        display: none;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .blog-list-link,
    .blog-item-arrow {
        transition: none;
    }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .blog-list-widget {
        --widget-accent: #8957e5;
        --widget-accent-dark: #6f42c1;
        --widget-accent-border: #4a217d;
    }

    .blog-list-link {
        color: #58a6ff;
    }

        .blog-list-link:hover {
            background-color: #3d2d5c;
            color: #d8b9ff;
        }

        .blog-list-link:active {
            background-color: #2d1f42;
            color: #e6ccff;
        }

        .blog-list-link:focus {
            box-shadow: inset 0 0 0 2px #8957e5;
        }
}
/* Active blog styling */
.blog-list-link.active-blog {
    background-color: #ebe5f5;
    color: #3d1f5c;
    font-weight: 700;
}

    .blog-list-link.active-blog::before {
        background: #6f42c1;
    }

    .blog-list-link.active-blog:hover {
        background-color: #dcd0ea;
    }

@media (prefers-color-scheme: dark) {
    .blog-list-link.active-blog {
        background-color: #3d2d5c;
        color: #d8b9ff;
    }

        .blog-list-link.active-blog:hover {
            background-color: #4a3a6f;
        }
}
/* ==============================================================================
   BlogRoll
   Shell/header/heading/body/list/item come from the shared primitives; the
   orange accent, the OPML action in the header and the row internals stay here.
   ============================================================================== */
.blogroll-widget {
    --widget-accent: #fd7e14;
    --widget-accent-dark: #e86c00;
    --widget-accent-border: #d25c00;
}

.blogroll-opml-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

    .blogroll-opml-link:hover {
        background-color: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .blogroll-opml-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fd7e14, 0 0 0 4px rgba(253, 126, 20, 0.25);
    }

.blogroll-opml-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.blogroll-item-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.blogroll-item:hover .blogroll-item-content {
    background-color: #fff8f0;
}

.blogroll-item-link {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    color: #0366d6;
    text-decoration: none;
    transition: all 0.15s ease;
    font-weight: 500;
    font-size: 14px;
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
}

    .blogroll-item-link:hover {
        color: #d25c00;
        text-decoration: underline;
        background-color: rgba(253, 126, 20, 0.1);
    }

    .blogroll-item-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0366d6;
        border-radius: 2px;
    }

.blogroll-item-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
}

.blogroll-feed-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    background-color: transparent;
    border: 1px solid transparent;
}

    .blogroll-feed-link:hover {
        background-color: #fff3cd;
        border-color: #ffc107;
    }

    .blogroll-feed-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ffc107;
    }

.blogroll-rss-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.blogroll-footer {
    background-color: #fafbfc;
    border-top: 1px solid #f0f0f0;
    padding: 8px 16px;
}

.blogroll-info {
    margin: 0;
    font-size: 12px;
    color: #666;
    text-align: center;
}

.blogroll-count {
    font-weight: 500;
    color: #333;
}
/* Responsive Design - shell/header/heading breakpoints are shared; the header
   only needs the extra wrap allowance because of the OPML button. */
@media (max-width: 768px) {
    .blogroll-widget .sidebar-widget-header {
        flex-wrap: wrap;
    }

    .blogroll-item-content {
        padding: 10px 12px;
        gap: 8px;
    }

    .blogroll-item-title {
        font-size: 13px;
    }

    .blogroll-feed-link {
        width: 24px;
        height: 24px;
    }

    .blogroll-footer {
        padding: 6px 12px;
    }

    .blogroll-info {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .blogroll-opml-link {
        width: 28px;
        height: 28px;
    }

    .blogroll-item-content {
        padding: 10px;
        gap: 6px;
    }

    .blogroll-feed-link {
        width: 22px;
        height: 22px;
    }

    .blogroll-rss-icon {
        width: 12px;
        height: 12px;
    }

    .blogroll-item-title {
        font-size: 12px;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .blogroll-item-content,
    .blogroll-item-link,
    .blogroll-feed-link,
    .blogroll-opml-link {
        transition: none;
    }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .blogroll-widget {
        --widget-accent: #fd7e14;
        --widget-accent-dark: #d25c00;
        --widget-accent-border: #a84100;
    }

    .blogroll-item:hover .blogroll-item-content {
        background-color: #2d1a0f;
    }

    .blogroll-item-link {
        color: #58a6ff;
    }

        .blogroll-item-link:hover {
            color: #ffb380;
            background-color: rgba(253, 126, 20, 0.2);
        }

    .blogroll-feed-link:hover {
        background-color: #3a3000;
        border-color: #a0860e;
    }

    .blogroll-footer {
        background-color: #2d333b;
        border-top-color: #30363d;
    }

    .blogroll-info {
        color: #8b949e;
    }

    .blogroll-count {
        color: #c9d1d9;
    }

    .blogroll-opml-link {
        background-color: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
    }

        .blogroll-opml-link:hover {
            background-color: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.4);
        }
}
/* ==============================================================================
   CategoryList
   ============================================================================== */
/* The shell, header, heading, count, badge, body, list and list-item rules that used to sit here
   were byte-identical to the shared .sidebar-widget-* primitives, so the view now composes those
   and only the accent colour is declared below.

   Two deliberate normalisations were made while folding this widget in:
     - .category-list-header carried a 3px bottom border where every other widget used 2px. That
       looked like drift rather than intent, so it now inherits the shared 2px.
     - .category-list-title was 16px; the shared .sidebar-widget-heading is 18px, matching the
       majority. The 768px breakpoint below used to *shrink* the title to 16px, i.e. to the same
       size it already was at desktop - further evidence the 16px desktop value was accidental. */
.category-list-widget {
    --widget-accent: var(--color-primary);
    --widget-accent-dark: var(--color-primary-dark);
    --widget-accent-border: var(--color-primary-dark);
}

/* Category rows are the only sidebar rows that tint on hover, so the transition and the hover
   background stay widget-specific rather than moving into the shared list-item primitive. */
.category-list-item {
    transition: all 0.15s ease;
}

    .category-list-item:hover {
        background-color: #fff5f5;
    }
/* Audit CL12: --indent-offset was declared four times further down and read by nothing, while
   the view emitted its own inline "margin-left: Npx". The padding-left below is the missing
   consumer, so the custom property is now the single source of the indent and a theme can
   override it. It is folded into this rule rather than added as a separate one because the
   `padding` shorthand here would reset any padding-left declared earlier in the file. The
   fallback keeps root categories flush when the property is absent. */
.category-item-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    padding-left: calc(16px + var(--indent-offset, 0px));
    min-height: 40px;
}

.category-link {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    color: #0366d6;
    text-decoration: none;
    transition: all 0.15s ease;
    font-weight: 500;
    font-size: 14px;
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
}

    .category-link:hover {
        color: #bd2130;
        text-decoration: underline;
        background-color: rgba(220, 53, 69, 0.1);
    }

    .category-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0366d6;
        border-radius: 2px;
    }

.category-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: currentColor;
    opacity: 0.7;
}
/* svg sizing comes from .sidebar-widget-icon, which the view now also puts on this element. */

.category-link:hover .category-link-icon {
    opacity: 1;
}

/* Audit CL18: a category with no usable title has no working URL, so the view renders it as a
   <span class="category-link category-link-unlinked"> instead of an anchor. It keeps
   .category-link for layout - the flex row, the gap, the icon sizing - and this rule undoes the
   parts that promise interactivity: the link colour, the pointer cursor, and the hover
   affordances inherited above. Written as its own rule after .category-link rather than by
   splitting that class, so the linked case is untouched. */
.category-link-unlinked {
    color: #6c757d;
    cursor: default;
}

    .category-link-unlinked:hover {
        color: #6c757d;
        text-decoration: none;
        background-color: transparent;
    }

        .category-link-unlinked:hover .category-link-icon {
            opacity: 0.7;
        }

.category-link-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
}

.category-post-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #e9ecef;
    color: #495057;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    min-width: 28px;
    text-align: center;
    margin-left: auto;
}

.category-link:hover .category-post-count {
    background-color: #dee2e6;
    color: #212529;
}

.category-feed-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    background-color: transparent;
    border: 1px solid transparent;
    color: #dc3545;
}

    .category-feed-link:hover {
        background-color: #fff3cd;
        border-color: #ffc107;
        color: #ff9800;
    }

    .category-feed-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ffc107;
    }
/* Subcategory indentation.

   Audit CL12: these four attribute selectors were the only place --indent-offset was ever
   mentioned; no rule consumed it, so they had no effect whatsoever. The view now sets
   --indent-offset inline from CategoryListItem.IndentLevel and .category-item-content above
   consumes it, which also removes the depth-4 ceiling these selectors imposed.

   They are kept as a no-JavaScript floor: if the inline style is ever stripped (a sanitising
   proxy, a strict style-src CSP), depths 1-4 still indent. The inline value wins over these
   by specificity of origin, so the two cannot disagree. */
.category-list-item[data-level="1"] {
    --indent-offset: 16px;
}

.category-list-item[data-level="2"] {
    --indent-offset: 32px;
}

.category-list-item[data-level="3"] {
    --indent-offset: 48px;
}

.category-list-item[data-level="4"] {
    --indent-offset: 64px;
}
/* Responsive Design - shell, header and heading breakpoints come from the shared primitives;
   only the category-specific rows need overriding here. */
@media (max-width: 768px) {
    .category-item-content {
        padding: 8px 12px;
        gap: 8px;
    }

    .category-link-title {
        font-size: 13px;
    }

    .category-post-count {
        font-size: 11px;
    }

    .category-feed-link {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .category-item-content {
        padding: 8px 10px;
        gap: 6px;
    }

    .category-link-title {
        font-size: 12px;
    }

    .category-link-icon {
        width: 14px;
        height: 14px;
    }

    .category-feed-link {
        width: 22px;
        height: 22px;
        padding: 3px;
    }

    .category-post-count {
        padding: 2px 6px;
        min-width: 24px;
        font-size: 10px;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .category-list-item,
    .category-link,
    .category-feed-link {
        transition: none;
    }
}
/* Dark mode support - the shell, badge and row border are handled by the shared primitives, so
   only the accent and the category-specific colours are restated. */
@media (prefers-color-scheme: dark) {
    .category-list-widget {
        --widget-accent: #da3633;
        --widget-accent-dark: #b71c1c;
        --widget-accent-border: #8b1111;
    }

    .category-list-item:hover {
        background-color: #2d1a1d;
    }

    .category-link {
        color: #58a6ff;
    }

        .category-link:hover {
            color: #ffb3ad;
            background-color: rgba(218, 54, 51, 0.15);
        }

    .category-post-count {
        background-color: #30363d;
        color: #8b949e;
    }

    .category-link:hover .category-post-count {
        background-color: #444c56;
        color: #c9d1d9;
    }

    .category-feed-link {
        color: #f85149;
    }

        .category-feed-link:hover {
            background-color: #3a3000;
            border-color: #a0860e;
            color: #ffb380;
        }

    .category-link-icon {
        opacity: 0.6;
    }

    .category-link:hover .category-link-icon {
        opacity: 1;
    }
}
/* Active category styling */
.category-link.active-category {
    color: #bd2130;
    font-weight: 700;
    background-color: rgba(220, 53, 69, 0.1);
}

    .category-link.active-category:hover {
        color: #a01d29;
        background-color: rgba(220, 53, 69, 0.15);
    }

    .category-link.active-category .category-link-icon {
        opacity: 1;
    }

@media (prefers-color-scheme: dark) {
    .category-link.active-category {
        color: #ffb3ad;
        background-color: rgba(218, 54, 51, 0.2);
    }

        .category-link.active-category:hover {
            color: #ff9999;
            background-color: rgba(218, 54, 51, 0.25);
        }
}
/* ==============================================================================
   LinkList
   ============================================================================== */
/* Shell/header/heading/count/badge/body/list/item come from the shared primitives; only the
   teal accent and the link internals remain here. The 16px .link-list-title is normalised to
   the shared 18px heading, the same drift corrected on BlogList and CategoryList. */
.link-list-widget {
    --widget-accent: #17a2b8;
    --widget-accent-dark: #138496;
    --widget-accent-border: #0c5460;
}

.link-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: #0366d6;
    text-decoration: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-weight: 500;
    font-size: 14px;
    min-height: 40px;
}

    .link-item-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: transparent;
        transition: background 0.15s ease;
    }

    .link-item-link:hover {
        background-color: #f0f8fc;
        color: #138496;
        padding-left: 18px;
    }

        .link-item-link:hover::before {
            background: #17a2b8;
        }

    .link-item-link:active {
        background-color: #e7f5f9;
        color: #0c5460;
    }

    .link-item-link:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px #17a2b8;
    }

.link-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: currentColor;
    opacity: 0.7;
}

/* svg sizing comes from .sidebar-widget-icon, which the view now also puts on this element. */
.link-item-link:hover .link-item-icon {
    opacity: 1;
}

.link-item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
}

.link-item-external-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: currentColor;
    opacity: 0.6;
    margin-left: 2px;
}

/* svg sizing comes from .sidebar-widget-icon, which the view now also puts on this element. */
.link-item-link:hover .link-item-external-indicator {
    opacity: 1;
}
/* Responsive Design - shell, header and heading breakpoints come from the shared primitives;
   only the link-specific rows need overriding here. */
@media (max-width: 768px) {
    .link-item-link {
        padding: 10px 12px;
        font-size: 13px;
        min-height: 36px;
        gap: 8px;
    }

        .link-item-link:hover {
            padding-left: 14px;
        }

    .link-item-icon {
        width: 16px;
        height: 16px;
    }

    .link-item-external-indicator {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .link-item-link {
        padding: 10px;
        gap: 6px;
        font-size: 12px;
        min-height: 34px;
    }

        .link-item-link:hover {
            padding-left: 10px;
        }

    .link-item-icon {
        width: 14px;
        height: 14px;
    }

    .link-item-title {
        font-size: 12px;
    }

    .link-item-external-indicator {
        width: 12px;
        height: 12px;
    }
}
/* Accessibility - the shell's transition is already disabled by the shared primitive. */
@media (prefers-reduced-motion: reduce) {
    .link-item-link {
        transition: none;
    }
}
/* Dark mode support - the shell, badge and row border are handled by the shared primitives, so
   only the accent and the link-specific colours are restated. */
@media (prefers-color-scheme: dark) {
    .link-list-widget {
        --widget-accent: #1f8891;
        --widget-accent-dark: #1a6b72;
        --widget-accent-border: #0d4a52;
    }

    .link-item-link {
        color: #58a6ff;
    }

        .link-item-link:hover {
            background-color: #1d4d53;
            color: #79c0ff;
        }

        .link-item-link:active {
            background-color: #144a51;
            color: #85c7ff;
        }

        .link-item-link:focus {
            box-shadow: inset 0 0 0 2px #1f8891;
        }

    .link-item-icon {
        opacity: 0.6;
    }

    .link-item-link:hover .link-item-icon {
        opacity: 1;
    }

    .link-item-external-indicator {
        opacity: 0.5;
    }

    .link-item-link:hover .link-item-external-indicator {
        opacity: 1;
    }
}
/* Active link styling */
.link-item-link.active-link {
    background-color: #e7f5f9;
    color: #0c5460;
    font-weight: 700;
}

    .link-item-link.active-link::before {
        background: #17a2b8;
    }

    .link-item-link.active-link:hover {
        background-color: #d0f1f6;
    }

@media (prefers-color-scheme: dark) {
    .link-item-link.active-link {
        background-color: #1d4d53;
        color: #79c0ff;
        font-weight: 700;
    }

        .link-item-link.active-link::before {
            background: #1f8891;
        }

        .link-item-link.active-link:hover {
            background-color: #255a64;
        }
}
/* ==============================================================================
   MonthList
   ============================================================================== */
/* Shell/header/heading/count/badge/body come from the shared primitives; the teal accent, the
   year-grouping accordion and the month rows remain here. This widget's own heading was already
   18px, which is the size the shared .sidebar-widget-heading standardised on. */
.month-list-widget {
    --widget-accent: #20c997;
    --widget-accent-dark: #16a085;
    --widget-accent-border: #0e5e4f;
}
/* Grouped by Year */
.month-list-grouped {
    display: flex;
    flex-direction: column;
}

.year-group {
    border-bottom: 1px solid #e1e4e8;
}

    .year-group:last-child {
        border-bottom: none;
    }

.year-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(32, 201, 151, 0.05) 0%, transparent 100%);
    border: none;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 600;
    font-size: 15px;
    color: #0e5e4f;
    text-align: left;
    font-family: inherit;
}

    .year-group-header:hover {
        background: linear-gradient(90deg, rgba(32, 201, 151, 0.1) 0%, transparent 100%);
    }

    .year-group-header:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px #20c997;
    }

.year-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: currentColor;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* svg sizing comes from .sidebar-widget-icon, which the view now also puts on this element. */
.year-group-header[aria-expanded="false"] .year-toggle-icon {
    transform: rotate(-90deg);
}

.year-text {
    flex: 1;
}

.year-month-count {
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-left: auto;
}

.year-months {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

    .year-months[data-collapsed="true"] {
        display: none;
        animation: slideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 1000px;
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        max-height: 1000px;
    }

    to {
        opacity: 0;
        max-height: 0;
    }
}
/* Both the flat list and the per-year lists are plain sidebar lists, so .month-list-flat and
   .month-list are dropped in favour of .sidebar-widget-list on the <ul>; .year-months keeps its
   own rule below because only it animates. .month-list-item is likewise now
   .sidebar-widget-list-item. */
.month-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    padding-left: 32px;
    color: #0366d6;
    text-decoration: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-weight: 500;
    font-size: 14px;
    min-height: 38px;
}

    .month-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: transparent;
        transition: background 0.15s ease;
    }

    .month-link:hover {
        background-color: #f0f8fc;
        color: #16a085;
        padding-left: 36px;
    }

        .month-link:hover::before {
            background: #20c997;
        }

    .month-link:active {
        background-color: #e7f5f9;
        color: #0e5e4f;
    }

    .month-link:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px #20c997;
    }

.month-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: currentColor;
    opacity: 0.7;
}

/* svg sizing comes from .sidebar-widget-icon, which the view now also puts on this element. */
.month-link:hover .month-link-icon {
    opacity: 1;
}

.month-link-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.month-post-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #e9ecef;
    color: #495057;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    min-width: 28px;
    text-align: center;
}

.month-link:hover .month-post-count {
    background-color: #dee2e6;
    color: #212529;
}
/* Responsive Design

   The shell margin and the header/heading breakpoints come from the shared
   .sidebar-widget-* primitives now; only the accordion and month rows, which are
   unique to this widget, still need their own breakpoints. */
@media (max-width: 768px) {
    .year-group-header {
        padding: 10px 12px;
        font-size: 14px;
    }

    .month-link {
        padding: 8px 12px;
        padding-left: 28px;
        font-size: 13px;
        min-height: 36px;
        gap: 8px;
    }

        .month-link:hover {
            padding-left: 32px;
        }

    .month-link-icon {
        width: 14px;
        height: 14px;
    }

    .month-post-count {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .year-group-header {
        padding: 8px 10px;
        font-size: 13px;
    }

    .year-month-count {
        font-size: 11px;
    }

    .month-link {
        padding: 8px 10px;
        padding-left: 24px;
        font-size: 12px;
        min-height: 34px;
        gap: 6px;
    }

        .month-link:hover {
            padding-left: 24px;
        }

    .month-link-icon {
        width: 12px;
        height: 12px;
    }

    .month-link-title {
        font-size: 12px;
    }

    .month-post-count {
        font-size: 10px;
        padding: 2px 6px;
        min-width: 24px;
    }
}
/* Accessibility - the shell's own transition is already disabled by the shared
   primitive, so only this widget's accordion and rows are listed here. */
@media (prefers-reduced-motion: reduce) {
    .year-group-header,
    .month-link,
    .year-toggle-icon,
    .year-months {
        transition: none;
        animation: none;
    }
}
/* Dark mode support - the dark shell surface, header gradient and badge are all
   handled by the shared primitives; this widget only re-points the accent. */
@media (prefers-color-scheme: dark) {
    .month-list-widget {
        --widget-accent: #1f8f7b;
        --widget-accent-dark: #1a6b5c;
        --widget-accent-border: #0f4a42;
    }

    .year-group {
        border-bottom-color: #30363d;
    }

    .year-group-header {
        background: linear-gradient(90deg, rgba(31, 143, 123, 0.1) 0%, transparent 100%);
        border-bottom-color: #30363d;
        color: #58d926;
    }

        .year-group-header:hover {
            background: linear-gradient(90deg, rgba(31, 143, 123, 0.15) 0%, transparent 100%);
        }

        .year-group-header:focus {
            box-shadow: inset 0 0 0 2px #1f8f7b;
        }

    .year-month-count {
        color: #8b949e;
    }

    .month-link {
        color: #58a6ff;
    }

        .month-link:hover {
            background-color: #1a5449;
            color: #79c0ff;
        }

        .month-link:active {
            background-color: #145044;
            color: #85c7ff;
        }

        .month-link:focus {
            box-shadow: inset 0 0 0 2px #1f8f7b;
        }

    .month-post-count {
        background-color: #30363d;
        color: #8b949e;
    }

    .month-link:hover .month-post-count {
        background-color: #444c56;
        color: #c9d1d9;
    }

    .month-link-icon {
        opacity: 0.6;
    }

    .month-link:hover .month-link-icon {
        opacity: 1;
    }
}
/* Active month styling */
.month-link.active-month {
    background-color: #e7f5f9;
    color: #0e5e4f;
    font-weight: 700;
}

    .month-link.active-month::before {
        background: #20c997;
    }

    .month-link.active-month:hover {
        background-color: #d0f1f6;
    }

@media (prefers-color-scheme: dark) {
    .month-link.active-month {
        background-color: #1a5449;
        color: #58d926;
        font-weight: 700;
    }

        .month-link.active-month::before {
            background: #1f8f7b;
        }

        .month-link.active-month:hover {
            background-color: #265854;
        }
}
/* ==============================================================================
   MostComments
   ============================================================================== */
/* Shell/header/heading/count/badge/body/list/item come from the shared primitives; only the
   orange accent and the commenter rows remain here.

   NAME COLLISION, fixed here: this widget declared .visitor-avatar and .visitor-avatar-container,
   and so does VisitorInfo further down the file. They are two unrelated widgets that happened to
   pick the same names, and because VisitorInfo's block is later it won the cascade for BOTH. The
   MostComments avatar is meant to be @Model.AvatarSize square with a grey ring; what it actually
   rendered was VisitorInfo's 60x60 green-ringed profile picture, which is why these rows were
   taller than their min-height suggested. The MostComments copies are renamed to
   .commenter-avatar* so each widget owns its own name. */
.most-comments-widget {
    --widget-accent: #ff9800;
    --widget-accent-dark: #e68900;
    --widget-accent-border: #cc7000;
}

.visitor-item-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 70px;
}

.visitor-item:hover .visitor-item-content {
    background-color: #fff8f0;
}

.commenter-avatar-container {
    flex-shrink: 0;
    position: relative;
}

.commenter-avatar-link {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.15s ease;
    border: 2px solid #e1e4e8;
    background-color: #f6f8fa;
}

    .commenter-avatar-link:hover {
        border-color: #ff9800;
        box-shadow: 0 2px 6px rgba(255, 152, 0, 0.25);
        transform: scale(1.05);
    }

    .commenter-avatar-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ff9800;
    }

.commenter-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.visitor-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}

.visitor-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
}

.visitor-name-link {
    text-decoration: none;
    transition: all 0.15s ease;
    border-radius: 2px;
    padding: 2px 4px;
    margin: -2px -4px;
    display: inline-block;
}

    .visitor-name-link:hover .visitor-name {
        color: #ff9800;
        text-decoration: underline;
    }

    .visitor-name-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ff9800;
    }

.visitor-country {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
}

.country-flag {
    display: block;
    width: 20px;
    height: 15px;
    object-fit: contain;
    border-radius: 2px;
    border: 1px solid #dee2e6;
    flex-shrink: 0;
}

.country-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.visitor-comment-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    background-color: #f0f0f0;
    padding: 4px 8px;
    border-radius: 3px;
    width: fit-content;
}

    .visitor-comment-count svg {
        width: 12px;
        height: 12px;
        color: #ff9800;
    }

.comment-count-text {
    display: block;
    white-space: nowrap;
}
/* Responsive Design - shell/header/heading breakpoints come from the shared primitives. */
@media (max-width: 768px) {
    .visitor-item-content {
        padding: 10px 12px;
        gap: 10px;
        min-height: 65px;
    }

    .visitor-name {
        font-size: 13px;
    }

    .visitor-country {
        font-size: 11px;
    }

    .country-flag {
        width: 18px;
        height: 13px;
    }

    .visitor-comment-count {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .visitor-item-content {
        padding: 8px 10px;
        gap: 8px;
        min-height: 60px;
    }

    .visitor-name {
        font-size: 12px;
    }

    .visitor-country {
        font-size: 10px;
    }

    .country-flag {
        width: 16px;
        height: 12px;
    }

    .visitor-comment-count {
        font-size: 10px;
        padding: 3px 6px;
    }

        .visitor-comment-count svg {
            width: 10px;
            height: 10px;
        }
}
/* Accessibility - the shell's transition is disabled by the shared primitive. */
@media (prefers-reduced-motion: reduce) {
    .visitor-item-content,
    .commenter-avatar-link {
        transition: none;
    }

        .commenter-avatar-link:hover {
            transform: none;
        }
}
/* Dark mode support - shell surface and badge come from the shared primitives. */
@media (prefers-color-scheme: dark) {
    .most-comments-widget {
        --widget-accent: #d97706;
        --widget-accent-dark: #b45309;
        --widget-accent-border: #92400e;
    }

    .visitor-item {
        border-bottom-color: #30363d;
    }

        .visitor-item:hover .visitor-item-content {
            background-color: #2d1a0f;
        }

    .commenter-avatar-link {
        border-color: #444c56;
        background-color: #30363d;
    }

        .commenter-avatar-link:hover {
            border-color: #ff9800;
            box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
        }

        .commenter-avatar-link:focus {
            box-shadow: 0 0 0 2px #22272e, 0 0 0 4px #d97706;
        }

    .visitor-name {
        color: #c9d1d9;
    }

    .visitor-name-link:hover .visitor-name {
        color: #ffb86c;
    }

    .visitor-country {
        color: #8b949e;
    }

    .visitor-comment-count {
        background-color: #30363d;
        color: #8b949e;
    }

        .visitor-comment-count svg {
            color: #ff9800;
        }
}
/* ==============================================================================
   Newsletter
   ============================================================================== */
.newsletter-widget {
    background: linear-gradient(135deg, #f5f7fa 0%, #f8f9fb 100%);
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out;
}

    .newsletter-widget:hover {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    }

.newsletter-header {
    background: linear-gradient(135deg, #6c5ce7 0%, #5f3dc4 100%);
    color: white;
    padding: 20px;
    border-bottom: 2px solid #4a3ea3;
    text-align: center;
}

.newsletter-title {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.newsletter-subtitle {
    margin: 0;
    font-size: 13px;
    opacity: 0.95;
    font-weight: 500;
}

.newsletter-container {
    padding: 24px 20px;
}
/* Form Styling */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.optional {
    font-weight: 400;
    color: #999;
    font-size: 12px;
    text-transform: lowercase;
    letter-spacing: 0;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input {
    flex: 1;
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.15s ease;
    background-color: white;
    color: #333;
}

    .form-input::placeholder {
        color: #999;
    }

    .form-input:focus {
        outline: none;
        border-color: #6c5ce7;
        box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
        background-color: #fafbff;
    }

    .form-input:invalid:not(:placeholder-shown) {
        border-color: #dc3545;
    }

    .form-input:valid:not(:placeholder-shown) {
        border-color: #28a745;
    }

.input-icon {
    position: absolute;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #999;
    pointer-events: none;
}

    .input-icon svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.form-input:focus ~ .input-icon {
    color: #6c5ce7;
}

.form-error,
.form-info {
    display: block;
    font-size: 12px;
    min-height: 16px;
}

.form-error {
    color: #dc3545;
    visibility: hidden;
}

    .form-error:not(:empty) {
        visibility: visible;
    }

.form-info {
    color: #666;
    opacity: 0.8;
}
/* Button Styling */
.btn-subscribe {
    padding: 12px 16px;
    background: linear-gradient(135deg, #6c5ce7 0%, #5f3dc4 100%);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: inherit;
    min-height: 44px;
}

    .btn-subscribe:hover:not(:disabled) {
        background: linear-gradient(135deg, #5f3dc4 0%, #4a3ea3 100%);
        box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
        transform: translateY(-2px);
    }

    .btn-subscribe:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(108, 92, 231, 0.2);
    }

    .btn-subscribe:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.25);
    }

    .btn-subscribe:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

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

.btn-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-loader svg {
        animation: spin 0.8s linear infinite;
    }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* Status Messages */
.form-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .form-message.success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .form-message.error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .form-message svg {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
    }

.message-text {
    flex: 1;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Privacy Notice */
.newsletter-privacy {
    margin: 0;
    padding: 12px 14px;
    background-color: rgba(108, 92, 231, 0.05);
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(108, 92, 231, 0.1);
}

    .newsletter-privacy svg {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        color: #6c5ce7;
    }
/* Responsive Design */
@media (max-width: 768px) {
    .newsletter-widget {
        margin-bottom: 16px;
    }

    .newsletter-header {
        padding: 16px;
    }

    .newsletter-title {
        font-size: 18px;
    }

    .newsletter-subtitle {
        font-size: 12px;
    }

    .newsletter-container {
        padding: 20px 16px;
    }

    .form-input {
        font-size: 16px;
        padding: 12px 12px 12px 38px;
    }

    .btn-subscribe {
        padding: 14px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .newsletter-header {
        padding: 12px;
    }

    .newsletter-title {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .newsletter-subtitle {
        font-size: 11px;
    }

    .newsletter-container {
        padding: 16px;
    }

    .form-label {
        font-size: 12px;
    }

    .form-input {
        padding: 10px 10px 10px 34px;
    }

    .input-icon {
        left: 8px;
    }

    .btn-subscribe {
        padding: 12px 14px;
        font-size: 12px;
    }

    .form-message {
        padding: 10px 12px;
        font-size: 12px;
    }

    .newsletter-privacy {
        padding: 10px 12px;
        font-size: 11px;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .newsletter-widget,
    .form-input,
    .btn-subscribe,
    .form-message,
    .btn-loader svg {
        transition: none;
        animation: none;
    }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .newsletter-widget {
        background: linear-gradient(135deg, #2d333b 0%, #22272e 100%);
        border-color: #444c56;
    }

    .newsletter-header {
        background: linear-gradient(135deg, #7c64d8 0%, #6c5ce7 100%);
        border-bottom-color: #5f3dc4;
    }

    .form-label {
        color: #c9d1d9;
    }

    .form-input {
        background-color: #0d1117;
        border-color: #30363d;
        color: #c9d1d9;
    }

        .form-input::placeholder {
            color: #6e7681;
        }

        .form-input:focus {
            border-color: #8270d8;
            background-color: #161b22;
            box-shadow: 0 0 0 3px rgba(130, 112, 216, 0.15);
        }

    .input-icon {
        color: #6e7681;
    }

    .form-input:focus ~ .input-icon {
        color: #8270d8;
    }

    .form-info {
        color: #8b949e;
    }

    .form-message.success {
        background-color: #1a3a1a;
        color: #56d364;
        border-color: #2d7a2d;
    }

    .form-message.error {
        background-color: #3a1f1a;
        color: #ff7b72;
        border-color: #7a2b2a;
    }

    .newsletter-privacy {
        background-color: rgba(130, 112, 216, 0.08);
        border-color: rgba(130, 112, 216, 0.15);
        color: #8b949e;
    }

        .newsletter-privacy svg {
            color: #8270d8;
        }
}
/* ==============================================================================
   PageList
   ============================================================================== */
/* Shell/header/heading/count/badge/body/list/item come from the shared primitives; only the
   blue accent and the page rows remain here. */
.page-list-widget {
    --widget-accent: #1e90ff;
    --widget-accent-dark: #1873cc;
    --widget-accent-border: #1255b0;
}

.page-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: #0366d6;
    text-decoration: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-weight: 500;
    font-size: 14px;
}

    .page-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: transparent;
        transition: background 0.15s ease;
    }

    .page-link:hover {
        background-color: #f0f8ff;
        color: #1873cc;
        padding-left: 18px;
    }

        .page-link:hover::before {
            background: #1e90ff;
        }

    .page-link:active {
        background-color: #e0f0ff;
        color: #1255b0;
    }

    .page-link:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px #1e90ff;
    }

.page-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: currentColor;
    opacity: 0.7;
}

/* The icon's own svg sizing rule is now .sidebar-widget-icon svg in the shared primitives. */
.page-link:hover .page-link-icon {
    opacity: 1;
}

.page-link-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
}

.page-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: currentColor;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-link:hover .page-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

.page-description {
    margin: 0;
    padding: 0 16px 10px 40px;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Responsive Design - shell/header/heading breakpoints come from the shared primitives. */
@media (max-width: 768px) {
    .page-link {
        padding: 10px 12px;
        font-size: 13px;
    }

        .page-link:hover {
            padding-left: 14px;
        }

    .page-link-icon {
        width: 16px;
        height: 16px;
    }

    .page-description {
        padding: 0 12px 8px 36px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .page-link {
        padding: 10px;
        gap: 8px;
        font-size: 12px;
    }

        .page-link:hover {
            padding-left: 10px;
        }

    .page-link-icon {
        width: 14px;
        height: 14px;
    }

    .page-link-arrow {
        display: none;
    }

    .page-description {
        padding: 0 10px 8px 32px;
        font-size: 10px;
        -webkit-line-clamp: 1;
    }
}
/* Accessibility - the shell's transition is disabled by the shared primitive. */
@media (prefers-reduced-motion: reduce) {
    .page-link,
    .page-link-arrow {
        transition: none;
    }
}
/* Dark mode support - shell surface, badge and row borders come from the shared primitives. */
@media (prefers-color-scheme: dark) {
    .page-list-widget {
        --widget-accent: #2a7fe4;
        --widget-accent-dark: #1f6cc7;
        --widget-accent-border: #1856a0;
    }

    .page-link {
        color: #58a6ff;
    }

        .page-link:hover {
            background-color: #1d4770;
            color: #79c0ff;
        }

        .page-link:active {
            background-color: #133957;
            color: #85c7ff;
        }

        .page-link:focus {
            box-shadow: inset 0 0 0 2px #2a7fe4;
        }

    .page-link-icon {
        opacity: 0.6;
    }

    .page-link:hover .page-link-icon {
        opacity: 1;
    }

    .page-description {
        color: #8b949e;
    }
}
/* Active page styling */
.page-link.active-page {
    background-color: #e0f0ff;
    color: #1255b0;
    font-weight: 700;
}

    .page-link.active-page::before {
        background: #1e90ff;
    }

    .page-link.active-page:hover {
        background-color: #d0e6ff;
    }

@media (prefers-color-scheme: dark) {
    .page-link.active-page {
        background-color: #1d4770;
        color: #79c0ff;
        font-weight: 700;
    }

        .page-link.active-page::before {
            background: #2a7fe4;
        }

        .page-link.active-page:hover {
            background-color: #245a8e;
        }
}
/* ==============================================================================
   PostCalendar
   ============================================================================== */
.calendar-wrapper {
    max-width: 900px;
    margin: 30px auto;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 5px;
}

    /* Audit PC14: this selector was ".calendar-header h3", but the component's
       view has always emitted the month/year heading as an <h4> - it sits under
       the sidebar's <h4 class="widget-title">, so h3 would be a heading-level
       skip. Nothing matched, and the heading kept its default margins and did
       not take the flex growth that centres it between the prev/next buttons. */
    .calendar-header h4 {
        margin: 0;
        flex: 1;
        text-align: center;
    }

.calendar-table {
    margin: 0;
}

    .calendar-table thead {
        background-color: #007bff;
        color: white;
    }

    .calendar-table th {
        text-align: center;
        font-weight: bold;
        padding: 10px;
    }

    .calendar-table td {
        height: 100px;
        vertical-align: top;
        padding: 8px;
        position: relative;
        background-color: #fff;
        border: 1px solid #dee2e6;
    }

        .calendar-table td.other-month {
            background-color: #f8f9fa;
            color: #ccc;
        }

        .calendar-table td.today {
            background-color: #e7f3ff;
        }

/* Every day number was bold, so weight carried no information: a day with posts
   looked exactly like a day without. Normal weight is the default and days that
   are actually bound to posts are the ones set in bold. */
.day-number {
    font-weight: normal;
    margin-bottom: 5px;
    color: #333;
}

    .day-number.has-posts {
        font-weight: 800;
    }

        /* The day number in the linked rendering is an <a>, which Bootstrap colours
       and leaves at inherited weight; bold has to reach the anchor itself. Colour
       is left to the link styles so the affordance stays visible. */
        .day-number.has-posts a {
            font-weight: 800;
        }

/* Audit PC11: the calendar's post chips were styled as ".post-item", but
   ".post-item" is ALSO declared further down this same stylesheet for the
   RecentPosts widget (transparent background, bottom border, #f0fdf4 hover).
   Later rules of equal specificity win, so the calendar chips lost their blue
   background and white text and rendered as unreadable near-white-on-white
   text - and the RecentPosts rules were in turn overridden inside the
   calendar. The calendar's own rules are namespaced so the two widgets stop
   fighting; the view now emits .calendar-post-link. */
.calendar-post-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.calendar-post-link {
    display: block;
    background-color: #007bff;
    color: #fff;
    padding: 3px 5px;
    margin: 2px 0;
    border-radius: 3px;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .calendar-post-link:hover,
    .calendar-post-link:focus {
        background-color: #0056b3;
        color: #fff;
        text-decoration: underline;
    }

.empty-day {
    color: #ccc;
    font-size: 0.9rem;
}
/* ==============================================================================
   PostPager
   ============================================================================== */
.post-pager-widget {
    margin: 30px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #f8f9fb 100%);
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease-in-out;
}

    .post-pager-widget:hover {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    }

.pager-container {
    /* Single source of truth for control height. Every child
       (.pager-link / .pager-page / .pager-ellipsis) derives its
       height from this, so the three tracks can never drift apart.
       Breakpoints override this ONE value instead of each element. */
    --pager-control-size: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* nowrap: prev / pages / next must stay on one row */
    flex-wrap: nowrap;
}
/* Links (Previous/Next) */
.pager-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Equal tracks so the page numbers stay optically centred
       even though "Previous"/"Next" labels differ in width */
    flex: 0 0 auto;
    gap: 8px;
    padding: 8px 14px;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #0366d6;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
    height: var(--pager-control-size);
    line-height: 1;
}

    .pager-link:hover:not(.disabled) {
        background-color: #0366d6;
        color: white;
        border-color: #0366d6;
        box-shadow: 0 2px 6px rgba(3, 102, 214, 0.2);
    }

    .pager-link:focus:not(.disabled) {
        outline: none;
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.2);
        border-color: #0366d6;
    }

    .pager-link.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        color: #999;
        border-color: #ddd;
    }

.pager-prev-icon,
.pager-next-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

    .pager-prev-icon svg,
    .pager-next-icon svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.pager-label {
    display: block;
}
/* Page Numbers */
.pager-pages {
    display: flex;
    align-items: center;
    /* `safe center` falls back to flex-start when the track
       overflows, so page 1 is never clipped out of reach */
    justify-content: center;
    justify-content: safe center;
    gap: 4px;
    /* nowrap: page numbers stay on the prev/next line instead of
       stacking and making this track taller than the buttons */
    flex-wrap: nowrap;
    /* Absorbs the space between prev/next so numbers sit centred */
    flex: 1 1 auto;
    min-width: 0;
    /* Many pages on a narrow screen scroll rather than wrap */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .pager-pages::-webkit-scrollbar {
        display: none;
    }

.pager-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pager-control-size);
    height: var(--pager-control-size);
    /* Keeps its size when the track scrolls */
    flex-shrink: 0;
    padding: 0 4px;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #0366d6;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.15s ease;
    cursor: pointer;
    line-height: 1;
    text-align: center;
}

    .pager-page:hover {
        background-color: #f0f8ff;
        border-color: #0366d6;
        color: #0366d6;
    }

    .pager-page:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0366d6;
        border-radius: 2px;
    }

    .pager-page.current {
        background: linear-gradient(135deg, #0366d6 0%, #024ba7 100%);
        color: white;
        border-color: #024ba7;
        cursor: default;
        font-weight: 700;
    }

        .pager-page.current:hover {
            background: linear-gradient(135deg, #0366d6 0%, #024ba7 100%);
            border-color: #024ba7;
        }

.pager-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pager-control-size);
    height: var(--pager-control-size);
    flex-shrink: 0;
    color: #999;
    font-weight: 600;
    user-select: none;
}
/* Page Info */
/* NOTE: .pager-info is a sibling of .pager-container inside
   .post-pager-widget, NOT a flex child of .pager-container. */
.pager-info {
    font-size: 12px;
    color: #666;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pager-page-info {
    display: block;
}
/* Responsive Design */
@media (max-width: 768px) {
    .post-pager-widget {
        margin: 20px 0;
        padding: 16px;
    }

    /* One value resizes prev, pages and next together */
    .pager-container {
        --pager-control-size: 34px;
        gap: 12px;
    }

    .pager-link {
        padding: 8px 12px;
        font-size: 12px;
    }

    .pager-label {
        display: none;
    }

    .pager-page {
        padding: 0 2px;
        font-size: 12px;
    }

    .pager-info {
        font-size: 11px;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .post-pager-widget {
        margin: 16px 0;
        padding: 12px;
    }

    .pager-container {
        --pager-control-size: 32px;
        gap: 8px;
    }

    .pager-link {
        padding: 6px 10px;
        font-size: 11px;
    }

    .pager-prev-icon,
    .pager-next-icon {
        width: 12px;
        height: 12px;
    }

    /* Stays inline with prev/next; overflows by scrolling.
       The previous `flex: 1 0 100%` + `order` rules deliberately
       pushed this onto a second row and have been removed. */
    .pager-pages {
        gap: 2px;
    }

    .pager-page,
    .pager-ellipsis {
        font-size: 11px;
    }

    /* `order` removed: .pager-info is not a flex item of .pager-container */
    .pager-info {
        font-size: 10px;
        margin-top: 8px;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .post-pager-widget,
    .pager-link,
    .pager-page {
        transition: none;
    }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .post-pager-widget {
        background: linear-gradient(135deg, #2d333b 0%, #22272e 100%);
        border-color: #444c56;
    }

    .pager-link {
        background-color: #1c2128;
        border-color: #30363d;
        color: #58a6ff;
    }

        .pager-link:hover:not(.disabled) {
            background-color: #58a6ff;
            color: #0d1117;
            border-color: #58a6ff;
            box-shadow: 0 2px 6px rgba(88, 166, 255, 0.2);
        }

        .pager-link:focus:not(.disabled) {
            box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
            border-color: #58a6ff;
        }

        .pager-link.disabled {
            opacity: 0.4;
            color: #6e7681;
            border-color: #30363d;
        }

    .pager-page {
        background-color: #1c2128;
        border-color: #30363d;
        color: #58a6ff;
    }

        .pager-page:hover {
            background-color: #0d1e30;
            border-color: #58a6ff;
        }

        .pager-page.current {
            background: linear-gradient(135deg, #58a6ff 0%, #1f6feb 100%);
            color: #0d1117;
            border-color: #1f6feb;
        }

            .pager-page.current:hover {
                background: linear-gradient(135deg, #58a6ff 0%, #1f6feb 100%);
                border-color: #1f6feb;
            }

    .pager-ellipsis {
        color: #6e7681;
    }

    .pager-info {
        color: #8b949e;
    }
}

.pager-no-posts {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    color: #666;
    font-size: 14px;
}

    .pager-no-posts p {
        margin: 0;
    }

@media (prefers-color-scheme: dark) {
    .pager-no-posts {
        background-color: #1c2128;
        border-color: #30363d;
        color: #8b949e;
    }
}
/* ==============================================================================
   RecentComments
   ============================================================================== */
/* Shell/header/heading/count/badge/body/list/item come from the shared primitives; only the
   amber accent and the comment rows remain here.

   NAME COLLISION 1, fixed here: this widget declared a bare `.comment-item`, but that name
   belongs to the post-page comment list as well - CommentView.cshtml:18 renders
   `<li class="media comment-item">`, and section 04.comment-item styles its children through
   it. The widget's `border-bottom: 1px solid #f0f0f0` and amber `:hover` were therefore
   painting rows in the post-page thread too, which is the same defect audit CS2 recorded for
   `.comment-header`/`.comment-body` and is fixed the same way: the shared list-item rules now
   come from `.sidebar-widget-list-item`, and the one genuinely widget-specific rule left, the
   amber hover, is scoped to `.recent-comments-widget`.

   NAME COLLISION 2, fixed here: `.comment-count` was declared twice in this one section - as
   the header badge wrapper above and again further down as `{ font-weight: 600 }` - because
   the view uses it for two unrelated things: the header count wrapper (Default.cshtml:52) and
   the reply link's inline "(3)" (Default.cshtml:128). Both declarations matched both elements,
   so the inline count in the middle of a sentence was being turned into an `inline-flex` box.
   The header wrapper now uses the shared `.sidebar-widget-count`, leaving `.comment-count` to
   mean only the inline number, which is the single remaining `font-weight` rule below. */
.recent-comments-widget {
    --widget-accent: #f59e0b;
    --widget-accent-dark: #d97706;
    --widget-accent-border: #b45309;
}

    .recent-comments-widget .comment-item:hover {
        background-color: #fffaf0;
    }

.comment-article {
    padding: 12px 16px;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Comment Header */
/* Audit CS2: `.comment-header` and `.comment-body` below belong to the RecentComments
   sidebar widget, but they were published unscoped and the single-post comment list
   emits the very same two class names (Post.cshtml:341,368), so the widget's spacing
   was being applied to the post page's comments. Both are now scoped to the widget;
   the post page gets its own values in section 32. */
.recent-comments-widget .comment-header {
    margin-bottom: 8px;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
}

.comment-author {
    font-weight: 600;
    color: #333;
    word-break: break-word;
}

.comment-author-link {
    text-decoration: none;
    transition: all 0.15s ease;
    border-radius: 2px;
    padding: 2px 4px;
    margin: -2px -4px;
    display: inline-flex;
}

    .comment-author-link:hover .comment-author {
        color: #f59e0b;
        text-decoration: underline;
    }

    .comment-author-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59e0b;
    }

.comment-separator {
    color: #ddd;
    margin: 0 2px;
}

.comment-post-link {
    color: #0366d6;
    text-decoration: none;
    transition: all 0.15s ease;
    border-radius: 2px;
    padding: 2px 4px;
    margin: -2px -4px;
    display: inline-flex;
    flex: 1;
    min-width: 0;
}

    .comment-post-link:hover {
        color: #d97706;
        text-decoration: underline;
        background-color: rgba(245, 158, 11, 0.1);
    }

    .comment-post-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59e0b;
    }

.comment-post-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Comment Body */
/* Audit CS2: scoped to the widget — see the note on .comment-header above. */
.recent-comments-widget .comment-body {
    margin: 8px 0;
}

.comment-text {
    margin: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* Comment Footer */
.comment-footer {
    margin-top: 8px;
}

.comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background-color: #f0f0f0;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    color: #0366d6;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
}

    .comment-reply-link:hover {
        background-color: #fff3cd;
        border-color: #f59e0b;
        color: #d97706;
    }

    .comment-reply-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px #f59e0b;
    }

.comment-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

    .comment-link-icon svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.comment-link-text {
    display: inline-block;
}

/* The inline count inside the reply link. See the collision note at the top of this
   section: this is now the only meaning of `.comment-count`. */
.comment-count {
    font-weight: 600;
}
/* Responsive Design

   The shell margin and the header/heading breakpoints come from the shared primitives;
   only the comment rows, which are unique to this widget, are left here. */
@media (max-width: 768px) {
    .comment-article {
        padding: 10px 12px;
    }

    .comment-meta {
        font-size: 11px;
        gap: 4px;
    }

    .comment-text {
        font-size: 12px;
    }

    .comment-reply-link {
        padding: 3px 6px;
        font-size: 10px;
    }

    .comment-post-title {
        max-width: 180px;
    }
}

@media (max-width: 480px) {
    .comment-article {
        padding: 8px 10px;
    }

    .comment-meta {
        font-size: 10px;
        gap: 3px;
    }

    .comment-separator {
        margin: 0 1px;
    }

    .comment-text {
        font-size: 11px;
    }

    .comment-reply-link {
        padding: 3px 5px;
        font-size: 9px;
    }

    .comment-link-icon {
        width: 10px;
        height: 10px;
    }

    .comment-post-title {
        max-width: 120px;
    }
}
/* Accessibility - the shell's own transition is already disabled by the shared
   primitive, so only this widget's rows and links are listed here. */
@media (prefers-reduced-motion: reduce) {
    .comment-article,
    .comment-author-link,
    .comment-post-link,
    .comment-reply-link {
        transition: none;
    }
}
/* Dark mode support - the dark shell surface, header gradient, badge and row borders
   are all handled by the shared primitives; this widget keeps its accent (which is
   already the dark-mode value) and re-points only the amber row hover. */
@media (prefers-color-scheme: dark) {
    .recent-comments-widget .comment-item:hover {
        background-color: #1a140d;
    }

    .comment-author {
        color: #c9d1d9;
    }

    .comment-author-link:hover .comment-author {
        color: #ffb86c;
    }

    .comment-author-link:focus {
        box-shadow: 0 0 0 2px #22272e, 0 0 0 4px #f59e0b;
    }

    .comment-separator {
        color: #444c56;
    }

    .comment-post-link {
        color: #58a6ff;
    }

        .comment-post-link:hover {
            color: #ffb86c;
            background-color: rgba(245, 158, 11, 0.15);
        }

        .comment-post-link:focus {
            box-shadow: 0 0 0 2px #22272e, 0 0 0 4px #f59e0b;
        }

    .comment-text {
        color: #8b949e;
    }

    .comment-reply-link {
        background-color: #30363d;
        border-color: #444c56;
        color: #58a6ff;
    }

        .comment-reply-link:hover {
            background-color: #3a3000;
            border-color: #a0860e;
            color: #ffb86c;
        }

        .comment-reply-link:focus {
            box-shadow: 0 0 0 2px #22272e, 0 0 0 3px #f59e0b;
        }
}

/* The empty state used to declare `.recent-comments-empty` as a second, slightly
   different copy of the widget shell - same gradient and border but missing the
   box-shadow, the hover and the flex column - so the widget visibly changed shape
   when it ran out of comments. The empty branch of the view now renders the real
   shell, and `.empty-message` is an alias of the shared empty-state primitive, so
   both rules here and their dark-mode copies are gone. */
/* ==============================================================================
   RecentPosts
   ============================================================================== */
/* Shell/header/heading/count/badge/body/list/item come from the shared primitives; only the
   green accent and the post rows remain here.

   STRAY CLASS, note for whoever touches the home page: `recent-posts-widget` is not unique to
   this widget. Views/Home/Index.cshtml puts `class="sidebar-widget recent-posts-widget"` on
   four unrelated <section> elements - the PostCalendar wrapper (:136), a hand-rolled recent
   posts list (:146), the AuthorList wrapper (:170) and the CategoryList wrapper (:173) - which
   is copy-paste residue. Those sections already get their card from `.sidebar-widget` (:1166),
   so while this class was declaring the full shell they were being painted twice: the theme's
   white card plus this widget's grey gradient, border and 20px margin layered on top. Now that
   the shell lives on `.sidebar-widget-shell`, which those sections do not carry, they render
   with the single card they were always meant to have. The class is inert there and should be
   dropped from those four sections; note the list inside Index.cshtml uses `.recent-posts-list`
   and `.recent-post-item`, which are the theme's own classes (:1192-1204), NOT this widget's
   `.posts-list`/`.post-item`, so nothing in that markup depends on this section.

   `.post-item` itself was contested once before - see audit PC11 above, where PostCalendar's
   date chips used the same name and lost to this section. That was settled by renaming the
   calendar's chips, so the name is this widget's alone now; the shared list-item rules still
   move to `.sidebar-widget-list-item` and only the green hover stays behind, scoped to the
   widget for the same reason `.post-title` and `.post-meta` are scoped by audit CS1 below. */
.recent-posts-widget {
    --widget-accent: #10b981;
    --widget-accent-dark: #059669;
    --widget-accent-border: #047857;
}

    .recent-posts-widget .post-item:hover {
        background-color: #f0fdf4;
    }

.post-article {
    padding: 12px 16px;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Audit CS1: the same unscoped-widget-class problem as the VisitorInfo `.post-title`
   further down. These three rules belong to the RecentPosts sidebar widget, whose own
   heading is `<h4 class="post-title">` (Components/RecentPosts/Default.cshtml:77), but
   they were published bare. `.post-title` is the theme's post-heading class and
   `.post-meta` the byline row, both emitted by the main article on the single-post page
   (Post.cshtml:110,111) and by every post list. The widget was therefore shrinking the
   headline to 14px and re-spacing the byline site-wide, held off the article body only
   by the more specific `.post .post-*` rules in section 03 — and NOT held off
   Post.cshtml:97's post-navigation block, which sits outside `article.post`.
   Scoped to the widget that owns them. */
.recent-posts-widget .post-title {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    max-width: 100%;
    word-wrap: break-word;
}

.post-title-link {
    color: #0366d6;
    text-decoration: none;
    text-wrap: wrap;
    transition: all 0.15s ease;
    border-radius: 2px;
    padding: 2px 4px;
    margin: -2px -4px;
    display: inline-block;
}

    .post-title-link:hover {
        color: #059669;
        text-decoration: underline;
    }

    .post-title-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #10b981;
    }

/* Audit CS1: scoped with .post-title above. */
.recent-posts-widget .post-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.post-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #666;
}
/* Comments Item */
.comments-item {
    color: #059669;
}

    .comments-item svg {
        color: #10b981;
    }

.meta-label {
    display: inline-block;
    word-break: break-word;
}
/* Rating Item */
.rating-item {
    gap: 6px;
}

.rating-stars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.rating-bar {
    display: inline-block;
    width: 40px;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.rating-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    transition: width 0.3s ease;
}

.raters-count {
    font-size: 10px;
    color: #999;
}
/* Responsive Design */
@media (max-width: 768px) {
    .post-article {
        padding: 10px 12px;
    }

    .recent-posts-widget .post-title {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .recent-posts-widget .post-meta {
        gap: 10px;
        font-size: 10px;
    }

    .rating-bar {
        width: 36px;
        height: 7px;
    }
}

@media (max-width: 480px) {
    .post-article {
        padding: 8px 10px;
    }

    .recent-posts-widget .post-title {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .recent-posts-widget .post-meta {
        gap: 8px;
        font-size: 9px;
    }

    .post-meta-item svg {
        width: 10px;
        height: 10px;
    }

    .rating-bar {
        width: 32px;
        height: 6px;
    }

    .raters-count {
        font-size: 9px;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .post-article,
    .post-title-link,
    .rating-fill {
        transition: none;
    }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .recent-posts-widget .post-item:hover {
        background-color: #0d2b1f;
    }

    .post-title-link {
        color: #58a6ff;
    }

        .post-title-link:hover {
            color: #58ff99;
        }

        .post-title-link:focus {
            box-shadow: 0 0 0 2px #22272e, 0 0 0 4px #10b981;
        }

    .post-meta-item {
        color: #8b949e;
    }

    .comments-item {
        color: #58ff99;
    }

        .comments-item svg {
            color: #10b981;
        }

    .rating-bar {
        background-color: #30363d;
        border-color: #444c56;
    }

    .rating-fill {
        background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    }

    .raters-count {
        color: #6e7681;
    }
}
/* Active post styling */
.post-title-link.active-post {
    color: #047857;
    font-weight: 700;
}

    .post-title-link.active-post:hover {
        color: #059669;
    }

@media (prefers-color-scheme: dark) {
    .post-title-link.active-post {
        color: #58ff99;
        font-weight: 700;
    }

        .post-title-link.active-post:hover {
            color: #58ff99;
        }
}
/* ==============================================================================
   RelatedPosts
   ============================================================================== */
/* Shell, header, heading, count and badge come from the shared primitives; only the pink accent
   and the card grid remain here.

   Two notes on how this one differed from the other widgets:

   1. The shell was byte-identical to the other nine EXCEPT that it was missing the
      `display: flex; flex-direction: column` pair they all carried. Adopting
      `.sidebar-widget-shell` therefore adds those two declarations. That is a real change, but a
      harmless one here: this widget's only child is `.related-posts-container`, and a lone block
      child of a column flex container lays out the same as it did in normal flow (it still
      stretches to full width, and there is nothing below it to be spaced against). The omission
      looks like an oversight in the original rather than an intent, since every sibling widget
      has it.

   2. `.related-posts-container` is NOT the body primitive and is deliberately left alone below.
      The other widgets' containers are scrolling bodies (`flex: 1; padding: 8px 0;
      min-height: 100px; overflow-y: auto`) wrapping a <ul>; this one is a plain `padding: 16px`
      gutter around a CSS grid of cards. Same position in the markup, entirely different job, so
      merging it would have silently given the card grid a scrollbar and a minimum height. It
      keeps its own name and its own responsive overrides (1024/768/480) untouched.

   Everything from `.related-posts-grid` down is card-specific and unique to this widget. The
   class `.related-posts-widget` is kept as the accent hook and is also the target of a
   `document.querySelector('.related-posts-widget')` scroll handler in the view's inline script,
   so it must not be renamed. */
.related-posts-widget {
    --widget-accent: #ec4899;
    --widget-accent-dark: #db2777;
    --widget-accent-border: #be185d;
}

.related-posts-container {
    padding: 16px;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.related-post-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

    .related-post-card:hover {
        border-color: #ec4899;
        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.15);
        transform: translateY(-2px);
    }

    .related-post-card:focus-within {
        border-color: #ec4899;
        box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
    }
/* Card Header */
.post-card-header {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.post-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.post-card-link {
    color: #0366d6;
    text-decoration: none;
    transition: all 0.15s ease;
    display: inline-block;
    border-radius: 2px;
    padding: 2px 4px;
    margin: -2px -4px;
}

    .post-card-link:hover {
        color: #db2777;
        text-decoration: underline;
    }

    .post-card-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ec4899;
    }
/* Card Description */
.post-card-description {
    padding: 12px 14px;
    flex: 1;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
}

.description-text {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
/* Card Footer */
.post-card-footer {
    padding: 10px 14px;
    flex-shrink: 0;
}

.post-card-read-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background-color: #f0f0f0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #0366d6;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s ease;
    cursor: pointer;
}

    .post-card-read-link:hover {
        background-color: #fce7f3;
        border-color: #ec4899;
        color: #db2777;
    }

    .post-card-read-link:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2);
    }

.read-link-text {
    display: block;
}

.read-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

    .read-link-arrow svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.post-card-read-link:hover .read-link-arrow {
    opacity: 1;
    transform: translateX(0);
}
/* Responsive Design */
@media (max-width: 1024px) {
    .related-posts-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }

    .related-posts-container {
        padding: 12px;
    }
}

@media (max-width: 768px) {
    .related-posts-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

    .related-posts-container {
        padding: 10px;
    }

    .post-card-header {
        padding: 10px 12px;
    }

    .post-card-title {
        font-size: 13px;
    }

    .post-card-description {
        padding: 10px 12px;
    }

    .description-text {
        font-size: 11px;
        -webkit-line-clamp: 2;
    }

    .post-card-footer {
        padding: 8px 12px;
    }

    .post-card-read-link {
        padding: 5px 8px;
        font-size: 11px;
    }

    .read-link-arrow {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .related-posts-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .related-posts-container {
        padding: 8px;
    }

    .post-card-header {
        padding: 8px 10px;
    }

    .post-card-title {
        font-size: 12px;
    }

    .post-card-description {
        padding: 8px 10px;
    }

    .description-text {
        font-size: 10px;
        -webkit-line-clamp: 2;
    }

    .post-card-footer {
        padding: 6px 10px;
    }

    .post-card-read-link {
        width: 100%;
        justify-content: center;
        padding: 8px 10px;
        font-size: 11px;
    }

    .read-link-arrow {
        width: 10px;
        height: 10px;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .related-post-card,
    .post-card-link,
    .post-card-read-link,
    .read-link-arrow {
        transition: none;
    }

        .related-post-card:hover {
            transform: none;
        }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .related-post-card {
        background-color: #1c2128;
        border-color: #30363d;
    }

        .related-post-card:hover {
            border-color: #ec4899;
            box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
        }

        .related-post-card:focus-within {
            border-color: #ec4899;
            box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
        }

    .post-card-header {
        border-bottom-color: #30363d;
    }

    .post-card-link {
        color: #58a6ff;
    }

        .post-card-link:hover {
            color: #ff99cc;
        }

        .post-card-link:focus {
            box-shadow: 0 0 0 2px #1c2128, 0 0 0 4px #ec4899;
        }

    .post-card-description {
        border-bottom-color: #30363d;
    }

    .description-text {
        color: #8b949e;
    }

    .post-card-read-link {
        background-color: #30363d;
        border-color: #444c56;
        color: #58a6ff;
    }

        .post-card-read-link:hover {
            background-color: #3a1f2b;
            border-color: #ec4899;
            color: #ff99cc;
        }

        .post-card-read-link:focus {
            box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.25);
        }
}
/* ==============================================================================
   SearchBox
   ============================================================================== */
.search-box-widget {
    background: linear-gradient(135deg, #f5f7fa 0%, #f8f9fb 100%);
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 16px;
    margin-bottom: 20px;
    transition: box-shadow 0.2s ease-in-out;
}

    .search-box-widget:hover {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    }

.search-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The input row. Audit SB-A3: this is the flex line that used to be
   .search-input-group, back when the submit button was a sibling of the field.
   Sizing (input flexes, button does not) belongs here; .search-input-group below is
   now purely the field + its overlaid icon. */
.search-controls {
    display: flex;
    /* stretch (not center) so the input and the button resolve to the exact same
       height; with `center` the 1px height difference between them left the button
       floating half a pixel proud of the input's bottom edge. */
    align-items: stretch;
    gap: 8px;
}

.search-input-group {
    /* The only flexible item on the row, so the button stays flush right. */
    flex: 1;
    /* min-width: 0 for the same reason as on .search-input below - without it the
       input's intrinsic minimum width propagates up through this wrapper and the
       flex line overflows .search-box-widget in a narrow sidebar. */
    min-width: 0;
    display: flex;
    /* Positioning context for the absolutely positioned .search-input-icon. Now that
       this box wraps nothing but the field, the icon is positioned against the
       field's own bounds rather than against a row that also held the button. */
    position: relative;
}

.search-button-group {
    /* Never shrink: the input is the only flexible item on the row. */
    flex: 0 0 auto;
    display: flex;
}

.search-input {
    flex: 1;
    /* Audit SB-L1: `flex: 1` leaves min-width at `auto`, and an <input> has an
       intrinsic minimum width derived from its `size` attribute (20 characters by
       default). In a narrow sidebar the input therefore refused to shrink, the flex
       line overflowed .search-box-widget, and the submit button was pushed past the
       widget's right edge instead of sitting flush against it. min-width: 0 lets the
       input absorb the shrinkage so the button stays pinned to the right. */
    min-width: 0;
    /* main.css declares no global box-sizing reset, so min-height/padding/border were
       being added together on the content box - the input measured 62px tall and the
       button 63px. Scoped border-box keeps both at the intended 40px. */
    box-sizing: border-box;
    padding: 10px 12px 10px 34px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.15s ease;
    background-color: white;
    color: #333;
    min-height: 40px;
}

    .search-input::placeholder {
        color: #999;
    }

    .search-input:focus {
        outline: none;
        border-color: #0366d6;
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
        background-color: #fafbff;
    }

    .search-input::-webkit-search-cancel-button {
        display: none;
    }

.search-input-icon {
    position: absolute;
    left: 10px;
    /* Previously the magnifier relied on its static position inside a
       `align-items: center` flex line for vertical centring, which silently broke the
       moment the line switched to `stretch`. Centre it explicitly so it no longer
       depends on how the sibling flex items are aligned. */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #999;
    pointer-events: none;
}

    .search-input-icon svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.search-input:focus ~ .search-input-icon {
    color: #0366d6;
}

.search-button {
    /* Audit SB-L2: this was `display: revert`, which resolves to the user-agent
       default for <button> (inline-block). That silently disabled every flex
       declaration below it - align-items, justify-content and gap were all inert, so
       the label and the arrow icon aligned on the text baseline (icon sitting low)
       and were separated by collapsed source whitespace rather than the 6px gap. */
    display: inline-flex;
    /* Sizing against the input is handled by the wrapper .search-button-group on the
       .search-controls row; the button just fills the wrapper. */
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-bg-white);
    /* Audit SB-L3: only border-bottom was declared, so the top/left/right sides kept
       the user-agent's default button border. Those extra edges added ~4px of height
       and width the input does not have, so the two controls could never line up. */
    border: 0;
    border-bottom: 3px solid var(--color-primary-dark);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    min-height: 40px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

    .search-button:hover {
        background: linear-gradient(135deg, #024ba7 0%, #01368a 100%);
        box-shadow: 0 4px 12px rgba(3, 102, 214, 0.3);
    }

    .search-button:active {
        box-shadow: 0 2px 6px rgba(3, 102, 214, 0.2);
    }

    .search-button:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.25);
    }

    .search-button:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

.search-button-text {
    display: inline-block;
}

.search-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

    .search-button-icon svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
/* Search Options (Checkbox) */
.search-options {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    /* Audit SB-L4: .search-checkbox is `position: absolute` but had no positioned
       ancestor, so the visually-hidden native input was laid out against the initial
       containing block instead of this label. Tabbing to it scrolled the page to an
       unrelated offset. Establishing a containing block here keeps it on the label. */
    position: relative;
    user-select: none;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    transition: color 0.15s ease;
}

    .search-checkbox-label:hover {
        color: #0366d6;
    }

.search-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
}

.checkbox-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    background-color: white;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

    .checkbox-custom::after {
        content: '';
        display: none;
        width: 10px;
        height: 6px;
        border-left: 2px solid white;
        border-bottom: 2px solid white;
        transform: rotate(-45deg);
    }

.search-checkbox:checked ~ .checkbox-custom {
    background-color: #0366d6;
    border-color: #0366d6;
}

    .search-checkbox:checked ~ .checkbox-custom::after {
        display: block;
    }

.search-checkbox:focus ~ .checkbox-custom {
    box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.2);
}

.checkbox-label-text {
    display: inline-block;
}
/* Responsive Design */
@media (max-width: 768px) {
    .search-box-widget {
        margin-bottom: 16px;
        padding: 12px;
    }

    .search-form {
        gap: 10px;
    }

    .search-input {
        font-size: 16px;
        padding: 10px 12px 10px 34px;
        min-height: 44px;
    }

    .search-button {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 12px;
    }

    .search-checkbox-label {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .search-box-widget {
        padding: 10px;
    }

    .search-controls {
        gap: 6px;
    }

    .search-input {
        padding: 10px 10px 10px 32px;
        min-height: 40px;
        font-size: 14px;
    }

    .search-input-icon {
        left: 8px;
        width: 14px;
        height: 14px;
    }

    .search-button {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 11px;
        gap: 4px;
    }

    .search-button-text {
        display: none;
    }

    .search-button-icon {
        width: 14px;
        height: 14px;
    }

    .search-checkbox-label {
        font-size: 11px;
    }

    .checkbox-custom {
        width: 16px;
        height: 16px;
    }

        .checkbox-custom::after {
            width: 8px;
            height: 5px;
            border-left: 1.5px solid white;
            border-bottom: 1.5px solid white;
        }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .search-box-widget,
    .search-input,
    .search-button,
    .checkbox-custom {
        transition: none;
    }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .search-box-widget {
        background: linear-gradient(135deg, #2d333b 0%, #22272e 100%);
        border-color: #444c56;
    }

    .search-input {
        background-color: #0d1117;
        border-color: #30363d;
        color: #c9d1d9;
    }

        .search-input::placeholder {
            color: #6e7681;
        }

        .search-input:focus {
            border-color: #58a6ff;
            background-color: #161b22;
            box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
        }

    .search-input-icon {
        color: #6e7681;
    }

    .search-input:focus ~ .search-input-icon {
        color: #58a6ff;
    }

    .search-button {
        background: linear-gradient(135deg, #58a6ff 0%, #1f6feb 100%);
    }

        .search-button:hover {
            background: linear-gradient(135deg, #1f6feb 0%, #1552c4 100%);
            box-shadow: 0 4px 12px rgba(88, 166, 255, 0.25);
        }

        .search-button:focus {
            box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2);
        }

    .search-checkbox-label {
        color: #c9d1d9;
    }

        .search-checkbox-label:hover {
            color: #58a6ff;
        }

    .checkbox-custom {
        background-color: #0d1117;
        border-color: #30363d;
    }

    .search-checkbox:checked ~ .checkbox-custom {
        background-color: #58a6ff;
        border-color: #58a6ff;
    }

    .search-checkbox:focus ~ .checkbox-custom {
        box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
    }
}
/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
/* ==============================================================================
   TagCloud
   ============================================================================== */
/* Shell, header, heading, count and badge come from the shared primitives; only the violet accent
   and the cloud itself remain here.

   `.tag-cloud-container` below is deliberately NOT merged into `.sidebar-widget-body`. It shares
   `flex: 1` with the body primitive and nothing else: the body is a scrolling `padding: 8px 0`
   column wrapping a <ul>, whereas this is a `padding: 16px` box that centres its single child
   both ways and reserves `min-height: 120px` so a short cloud does not collapse the card. Merging
   it would have removed the centring and given the cloud a scrollbar.

   Note on the count classes: `.tag-count`/`.tag-count-badge` are the header's total-tags badge and
   are replaced by the primitives, but `.tag-count-badge-small` further down is a different thing
   entirely - the little per-tag post-count circle inside each pill - and stays. The two names sat
   nine lines apart and differ only by a suffix, which is worth knowing before deleting either. */
.tag-cloud-widget {
    --widget-accent: #8b5cf6;
    --widget-accent-dark: #7c3aed;
    --widget-accent-border: #6d28d9;
}

.tag-cloud-container {
    flex: 1;
    padding: 16px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    color: #0366d6;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    line-height: 1;
}

    .tag-item:hover {
        background-color: #f0f8ff;
        border-color: #8b5cf6;
        color: #6d28d9;
        box-shadow: 0 2px 6px rgba(139, 92, 246, 0.2);
    }

    .tag-item:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8b5cf6;
    }

    .tag-item:active {
        background-color: #ede9fe;
        color: #5b21b6;
    }

.tag-text {
    display: inline-block;
}
/* Tag Weight Classes */
.tag-biggest {
    font-size: 28px;
    font-weight: 700;
    padding: 8px 16px;
}

.tag-big {
    font-size: 24px;
    font-weight: 700;
    padding: 7px 14px;
}

.tag-medium {
    font-size: 18px;
    font-weight: 600;
    padding: 6px 12px;
}

.tag-small {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 10px;
}

.tag-smallest {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
}
/* Count Badge */
.tag-count-badge-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}

.tag-item:hover .tag-count-badge-small {
    background-color: #fcd34d;
    color: #78350f;
}
/* Tag Cloud Legend */
.tag-cloud-legend {
    background-color: #fafbfc;
    border-top: 1px solid #e1e4e8;
    padding: 10px 16px;
}

.legend-text {
    margin: 0;
    font-size: 11px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #8b5cf6;
    font-weight: bold;
}
/* Responsive Design */
@media (max-width: 768px) {
    .tag-cloud-container {
        padding: 12px;
        min-height: 100px;
    }

    .tag-cloud {
        gap: 6px;
    }

    .tag-item {
        padding: 5px 10px;
        font-size: 12px;
    }

    .tag-biggest {
        font-size: 22px;
        padding: 6px 12px;
    }

    .tag-big {
        font-size: 18px;
        padding: 5px 10px;
    }

    .tag-medium {
        font-size: 15px;
        padding: 5px 9px;
    }

    .tag-small {
        font-size: 12px;
        padding: 4px 8px;
    }

    .tag-smallest {
        font-size: 11px;
        padding: 3px 6px;
    }

    .tag-count-badge-small {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }

    .tag-cloud-legend {
        padding: 8px 12px;
    }

    .legend-text {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .tag-cloud-container {
        padding: 10px;
        min-height: 80px;
    }

    .tag-cloud {
        gap: 4px;
        justify-content: flex-start;
    }

    .tag-item {
        padding: 4px 8px;
    }

    .tag-biggest {
        font-size: 18px;
        padding: 5px 10px;
    }

    .tag-big {
        font-size: 15px;
        padding: 4px 8px;
    }

    .tag-medium {
        font-size: 13px;
        padding: 4px 7px;
    }

    .tag-small {
        font-size: 11px;
        padding: 3px 6px;
    }

    .tag-smallest {
        font-size: 10px;
        padding: 3px 5px;
    }

    .tag-count-badge-small {
        width: 14px;
        height: 14px;
        font-size: 8px;
    }

    .tag-cloud-legend {
        padding: 6px 10px;
    }

    .legend-text {
        font-size: 9px;
        gap: 4px;
    }

    .legend-icon {
        width: 14px;
        height: 14px;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .tag-item {
        transition: none;
    }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    /* This is the one widget that recoloured its header in dark mode rather than keeping the
       light-mode accent: it shifted the violet up a step (#a78bfa/#8b5cf6 on a #7c3aed border) so
       the gradient stays legible against the dark card. The shared header rule reads the accent
       from the custom properties, so re-declaring the three variables here reproduces that exactly
       and keeps the behaviour widget-local instead of pushing a special case into the primitive. */
    .tag-cloud-widget {
        --widget-accent: #a78bfa;
        --widget-accent-dark: #8b5cf6;
        --widget-accent-border: #7c3aed;
    }

    .tag-cloud-container {
        background-color: #0d1117;
    }

    .tag-item {
        background-color: #1c2128;
        border-color: #30363d;
        color: #58a6ff;
    }

        .tag-item:hover {
            background-color: #3d2a66;
            border-color: #a78bfa;
            color: #c4b5fd;
            box-shadow: 0 2px 6px rgba(167, 139, 250, 0.25);
        }

        .tag-item:focus {
            box-shadow: 0 0 0 2px #1c2128, 0 0 0 4px #8b5cf6;
        }

        .tag-item:active {
            background-color: #2d1b5e;
            color: #ddd6fe;
        }

    .tag-count-badge-small {
        background-color: #5a3a1a;
        color: #fbbf24;
    }

    .tag-item:hover .tag-count-badge-small {
        background-color: #78350f;
        color: #fcd34d;
    }

    .tag-cloud-legend {
        background-color: #1c2128;
        border-top-color: #30363d;
    }

    .legend-text {
        color: #8b949e;
    }

    .legend-icon {
        color: #a78bfa;
    }
}
/* Active tag styling */
.tag-item.active-tag {
    background-color: #ede9fe;
    border-color: #8b5cf6;
    color: #5b21b6;
    font-weight: 700;
}

    .tag-item.active-tag:hover {
        background-color: #ddd6fe;
    }

@media (prefers-color-scheme: dark) {
    .tag-item.active-tag {
        background-color: #4c1d95;
        border-color: #a78bfa;
        color: #e9d5ff;
        font-weight: 700;
    }

        .tag-item.active-tag:hover {
            background-color: #581c87;
        }
}
/* ==============================================================================
   TextBox
   ============================================================================== */
.textbox-widget {
    margin: 15px 0;
}

.textbox-content {
    padding: 15px;
    line-height: 1.6;
}

    .textbox-content img {
        max-width: 100%;
        height: auto;
    }

    .textbox-content a {
        color: #007bff;
        text-decoration: none;
    }

        .textbox-content a:hover {
            text-decoration: underline;
        }

.textbox-empty {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 4px;
    text-align: center;
}

.textbox-admin-controls {
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
    text-align: right;
    border-top: 1px solid #dee2e6;
}

.visual-editor {
    min-height: 200px;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: white;
    cursor: text;
}

.html-editor {
    font-size: 0.875rem;
    background-color: #f5f5f5;
    color: #333;
}

.preview-panel {
    margin-top: 15px;
    padding: 15px;
}

.modal-dialog {
    max-height: 90vh;
    overflow-y: auto;
}

.nav-tabs .nav-link {
    color: #666;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

    .nav-tabs .nav-link:hover {
        color: #007bff;
        border-bottom-color: #007bff;
    }

    .nav-tabs .nav-link.active {
        color: #007bff;
        background-color: transparent;
        border-bottom-color: #007bff;
    }
/* Toolbar styling for rich text editing */
.editor-toolbar {
    display: flex;
    gap: 5px;
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px 4px 0 0;
    flex-wrap: wrap;
}

    .editor-toolbar button {
        padding: 5px 10px;
        font-size: 0.875rem;
        border: 1px solid #dee2e6;
        background-color: white;
        cursor: pointer;
        border-radius: 3px;
        transition: all 0.2s;
    }

        .editor-toolbar button:hover {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px;
    }

    .visual-editor {
        min-height: 150px;
    }

    .html-editor {
        font-size: 0.8rem;
    }
}
/* ==============================================================================
   Twitter
   ============================================================================== */
/* Shell, header and heading come from the shared primitives; only the Twitter blue accent, the
   logo row and everything below the header remain here.

   Three things about this widget differed from the others and are worth recording:

   1. Its header carried only four declarations - background, colour, padding and border - where
      every sibling header also had `display: flex; justify-content: space-between;
      align-items: center; gap: 12px`. The reason is simply that this is the one widget with no
      count badge, so there was never a second child to space against. Adopting
      `.sidebar-widget-header` therefore adds the flex row. With a single child that is a no-op:
      the h3 is the only flex item, `space-between` has nothing to distribute, and the header keeps
      the same height and padding.

   2. Its title substituted `display: flex; align-items: center; gap: 8px` for the primitive's
      `flex: 1`, because unlike every other widget's heading this one is not plain text - it wraps
      an inline `.twitter-logo` SVG beside the word "Twitter". That layout has to survive the
      merge, so it is re-applied below as a widget-scoped override rather than being pushed into
      the primitive, where it would have added a stray flex context to twelve headings that
      contain nothing but a text node. The override adds to `flex: 1` rather than replacing it,
      and `flex: 1` changes nothing visible here: the h3 now stretches to the full header width
      instead of shrinking to its content, but its own contents stay left-aligned, which is where
      they already were.

   3. `.twitter-container` below is NOT the body primitive and is deliberately left alone, for the
      same reason as `.related-posts-container` and `.tag-cloud-container`. The body primitive is a
      scrolling `padding: 8px 0` column wrapping a list; this is a `padding: 20px 16px` box that
      centres a follow button on both axes. Merging it would have removed the centring and given
      the button a scrollbar. */
.twitter-widget {
    --widget-accent: #1da1f2;
    --widget-accent-dark: #1a91da;
    --widget-accent-border: #1570c2;
}

    /* See note 2 above - this seats the logo next to the title text. */
    .twitter-widget .sidebar-widget-heading {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.twitter-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.twitter-container {
    flex: 1;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
}
/* Follow Button */
.follow-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #1da1f2 0%, #1a91da 100%);
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 44px;
    box-shadow: 0 2px 8px rgba(29, 161, 242, 0.2);
}

    .follow-button:hover {
        background: linear-gradient(135deg, #1a91da 0%, #1570c2 100%);
        box-shadow: 0 4px 12px rgba(29, 161, 242, 0.3);
        transform: translateY(-2px);
    }

    .follow-button:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(29, 161, 242, 0.2);
    }

    .follow-button:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(29, 161, 242, 0.3);
    }

.follow-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

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

.twitter-handle {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
    display: inline-block;
}
/* Twitter Info */
.twitter-info {
    text-align: center;
}

.handle-display {
    margin: 0;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.handle-label {
    font-weight: 600;
    color: #333;
}

.handle-value {
    color: #1da1f2;
    font-weight: 500;
    font-family: monospace;
}
/* A "Twitter Timeline Embed" pair - `.twitter-timeline-container` and `.twitter-timeline` - used
   to sit here. Neither name was emitted by any view, script or controller in the project: they
   were the styling for the embedded-timeline block that audit TW12 deleted from the view, and
   they outlived it. Removed along with the dark-mode override that also referenced the container.
   Nothing else on the page can style a `.twitter-timeline`, so this is a pure deletion. */
/* Twitter Footer */
.twitter-footer {
    background-color: #fafbfc;
    border-top: 1px solid #e1e4e8;
    padding: 12px 16px;
}

.twitter-tip {
    margin: 0;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .twitter-tip svg {
        flex-shrink: 0;
        color: #1da1f2;
    }
/* Responsive Design */
@media (max-width: 768px) {
    /* The widget's own `margin-bottom`, the header's `padding` and the title's `font-size` at this
       breakpoint were identical to the shared primitives' values and are gone with them. Only the
       tightened logo gap is specific to this widget. */
    .twitter-widget .sidebar-widget-heading {
        gap: 6px;
    }

    .twitter-logo {
        width: 18px;
        height: 18px;
    }

    .twitter-container {
        padding: 16px 12px;
        gap: 12px;
    }

    .follow-button {
        padding: 10px 16px;
        font-size: 13px;
        min-height: 40px;
    }

    .follow-icon {
        width: 14px;
        height: 14px;
    }

    .handle-display {
        font-size: 11px;
    }

    .twitter-footer {
        padding: 10px 12px;
    }

    .twitter-tip {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    /* As above: header padding and title size match the primitives at this breakpoint, so only the
       logo gap is kept. */
    .twitter-widget .sidebar-widget-heading {
        gap: 6px;
    }

    .twitter-logo {
        width: 16px;
        height: 16px;
    }

    .twitter-container {
        padding: 12px 10px;
        gap: 10px;
    }

    .follow-button {
        width: 100%;
        padding: 12px 14px;
        font-size: 13px;
        gap: 6px;
    }

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

    .twitter-handle {
        display: none;
    }

    .follow-icon {
        width: 14px;
        height: 14px;
    }

    .handle-display {
        flex-direction: column;
        gap: 3px;
        font-size: 10px;
    }

    .twitter-footer {
        padding: 8px 10px;
    }

    .twitter-tip {
        font-size: 10px;
        gap: 4px;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    /* `.twitter-widget` was in this group for its shell transition, which the primitive now owns
       and already suppresses here. The follow button's own transition still needs suppressing. */
    .follow-button {
        transition: none;
    }

        .follow-button:hover {
            transform: none;
        }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    /* The shell recolour here was identical to the shared one, and the header rule simply repeated
       the light-mode gradient - i.e. it was asserting "do not change in dark mode", which is what
       the primitive does anyway since the dark block never touches the header. Both are gone.
       Unlike TagCloud, this widget does not need the accent variables re-declared. */
    .twitter-container {
        background-color: #0d1117;
    }

    .follow-button {
        background: linear-gradient(135deg, #1da1f2 0%, #1a91da 100%);
        box-shadow: 0 2px 8px rgba(29, 161, 242, 0.25);
    }

        .follow-button:hover {
            background: linear-gradient(135deg, #1a91da 0%, #1570c2 100%);
            box-shadow: 0 4px 12px rgba(29, 161, 242, 0.35);
        }

        .follow-button:focus {
            box-shadow: 0 0 0 3px rgba(29, 161, 242, 0.35);
        }

    .handle-display {
        color: #8b949e;
    }

    .handle-label {
        color: #c9d1d9;
    }

    .handle-value {
        color: #58a6ff;
    }

    .twitter-footer {
        background-color: #1c2128;
        border-top-color: #30363d;
    }

    .twitter-tip {
        color: #8b949e;
    }

        .twitter-tip svg {
            color: #58a6ff;
        }
}
/* ==============================================================================
   VisitorInfo
   ============================================================================== */
/* Shell, header and heading come from the shared primitives; the green accent, the entrance
   animation and everything below the header remain here.

   Three notes:

   1. This shell was identical to the shared one except for two things - it was missing the
      `display: flex; flex-direction: column` pair (as RelatedPosts also was) and it carried an
      extra `animation: slideInUp`. The flex pair is gained from the primitive and is a no-op
      here for the same reason as RelatedPosts: the widget has exactly one child,
      `.visitor-info-container`, and a lone block child of a column flex container lays out as it
      did in normal flow. The animation is genuinely this widget's own - it is the only sidebar
      card that slides in - so it stays below rather than being pushed into the primitive.

   2. Its header, like Twitter's, had no `display: flex` row because it has no count badge, and
      its heading had no `flex: 1`. Both are gained from the primitives and are no-ops with a
      single text-only child.

   3. `.visitor-info-container` is NOT the body primitive and is left alone: it is a plain
      `padding: 16px` wrapper around a flex column of cards, not a scrolling `padding: 8px 0`
      list body, and it has its own padding overrides at both breakpoints. */
.visitor-info-widget {
    --widget-accent: #34d399;
    --widget-accent-dark: #10b981;
    --widget-accent-border: #059669;
    animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.visitor-info-container {
    padding: 16px;
}

.visitor-info-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Avatar */
.visitor-avatar-container {
    display: flex;
    justify-content: center;
}

.visitor-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #10b981;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}
/* Welcome Section */
.visitor-welcome-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.welcome-message {
    margin: 0;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.visitor-name {
    font-weight: 700;
    color: #10b981;
}
/* Comment Stats */
.comment-stats {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: #f0fdf4;
    border-radius: 16px;
    font-size: 12px;
    color: #047857;
    font-weight: 500;
    border: 1px solid #d1fae5;
}

    .stat-item svg {
        color: #10b981;
    }

.stat-label {
    display: inline-block;
}
/* Commented Post Alert */
.commented-post-alert {
    background: linear-gradient(135deg, #fef3c7 0%, #fef08a 100%);
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #92400e;
}

    .alert-header svg {
        color: #f59e0b;
    }

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

.alert-message {
    margin: 0;
    font-size: 12px;
    color: #b45309;
}

.post-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background-color: white;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    color: #d97706;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s ease;
    word-break: break-word;
}

    .post-link:hover {
        background-color: #f59e0b;
        color: white;
        border-color: #f59e0b;
    }

    .post-link:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
    }

.post-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

    .post-link-icon svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* Audit CS1: this rule was written for the "you have new replies on…" link inside the
   VisitorInfo widget, but it was published unscoped as a bare `.post-title`. That class
   is the theme's post-heading class — Index.cshtml:43, _PostListItem.cshtml:46,
   PostView.cshtml:19 and Post.cshtml:97,110 all emit it — so the widget was restyling
   headings all over the site. On the single-post page the headline itself survived only
   because `.post .post-title` (line ~301) is more specific; the post-navigation block
   `<div class="post-title">` (Post.cshtml:97) sits OUTSIDE `article.post` and so had no
   such protection. It inherited flex:1 + white-space:nowrap + ellipsis and truncated the
   prev/next titles to a single clipped line. Scoped to the anchor it was written for. */
.post-link .post-title {
    display: inline-block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Visitor Info Footer */
.visitor-info-footer {
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.footer-text {
    margin: 0;
    font-size: 11px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: #10b981;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 10px;
}
/* Responsive Design */
@media (max-width: 768px) {
    /* The widget's `margin-bottom`, the header's `padding` and the title's `font-size` at this
       breakpoint matched the shared primitives' values and are gone with them. */
    .visitor-info-container {
        padding: 12px;
    }

    .visitor-avatar {
        width: 50px;
        height: 50px;
    }

    .welcome-message {
        font-size: 13px;
    }

    .stat-item {
        font-size: 11px;
        padding: 5px 10px;
    }

    .commented-post-alert {
        padding: 10px;
    }

    .post-link {
        font-size: 11px;
        padding: 5px 8px;
    }

    .footer-text {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    /* As above: header padding and title size are the primitives' job now. */
    .visitor-info-container {
        padding: 10px;
    }

    .visitor-avatar {
        width: 45px;
        height: 45px;
    }

    .welcome-message {
        font-size: 12px;
    }

    .stat-item {
        font-size: 10px;
        padding: 4px 8px;
    }

        .stat-item svg {
            width: 12px;
            height: 12px;
        }

    .commented-post-alert {
        padding: 8px;
    }

    .alert-header {
        gap: 4px;
        font-size: 12px;
    }

        .alert-header svg {
            width: 14px;
            height: 14px;
        }

    .alert-message {
        font-size: 11px;
    }

    .post-link {
        width: 100%;
        justify-content: center;
        font-size: 10px;
        padding: 6px 8px;
    }

        /* Audit CS1: scoped with its base rule above. */
        .post-link .post-title {
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            text-align: center;
        }

    .footer-text {
        font-size: 9px;
    }

    .footer-icon {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    /* The slide-in is this widget's own, so suppressing it stays here. The shell transition it
       used to list alongside `.post-link` now belongs to the primitive, which already suppresses
       it in this block. */
    .visitor-info-widget {
        animation: none;
    }

    .post-link {
        transition: none;
    }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    /* The shell recolour was identical to the shared one and the header rule only restated the
       light-mode gradient, which is what the primitive does by leaving the header alone. Both
       removed. */
    .visitor-info-container {
        background-color: #0d1117;
    }

    .welcome-message {
        color: #c9d1d9;
    }

    .visitor-name {
        color: #58ff99;
    }

    .stat-item {
        background-color: #0f3d2b;
        border-color: #1a4d3a;
        color: #58ff99;
    }

        .stat-item svg {
            color: #34d399;
        }

    .commented-post-alert {
        background: linear-gradient(135deg, #4a3a0a 0%, #3d2f08 100%);
        border-color: #6b5a0f;
    }

    .alert-header {
        color: #fcd34d;
    }

        .alert-header svg {
            color: #fbbf24;
        }

    .alert-message {
        color: #e8b84b;
    }

    .post-link {
        background-color: #1c2128;
        border-color: #6b5a0f;
        color: #fbbf24;
    }

        .post-link:hover {
            background-color: #f59e0b;
            color: #0d1117;
            border-color: #f59e0b;
        }

        .post-link:focus {
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
        }

    .visitor-info-footer {
        border-top-color: #30363d;
    }

    .footer-text {
        color: #8b949e;
    }

    .footer-icon {
        background-color: #10b981;
        color: white;
    }

    .visitor-avatar {
        border-color: #34d399;
        box-shadow: 0 2px 8px rgba(52, 211, 153, 0.25);
    }
}
/* ==============================================================================
   WidgetZone
   ============================================================================== */
.widget-zone {
    margin: 20px 0;
}

.widget-zone-admin-toolbar {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid #007bff;
}

.widget-zone-container {
    display: grid;
    gap: 20px;
}

.widget-container {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

    .widget-container:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

.widget-header {
    background-color: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    flex: 1;
}

.widget-actions {
    display: flex;
    gap: 5px;
}

.edit-widget,
.remove-widget {
    padding: 0.25rem 0.5rem;
}

.widget-content {
    padding: 20px;
    min-height: 100px;
}

    .widget-content .alert {
        margin: 0;
    }
/* Responsive Design */
@media (max-width: 768px) {
    .widget-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .widget-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .widget-title {
        font-size: 16px;
    }
}
/*[32.post-comment-section]
   Audit CS3: the comment section on the single-post page (Post.cshtml:206-373) had no
   styling of its own. Sections 04.comment-item and 05.comment-form do not apply to it:
   every selector there is scoped to .comment-item / .comment-form / #commentlist, which
   are the WebForms-era class names still emitted only by Custom/Controls/CommentView
   .cshtml and CommentForm.cshtml. The migrated view emits .comment-section, .comment,
   .comment-header, .comment-body, .comment-date, .commentForm and the txt- and lbl-
   classes, none of which those sections match. The result was an unstyled block sitting
   directly on the page background beneath the boxed post — no card, no padding, comments
   running together with nothing to separate one from the next, and a form whose inputs
   fell back to the browser defaults.

   The rules below reuse the same tokens as .post / .page-global so the discussion reads
   as a continuation of the article rather than a differently-designed component. */
.comment-section {
    background-color: var(--color-bg-white);
    padding: 2% 4% 4%;
    margin-bottom: 20px;
    border-radius: var(--widget-radius);
    box-shadow: var(--widget-shadow);
}
    /* Matches .page-global-title so the "Comments (N)" heading lines up with the post's own
   h2 rule (line ~279) instead of being a bare h3. */
    .comment-section > h3 {
        border-bottom: 1px solid var(--color-border-light);
        margin: 15px 0 20px;
        padding-bottom: 15px;
        font-weight: bold;
        font-size: 20px;
    }

    .comment-section .no-comments {
        color: var(--color-text-muted);
        font-size: 16px;
        margin-bottom: 0;
    }
    /* Comment list.
   The separator is a bottom border rather than a card-per-comment, matching the flat
   list style the sidebar widgets use; :last-child drops it so the list does not end on
   a rule immediately above the container padding. */
    .comment-section .comment {
        padding: 15px 0;
        border-bottom: 1px solid var(--color-border-light);
    }

        .comment-section .comment:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

    .comment-section .comment-header {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 8px;
    }

        .comment-section .comment-header strong {
            font-size: 16px;
            font-weight: 700;
            color: var(--color-text-dark);
        }

            .comment-section .comment-header strong a {
                color: var(--color-text-dark);
                text-decoration: none;
            }

                .comment-section .comment-header strong a:hover {
                    color: var(--color-primary);
                    text-decoration: underline;
                }
    /* .post-meta's colour/size, so a comment's byline reads as the same class of metadata
   as the article's own. */
    .comment-section .comment-date {
        font-size: 14px;
        color: var(--color-text-light);
    }
    /* One step down from .post .post-body (18px) — the article stays dominant. */
    .comment-section .comment-body {
        font-size: 16px;
        line-height: 1.8;
        color: var(--color-text-body);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

        .comment-section .comment-body p:last-child {
            margin-bottom: 0;
        }
    /* Status messages from the POST-redirect-GET in HomeController.AddComment. */
    .comment-section .comment-status {
        padding: 12px 15px;
        border-radius: 4px;
        margin-bottom: 15px;
        font-size: 16px;
    }

    .comment-section .comment-status-success {
        background-color: var(--color-self-bg);
        border: 1px solid var(--color-self-border);
        color: var(--color-self-heading);
    }

    .comment-section .comment-status-error {
        background-color: #fdecea;
        border: 1px solid var(--color-danger);
        color: var(--color-danger);
    }

    .comment-section .lbl-CommentsDisabled {
        color: var(--color-text-muted);
        font-style: italic;
        margin: 0;
    }
    /* Comment form.
   Audit CS4: the form markup uses .row-fluid (Post.cshtml:253), which is a Bootstrap 2
   class — this theme ships Bootstrap 3, where it was replaced by .row and does not exist
   in bootstrap.min.css at all. The two .col-lg-* children were therefore floated by
   Bootstrap with no clearing row around them, so the block collapsed to zero height and
   the following content rode up over the form. Rather than change the view's markup, the
   class is given the flex-row behaviour it is asking for; that also clears the floats. */
    .comment-section .commentForm {
        border-top: 1px solid var(--color-border-light);
        margin-top: 25px;
        padding-top: 10px;
    }

        .comment-section .commentForm .row-fluid {
            display: flex;
            flex-wrap: wrap;
            margin-left: -15px;
            margin-right: -15px;
        }

        .comment-section .commentForm p {
            margin-bottom: 12px;
        }

        .comment-section .commentForm label {
            display: block;
            font-weight: 600;
            font-size: 14px;
            color: var(--color-text-body);
            margin-bottom: 4px;
        }
        /* Bootstrap 3 styles inputs only through .form-control, which this form does not use;
   without these the fields render at browser-default width and sit misaligned beside
   the textarea. */
        .comment-section .commentForm .txt-content,
        .comment-section .commentForm .txt-user,
        .comment-section .commentForm .txt-email,
        .comment-section .commentForm .txt-website,
        .comment-section .commentForm .txt-country {
            display: block;
            width: 100%;
            padding: 8px 10px;
            font-size: 16px;
            line-height: 1.6;
            color: var(--color-text-body);
            background-color: var(--color-bg-white);
            border: 1px solid var(--color-border-medium);
            border-radius: 4px;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }

            .comment-section .commentForm .txt-content:focus,
            .comment-section .commentForm .txt-user:focus,
            .comment-section .commentForm .txt-email:focus,
            .comment-section .commentForm .txt-website:focus,
            .comment-section .commentForm .txt-country:focus {
                outline: none;
                border-color: var(--color-primary);
                box-shadow: 0 0 0 3px rgba(6, 129, 234, 0.15);
            }
        /* The cols/rows attributes on the textarea are overridden by width:100% above; a min
   height keeps it the tall field those attributes intended. */
        .comment-section .commentForm .txt-content {
            min-height: 160px;
            resize: vertical;
        }
        /* Matches .btn-more / .btn-primary (line ~133) so the submit button is the same control
   as every other primary action in the theme. */
        .comment-section .commentForm .btn-save {
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 400;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            color: var(--color-bg-white);
            border: none;
            border-bottom: 3px solid var(--color-primary-dark);
            border-radius: 4px;
            cursor: pointer;
            transition: filter 0.15s ease;
        }

            .comment-section .commentForm .btn-save:hover {
                filter: brightness(1.1);
            }

            .comment-section .commentForm .btn-save:focus-visible {
                outline: 2px solid var(--color-primary-dark);
                outline-offset: 2px;
            }
        /* The notify checkbox and its label carry inline styles in the view for width/float;
   this only supplies the alignment those inline rules assume. */
        .comment-section .commentForm .cmnt-frm-notify {
            vertical-align: middle;
            margin: 0;
        }

        .comment-section .commentForm #addcomment {
            font-size: 18px;
            margin: 20px 0 15px;
        }
/* Disqus container — given the same card treatment so the two moderation modes present
   identically. */
#disqus_box {
    background-color: var(--color-bg-white);
    padding: 2% 4% 4%;
    margin-bottom: 20px;
    border-radius: var(--widget-radius);
    box-shadow: var(--widget-shadow);
}

.dsq-brlink {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    color: var(--color-text-light);
}
/* Responsive Design.
   Breakpoints match responsive.css, which stacks .col-lg-* at 991px and tightens .post
   padding at 576px; the form follows the same two steps so it never sits at a width the
   surrounding post card is not also using. */
@media (max-width: 991px) {
    .comment-section .commentForm .row-fluid {
        display: block;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 576px) {
    .comment-section {
        padding: 15px;
    }

    #disqus_box {
        padding: 15px;
    }

    .comment-section > h3 {
        font-size: 18px;
    }

    .comment-section .comment-header {
        gap: 4px;
        flex-direction: column;
        align-items: flex-start;
    }

    .comment-section .comment-body {
        font-size: 15px;
    }

    .comment-section .commentForm .btn-save {
        width: 100%;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .comment-section .commentForm .txt-content,
    .comment-section .commentForm .txt-user,
    .comment-section .commentForm .txt-email,
    .comment-section .commentForm .txt-website,
    .comment-section .commentForm .txt-country,
    .comment-section .commentForm .btn-save {
        transition: none;
    }
}