/* Readable utility text in account pages, conversations and drawers.
 * Scope text only: retain icon sizes, avatar badges and editorial typography.
 * Important declarations replace utility classes and inline comment styles.
 */

/* One scrolling area keeps both articles and management usable on short screens. */
/* The footer and conversations use site colours, independent of the article type. */
#colophon.yuki-editorial-footer { padding:32px 0 20px;background:#111114;border-top:1px solid #ffffff24;color:#b7b7c0; }
.yuki-footer-heading,.yuki-footer-credits { display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1280px;margin:auto;padding:0 16px; }
.yuki-footer-brand { color:#f4f4f5;font-size:24px;font-weight:900;letter-spacing:-.035em;line-height:1.3; }
.yuki-footer-brand span { display:block;margin-top:6px;color:#b7b7c0;font-size:13px;font-weight:400;letter-spacing:normal; }
.yuki-footer-explore { display:inline-flex;align-items:center;gap:16px;min-height:44px;padding:10px 14px;border:1px solid #ffffff30;border-radius:5px;color:#eee;font-size:13px;font-weight:700; }
.yuki-footer-explore span { color:#ff3e3e; }
.yuki-footer-explore:hover { border-color:#ff3e3e;background:#ffffff05; }
#colophon .yuki-footer-widgets { margin-top:28px;margin-bottom:28px; }
#colophon .widget { background:transparent;border-radius:8px;box-shadow:none; }
#colophon :is(.widget-title,.widget h2) { color:#eee;font-size:14px;font-weight:800;letter-spacing:.03em; }
#colophon .widget a { font-size:14px;line-height:1.7; }
#colophon .yuki-footer-credits { margin-top:24px;padding-top:16px;border-top:1px solid #ffffff14;font-size:12px;line-height:1.6; }
#colophon a:focus-visible { outline:2px solid #ff3e3e;outline-offset:4px; }
#comments { --ui-accent:#ff3e3e;--ui-rgb:255,62,62;--community-accent:#ff3e3e; }
#primary #comments [class*="text-yuki-accent"] { color:#d4d4dc !important; }
#primary #comments [class*="bg-yuki-accent"] { background-color:#ff3e3e1a; }
#primary #comments [class*="border-yuki-accent"] { border-color:#ff3e3e4d; }
#primary #comments #chat-send-btn { color:#f4f4f5;background:#ff3e3e26;border-color:#ff3e3e66; }
#primary #comments #chat-send-btn:hover { background:#ff3e3e;color:#fff; }
#primary #comments #chat-error { color:#f87171; }
@media(max-width:639px) {
    .yuki-footer-heading { align-items:flex-start;flex-direction:column;gap:16px; }
    .yuki-footer-credits { flex-wrap:wrap;gap:8px 20px; }
}

/* Each bookmark carries its own post's colour, even in a mixed editorial feed. */
button.toggle-reading-list {
    --reading-accent: rgb(var(--reading-accent-rgb, 255 92 0));
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid rgb(var(--reading-accent-rgb, 255 92 0) / .45);
    border-radius: 5px;
    background: #141417;
    color: var(--reading-accent) !important;
    box-shadow: none;
}
button.toggle-reading-list:hover,
button.toggle-reading-list.is-active {
    background: rgb(var(--reading-accent-rgb, 255 92 0) / .16);
    border-color: var(--reading-accent);
    color: var(--reading-accent) !important;
    box-shadow: inset 0 -2px 0 var(--reading-accent);
}
button.toggle-reading-list > i { color: inherit !important; filter: none !important; text-shadow: none !important; }
button.toggle-reading-list:focus-visible { outline: 2px solid var(--reading-accent); outline-offset: 3px; }

#reading-list-drawer > div:first-child { flex-shrink: 0; }
#reading-list-drawer .yuki-reading-list-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 20px max(24px, env(safe-area-inset-bottom));
}
#reading-list-items { margin: 20px 0 24px; }
#reading-list-drawer .yuki-reading-list-management {
    border: 1px solid #ffffff24;
    border-radius: 5px;
    background: #ffffff04;
}
#reading-list-drawer .yuki-reading-list-management > summary {
    padding: 14px;
    color: #d4d4dc;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
}
#reading-list-drawer .yuki-reading-list-management > summary:focus-visible {
    outline: 2px solid var(--yuki-accent, #ff3e3e);
    outline-offset: 3px;
}
#reading-list-drawer .yuki-reading-list-management[open] > summary { border-bottom: 1px solid #ffffff18; }
#reading-list-drawer .yuki-reading-list-management-actions { padding: 14px; }
#reading-list-drawer .yuki-reading-list-management-actions > div + div { margin-top: 14px; }
:is(.yuki-public-profile, .yuki-account-profile, .comments-area,
    #reading-list-drawer, #combat-arena-drawer, #yuki-weekly,
    #masthead .yuki-navbar-profile)
    :is(span, p, div, label, small, a, button, h2, h3)[class*="text-[8px]"],
:is(.yuki-public-profile, .yuki-account-profile, .comments-area,
    #reading-list-drawer, #combat-arena-drawer, #yuki-weekly,
    #masthead .yuki-navbar-profile)
    :is(span, p, div, label, small, a, button, h2, h3)[class*="text-[9px]"],
:is(.yuki-public-profile, .yuki-account-profile, .comments-area,
    #reading-list-drawer, #combat-arena-drawer, #yuki-weekly,
    #masthead .yuki-navbar-profile)
    :is(span, p, div, label, small, a, button, h2, h3)[class*="text-[10px]"],
:is(.yuki-public-profile, .yuki-account-profile, .comments-area,
    #reading-list-drawer, #combat-arena-drawer, #yuki-weekly,
    #masthead .yuki-navbar-profile)
    :is(span, p, div, label, small, a, button, h2, h3)[class*="text-[11px]"] {
    font-size: 12px !important;
    line-height: 1.5 !important;
    letter-spacing: .025em !important;
}

:is(.yuki-public-profile, .yuki-account-profile) label,
.yuki-account-profile [data-profile-tab-trigger],
.yuki-public-profile a[class*="uppercase"],
#reading-list-drawer :is(button, a),
.comments-area :is(.comment-reply-link, button[type="submit"]),
#cancel-comment-reply-link,
.comment-reply-title small,
#masthead .yuki-navbar-profile > div a {
    font-size: 13px !important;
    line-height: 1.5 !important;
    letter-spacing: .025em !important;
}

.yuki-account-profile :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
    font-size: 14px !important;
    line-height: 1.5;
    letter-spacing: normal !important;
    text-transform: none;
}

/* CSS-sized text and generated content need the same floor as utility labels. */
#yuki-weekly small,
.yuki-editorial-comments > h3,
.yuki-live-comments > div > h3,
#chat-char-counter,
#chat-error {
    font-size: 12px !important;
    line-height: 1.5 !important;
    letter-spacing: .025em !important;
}