/* =========================================================
   SHADY STATUS SIDEBAR — v1.5.4
   Frontend skin for the final Little Updates widget. Everything is scoped to
   #secondary .hsl-status-widget. The #secondary prefix is intentional:
   it outranks older global #secondary .hsl-micro-* rules without affecting
   other sidebar components.
   ========================================================= */

#secondary .hsl-status-widget {
    --hsl-test-brown: #694d49;
    --hsl-test-blush: #dea9a2;
    --hsl-test-blush-deep: #b68079;
    --hsl-test-soft: #a47d76;
    --hsl-test-border: rgba(225, 169, 165, .26);
    --hsl-test-cream: rgba(255, 252, 249, .88);

    box-sizing: border-box;
    width: 100%;
    background: color-mix(in srgb, var(--global-palette9) 97%, var(--global-palette8) 3%);
    border: 1px solid color-mix(in srgb, var(--global-palette5) 52%, transparent);
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(90, 60, 60, .035);
    color: var(--hsl-test-brown);
    font-family: var(--global-body-font-family);
}

#secondary .hsl-status-widget *,
#secondary .hsl-status-widget *::before,
#secondary .hsl-status-widget *::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   Card + heading
   --------------------------------------------------------- */

#secondary .hsl-status-widget.hsl-micro-archive {
    padding: 10px 9px 11px;
}

#secondary .hsl-status-widget .hsl-widget-heading {
    margin: 0 0 6px;
    text-align: center;
}

#secondary .hsl-status-widget .hsl-widget-heading h2 {
    margin: 0;
    color: var(--global-palette5);
    font-family: var(--global-heading-font-family);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: lowercase;
}

/* ---------------------------------------------------------
   Scroll area. Load More is ordinary content at the end of
   the feed — never sticky/pinned outside the scroll area.
   --------------------------------------------------------- */

#secondary .hsl-status-widget .hsl-micro-scroll {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 4px 3px 4px 4px;
    background: #fdf9f8;
    border: 1px solid rgba(225, 169, 165, .18);
    border-radius: 11px;
    scrollbar-width: thin;
    scrollbar-color: rgba(222, 169, 162, .68) rgba(255, 255, 255, .18);
}

#secondary .hsl-status-widget .hsl-micro-scroll::-webkit-scrollbar {
    width: 5px;
}

#secondary .hsl-status-widget .hsl-micro-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .22);
}

#secondary .hsl-status-widget .hsl-micro-scroll::-webkit-scrollbar-thumb {
    background: rgba(222, 169, 162, .78);
    border-radius: 999px;
}

/* ---------------------------------------------------------
   Status slips.
   Border/radius intentionally match Choose Your Path.
   The CATEGORY is communicated by the whole slip background;
   the tiny category pill stays cream.
   --------------------------------------------------------- */

#secondary .hsl-status-widget .hsl-micro-post {
    width: 100%;
    margin: 0 0 7px;
    padding: 5px 5px 7px;
    background: #fffefc !important;
    border: 1px solid var(--hsl-test-border);
    border-radius: 10px;
    overflow: visible;
    color: var(--hsl-test-brown);
    text-align: left;
    box-shadow: none;
}

/* Both status types share the same paper slip. Category lives in the pill. */
#secondary .hsl-status-widget .hsl-micro-post--personal,
#secondary .hsl-status-widget .hsl-micro-post--site {
    background: #fffefc !important;
}

#secondary .hsl-status-widget .hsl-micro-post:last-of-type {
    margin-bottom: 7px;
}

/* ---------------------------------------------------------
   One compact furniture row:
   pixel stamp / category / date / reaction pill
   --------------------------------------------------------- */

#secondary .hsl-status-widget .hsl-micro-post__meta {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 5px;
    width: 100%;
    min-width: 0;
    margin: 0 0 4px;
    /* Align the pixel stamp with the body-copy inset without
       stealing space from the reaction pill on the right. */
    padding: 0 0 0 5px !important;
    color: var(--hsl-test-soft);
    font-family: var(--global-body-font-family);
    line-height: 1;
}

/* Native-size pixel stamp. No avatar circle, no slot width. */
#secondary .hsl-status-widget .hsl-micro-post__art {
    display: inline-grid;
    place-items: center;
    align-self: center;
    flex: 0 0 auto;
    line-height: 0;
    margin: 0 1px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

#secondary .hsl-status-widget .hsl-micro-post__art img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: none !important;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Cream pill; type color changes, not the pill fill. */
#secondary .hsl-status-widget .hsl-micro-post__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 16px;
    height: 16px;
    padding: 1px 7px 1.5px;
    background: rgba(255, 253, 250, .92);
    border: 1px solid rgba(105, 77, 73, .10);
    border-radius: 999px;
    font-family: var(--global-body-font-family);
    font-size: 8.9px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: lowercase;
    white-space: nowrap;
}

#secondary .hsl-status-widget .hsl-micro-post__type--personal {
    background: #f9eceb;
    border-color: rgba(201, 143, 137, .52);
    color: #a86e6a;
}

#secondary .hsl-status-widget .hsl-micro-post__type--site {
    background: #f8f0e8;
    border-color: rgba(218, 164, 122, .58);
    color: #9a6d58;
}

#secondary .hsl-status-widget .hsl-micro-post time {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    height: 16px;
    margin: 0;
    color: #92756f;
    font-family: var(--global-body-font-family);
    font-size: 8.15px;
    font-style: italic;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    opacity: .94;
    transform: translateY(-0.2px);
}

/* ---------------------------------------------------------
   EXISTING HEART SYSTEM — visual override only.

   The functional selectors/data stay exactly:
   .sidebar-heart[data-tab][data-id]
   .heart-icon
   .heart-count
   .liked

   Force a single horizontal old-style pill even when older
   global .sidebar-heart/.heart-icon CSS or WP emoji styling is
   present elsewhere on the site.
   --------------------------------------------------------- */

#secondary .hsl-status-widget .hsl-micro-post .sidebar-heart.hsl-micro-like {
    position: static !important;
    inset: auto !important;

    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7.5px !important;
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 38px !important;
    max-width: none !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;

    margin: 0 0 0 auto !important;
    padding: 1px 6px !important;

    background: rgba(255, 253, 250, .62) !important;
    border: 1px solid rgba(105, 77, 73, .10) !important;
    border-radius: 999px !important;
    box-shadow: none !important;

    color: #8f7470 !important;
    font-family: "Chakra Petch", var(--global-body-font-family), sans-serif !important;
    font-size: 8px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;

    cursor: pointer;
    transform: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

#secondary .hsl-status-widget .hsl-micro-post .sidebar-heart.hsl-micro-like:hover,
#secondary .hsl-status-widget .hsl-micro-post .sidebar-heart.hsl-micro-like:focus-visible {
    position: static !important;
    background: rgba(248, 238, 235, .58) !important;
    border-color: rgba(225, 169, 165, .34) !important;
    color: #825f5c !important;
    transform: translateY(-1px);
}

#secondary .hsl-status-widget .hsl-micro-post .sidebar-heart.hsl-micro-like .heart-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 9px !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* WordPress may turn the heart glyph into an emoji IMG. Keep it inline. */
#secondary .hsl-status-widget .hsl-micro-post .sidebar-heart.hsl-micro-like .heart-icon img.emoji,
#secondary .hsl-status-widget .hsl-micro-post .sidebar-heart.hsl-micro-like > img.emoji {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

#secondary .hsl-status-widget .hsl-micro-post .sidebar-heart.hsl-micro-like .heart-count {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: 8px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

#secondary .hsl-status-widget .hsl-micro-post .sidebar-heart.hsl-micro-like.liked {
    /* Keep the reaction furniture neutral in both states. The existing
       heart system changes the heart glyph itself when liked. */
    background: rgba(255, 253, 250, .72) !important;
    border-color: rgba(201, 143, 137, .22) !important;
    color: #8d625f !important;
}

/* ---------------------------------------------------------
   Copy: intentionally darker than the furniture.
   Body gets a little more inset than the metadata row.
   --------------------------------------------------------- */

#secondary .hsl-status-widget .hsl-micro-post__text {
    min-width: 0;
    padding: 0 5px 1px;
    color: #b68079 !important;
    font-family: var(--global-body-font-family);
    font-size: 10.35px;
    font-weight: 400;
    line-height: 1.30;
    letter-spacing: .002em;
    text-align: left;
    overflow-wrap: anywhere;
}

#secondary .hsl-status-widget .hsl-micro-post__text p {
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

#secondary .hsl-status-widget .hsl-micro-post__text p + p {
    margin-top: 4px !important;
}

#secondary .hsl-status-widget .hsl-micro-post__text a,
#secondary .hsl-status-widget .hsl-micro-post__text a:visited {
    display: inline;
    margin: 0 -2px;
    padding: 0 2px;
    background: transparent;
    border-radius: 3px;
    color: #9b6965 !important;
    font-weight: 500;
    text-decoration-line: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px;
    text-decoration-color: rgba(155, 105, 101, .52) !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background .14s ease, color .14s ease;
}

#secondary .hsl-status-widget .hsl-micro-post__text a:hover,
#secondary .hsl-status-widget .hsl-micro-post__text a:focus-visible {
    background: color-mix(
        in srgb,
        var(--hsl-sidebar-blush, #dea9a2) 15%,
        transparent
    );
    color: #856666 !important;
    text-decoration: none !important;
}

/* Existing inline status GIFs/images also remain native-size. */
#secondary .hsl-status-widget .hsl-micro-post__text img {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 2px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    vertical-align: middle;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Deferred rows stay in DOM so existing heart JS can bind them. */
#secondary .hsl-status-widget .hsl-micro-post[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------
   Load More: genuinely part of scroll content. It only appears
   after the currently loaded slips, then gets pushed downward
   when another five are revealed.
   --------------------------------------------------------- */

#secondary .hsl-status-widget .hsl-micro-archive__more {
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 6px);
    min-height: 28px;
    margin: 3px 3px 1px;
    padding: 6px 9px;
    background: rgba(255, 253, 250, .86);
    border: 1px solid rgba(225, 169, 165, .34);
    border-radius: 10px;
    box-shadow: none;
    color: #9a716c;
    font-family: var(--global-body-font-family);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: lowercase;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

#secondary .hsl-status-widget .hsl-micro-archive__more:hover,
#secondary .hsl-status-widget .hsl-micro-archive__more:focus-visible {
    background: rgba(249, 238, 237, .72);
    border-color: rgba(225, 169, 165, .58);
    color: var(--hsl-test-brown);
    transform: translateY(-1px);
}

#secondary .hsl-status-widget .hsl-micro-archive__more.is-finished {
    cursor: default;
    opacity: .62;
    transform: none;
}

#secondary .hsl-status-widget .hsl-micro-empty {
    margin: 0;
    padding: 16px 8px;
    color: var(--hsl-test-soft);
    font-size: 9.5px;
    font-style: italic;
    text-align: center;
}

@media screen and (max-width: 340px) {
    #secondary .hsl-status-widget.hsl-micro-archive {
        padding-left: 9px;
        padding-right: 9px;
    }

    #secondary .hsl-status-widget .hsl-micro-post__meta {
        gap: 4px;
    }

    #secondary .hsl-status-widget .hsl-micro-post__type {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 8.4px;
    }

    #secondary .hsl-status-widget .hsl-micro-post time {
        font-size: 7.8px;
    }

    #secondary .hsl-status-widget .hsl-micro-post .sidebar-heart.hsl-micro-like {
        min-width: 38px !important;
        gap: 7px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}