/* Knowledge Base + LMS — styled to the OC Partner Portal design system.
   Colors/radii/shadows/spacing/type all come from oc-theme.css tokens, so this
   themes for dark mode automatically; only a few [data-oc-theme="dark"] overrides
   below handle the soft tints. oc-theme.css is the only file allowed raw colors. */

.kb-page {
    padding: var(--oc-space-6) var(--oc-space-7);
    max-width: 1240px;
    margin: 0 auto;
    font-family: var(--oc-font-sans);
}

/* ---- Page header ---- */
.kb-header { margin-bottom: var(--oc-space-6); }
.kb-title {
    font-size: var(--oc-fs-h1);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--oc-gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--oc-space-3);
}
.kb-title .bi { color: var(--oc-orange); font-size: 1.1em; }
.kb-subtitle { margin: var(--oc-space-2) 0 0; font-size: var(--oc-fs-body); }

.kb-empty {
    padding: var(--oc-space-9) var(--oc-space-6);
    text-align: center;
    border: 1px dashed var(--oc-border);
    border-radius: var(--oc-radius-lg);
    background: var(--oc-surface-muted);
}

/* ---- Search bar ---- */
.kb-searchbar { display: flex; gap: var(--oc-space-3); max-width: 680px; margin: 0 0 var(--oc-space-6); }
.kb-searchbar .form-control {
    flex: 1;
    height: 46px;
    border-radius: var(--oc-radius-lg);
    border: 1px solid var(--oc-gray-300);
    padding: 0 var(--oc-space-4);
    background: var(--oc-surface);
    font-size: var(--oc-fs-body);
    transition: border-color var(--oc-dur-fast) var(--oc-ease), box-shadow var(--oc-dur-fast) var(--oc-ease);
}
.kb-searchbar .form-control:focus { outline: none; border-color: var(--oc-orange); box-shadow: var(--oc-shadow-focus); }
.kb-searchbar .btn { height: 46px; border-radius: var(--oc-radius-lg); padding-inline: var(--oc-space-5); }

/* ---- Brand-correct primary/action buttons inside KB pages ---- */
.kb-page .btn { border-radius: var(--oc-radius-md); font-weight: 600; transition: all var(--oc-dur-fast) var(--oc-ease); }
.kb-page .btn-primary { background: var(--oc-orange); border-color: var(--oc-orange); color: #fff; }
.kb-page .btn-primary:hover:not(:disabled) { background: var(--oc-orange-600); border-color: var(--oc-orange-600); }
.kb-page .btn-success { background: var(--oc-emerald-600); border-color: var(--oc-emerald-600); color: #fff; }
.kb-page .btn-light { background: var(--oc-surface); border: 1px solid var(--oc-gray-300); color: var(--oc-gray-800); }
.kb-page .btn-light:hover:not(:disabled) { background: var(--oc-gray-100); border-color: var(--oc-gray-400); }

/* ---- Card grid (spaces / courses) ---- */
.kb-space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--oc-space-5); }
.kb-space-card {
    display: flex;
    gap: var(--oc-space-4);
    align-items: flex-start;
    padding: var(--oc-space-5);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-lg);
    background: var(--oc-card-bg);
    box-shadow: var(--oc-shadow-xs);
    text-decoration: none;
    transition: transform var(--oc-dur-fast) var(--oc-ease),
                box-shadow var(--oc-dur-med) var(--oc-ease),
                border-color var(--oc-dur-fast) var(--oc-ease);
}
.kb-space-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--oc-shadow-md);
    border-color: var(--oc-orange);
}
.kb-space-icon {
    flex: none;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: var(--oc-radius-md);
    background: var(--oc-orange-50);
    color: var(--oc-orange-text);
    font-size: 1.4rem;
}
.kb-space-name { font-weight: 700; color: var(--oc-gray-900); font-size: 1.05rem; letter-spacing: -0.01em; }
.kb-space-desc { font-size: var(--oc-fs-sm); margin-top: var(--oc-space-1); line-height: var(--oc-lh-snug); }
.kb-space-count { font-size: var(--oc-fs-xs); margin-top: var(--oc-space-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

/* ---- Browse: tree sidebar + content ---- */
.kb-browse-layout { display: grid; grid-template-columns: 296px 1fr; gap: var(--oc-space-7); align-items: start; }
.kb-tree {
    position: sticky; top: var(--oc-space-4);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-lg);
    background: var(--oc-card-bg);
    box-shadow: var(--oc-shadow-sm);
    padding: var(--oc-space-4);
    max-height: calc(100vh - 2rem);
    overflow: auto;
}
.kb-tree-head { padding: var(--oc-space-1) var(--oc-space-2) var(--oc-space-3); border-bottom: 1px solid var(--oc-border); margin-bottom: var(--oc-space-3); }
.kb-tree-all { font-size: var(--oc-fs-xs); text-decoration: none; color: var(--oc-text-muted); font-weight: 600; }
.kb-tree-all:hover { color: var(--oc-orange-text); }
.kb-tree-space { font-weight: 700; color: var(--oc-gray-900); margin-top: var(--oc-space-2); display: flex; align-items: center; gap: var(--oc-space-2); }
.kb-tree-space .bi { color: var(--oc-orange); }
.kb-tree-list, .kb-tree-sublist { list-style: none; margin: 0; padding: 0; }
.kb-tree-sublist { padding-left: var(--oc-space-3); border-left: 1px solid var(--oc-border); margin-left: var(--oc-space-3); }
.kb-tree-link {
    display: flex; align-items: center; gap: var(--oc-space-2);
    padding: var(--oc-space-2) var(--oc-space-3);
    border-radius: var(--oc-radius-md);
    color: var(--oc-gray-800); text-decoration: none;
    font-size: var(--oc-fs-sm); font-weight: 500;
    border-left: 2px solid transparent;
    transition: background var(--oc-dur-fast) var(--oc-ease), color var(--oc-dur-fast) var(--oc-ease);
}
.kb-tree-link:hover { background: var(--oc-surface-hover); color: var(--oc-gray-900); }
.kb-tree-link.kb-active { background: var(--oc-orange-50); color: var(--oc-orange-text); font-weight: 700; border-left-color: var(--oc-orange); }
.kb-tree-link .bi { color: var(--oc-text-muted); }
.kb-tree-link.kb-active .bi { color: var(--oc-orange); }
.kb-count { margin-left: auto; font-size: var(--oc-fs-xs); color: var(--oc-text-muted); font-weight: 600; }

.kb-content { min-width: 0; }
.kb-content-title { font-size: var(--oc-fs-h2); font-weight: 700; letter-spacing: -0.01em; color: var(--oc-gray-900); margin: 0 0 var(--oc-space-4); }
.kb-breadcrumb { font-size: var(--oc-fs-sm); margin-bottom: var(--oc-space-2); display: flex; flex-wrap: wrap; gap: var(--oc-space-1); align-items: center; }
.kb-breadcrumb a { color: var(--oc-text-muted); text-decoration: none; }
.kb-breadcrumb a:hover { color: var(--oc-orange-text); }

/* ---- Article lists ---- */
.kb-article-list { list-style: none; margin: 0; padding: 0; }
.kb-article-row { padding: var(--oc-space-4) 0; border-bottom: 1px solid var(--oc-border); }
.kb-article-row:first-child { padding-top: 0; }
.kb-article-link { display: flex; align-items: center; gap: var(--oc-space-2); text-decoration: none; color: var(--oc-gray-900); font-weight: 600; }
.kb-article-name { transition: color var(--oc-dur-fast) var(--oc-ease); }
.kb-article-link:hover .kb-article-name { color: var(--oc-orange-text); }
.kb-article-summary { font-size: var(--oc-fs-sm); margin-top: var(--oc-space-1); line-height: var(--oc-lh-snug); }

.kb-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--oc-fs-xs); padding: 2px 10px;
    border-radius: var(--oc-radius-pill); font-weight: 600;
    background: var(--oc-neutral-bg); color: var(--oc-neutral-text);
    letter-spacing: 0.01em;
}

/* ---- Article reader ---- */
.kb-article-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: var(--oc-space-8); align-items: start; }
.kb-article-main { min-width: 0; }
.kb-article-titlebar { display: flex; align-items: center; gap: var(--oc-space-3); flex-wrap: wrap; margin-top: var(--oc-space-2); }
.kb-article-title { font-size: var(--oc-fs-display); font-weight: 800; letter-spacing: -0.025em; line-height: var(--oc-lh-tight); color: var(--oc-gray-900); margin: 0; }
.kb-article-lede { font-size: 1.12rem; line-height: var(--oc-lh-normal); margin: var(--oc-space-3) 0 var(--oc-space-6); }

.kb-article-body { color: var(--oc-gray-800); line-height: 1.7; font-size: 1.02rem; }
.kb-article-body > *:first-child { margin-top: 0; }
.kb-article-body h1, .kb-article-body h2, .kb-article-body h3, .kb-article-body h4 {
    color: var(--oc-gray-900); font-weight: 700; letter-spacing: -0.015em;
    margin-top: var(--oc-space-7); margin-bottom: var(--oc-space-3); line-height: var(--oc-lh-snug);
}
.kb-article-body h1 { font-size: 1.6rem; }
.kb-article-body h2 { font-size: 1.35rem; padding-bottom: var(--oc-space-2); border-bottom: 1px solid var(--oc-border); }
.kb-article-body h3 { font-size: 1.15rem; }
.kb-article-body p { margin: 0 0 var(--oc-space-4); }
.kb-article-body ul, .kb-article-body ol { margin: 0 0 var(--oc-space-4); padding-left: var(--oc-space-6); }
.kb-article-body li { margin-bottom: var(--oc-space-2); }
.kb-article-body a { color: var(--oc-orange-text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--oc-dur-fast) var(--oc-ease); }
.kb-article-body a:hover { border-bottom-color: var(--oc-orange-text); }
.kb-article-body code { background: var(--oc-surface-2); padding: 0.12em 0.4em; border-radius: var(--oc-radius-xs); font-family: var(--oc-font-mono); font-size: 0.88em; }
/* --oc-black / --oc-white are constant tokens (don't flip) → code block stays
   near-black with light text in both light and dark mode. */
.kb-article-body pre { background: var(--oc-black); color: var(--oc-white); padding: var(--oc-space-4); border-radius: var(--oc-radius-md); overflow: auto; box-shadow: var(--oc-shadow-sm); }
.kb-article-body pre code { background: none; color: inherit; padding: 0; }
.kb-article-body blockquote { margin: 0 0 var(--oc-space-4); padding: var(--oc-space-2) var(--oc-space-4); border-left: 3px solid var(--oc-orange); background: var(--oc-orange-50); border-radius: 0 var(--oc-radius-sm) var(--oc-radius-sm) 0; color: var(--oc-gray-700); }
.kb-article-body table { border-collapse: collapse; width: 100%; margin: 0 0 var(--oc-space-4); font-size: var(--oc-fs-sm); }
.kb-article-body th, .kb-article-body td { border: 1px solid var(--oc-border); padding: var(--oc-space-2) var(--oc-space-3); text-align: left; }
.kb-article-body th { background: var(--oc-surface-2); font-weight: 600; }
.kb-article-body img { max-width: 100%; border-radius: var(--oc-radius-md); box-shadow: var(--oc-shadow-sm); }
.kb-article-body hr { border: 0; border-top: 1px solid var(--oc-border); margin: var(--oc-space-6) 0; }
.kb-tagrow { margin-top: var(--oc-space-7); padding-top: var(--oc-space-4); border-top: 1px solid var(--oc-border); display: flex; flex-wrap: wrap; gap: var(--oc-space-2); }

.kb-article-rail { position: sticky; top: var(--oc-space-4); display: flex; flex-direction: column; gap: var(--oc-space-4); }
.kb-rail-group { border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); background: var(--oc-card-bg); box-shadow: var(--oc-shadow-xs); padding: var(--oc-space-4) var(--oc-space-5); }
.kb-rail-title { font-size: var(--oc-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--oc-text-muted); margin: 0 0 var(--oc-space-3); font-weight: 700; }
.kb-rail-list { list-style: none; margin: 0; padding: 0; }
.kb-rail-list li { padding: var(--oc-space-1) 0; }
.kb-rail-list a { color: var(--oc-gray-800); text-decoration: none; font-size: var(--oc-fs-sm); font-weight: 500; display: block; padding: var(--oc-space-1) 0; transition: color var(--oc-dur-fast) var(--oc-ease); }
.kb-rail-list a:hover { color: var(--oc-orange-text); }

/* ---- Authoring (edit + manage) ---- */
.kb-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--oc-space-6); align-items: start; }
.kb-edit-form { display: flex; flex-direction: column; gap: var(--oc-space-4); }
.kb-field { display: flex; flex-direction: column; gap: var(--oc-space-2); }
.kb-field > span { font-size: var(--oc-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--oc-text-muted); }
.kb-field .form-control, .kb-field .form-select { border-radius: var(--oc-radius-md); border: 1px solid var(--oc-gray-300); }
.kb-field .form-control:focus, .kb-field .form-select:focus { border-color: var(--oc-orange); box-shadow: var(--oc-shadow-focus); }
.kb-field-row { display: flex; gap: var(--oc-space-4); flex-wrap: wrap; }
.kb-field-row .kb-field { flex: 1; min-width: 150px; }
.kb-editor { font-family: var(--oc-font-mono); font-size: var(--oc-fs-sm); line-height: var(--oc-lh-normal); }
.kb-edit-preview { border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); background: var(--oc-card-bg); box-shadow: var(--oc-shadow-sm); padding: var(--oc-space-5) var(--oc-space-6); position: sticky; top: var(--oc-space-4); max-height: calc(100vh - 2rem); overflow: auto; }

.kb-manage-table { width: 100%; border-collapse: collapse; }
.kb-manage-table th { text-align: left; font-size: var(--oc-fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--oc-text-muted); border-bottom: 2px solid var(--oc-border); padding: var(--oc-space-2) var(--oc-space-3); font-weight: 700; }
.kb-manage-table td { padding: var(--oc-space-3); border-bottom: 1px solid var(--oc-border); vertical-align: middle; }
.kb-manage-table tr:hover td, .kb-manage-table tbody tr:hover { background: var(--oc-surface-hover); }
.kb-manage-actions { display: flex; gap: var(--oc-space-2); justify-content: flex-end; flex-wrap: wrap; }
.kb-newcat { margin-top: var(--oc-space-4); padding-top: var(--oc-space-3); border-top: 1px solid var(--oc-border); display: flex; flex-direction: column; gap: var(--oc-space-2); }
.kb-newcat .form-control, .kb-newcat .form-select { border-radius: var(--oc-radius-sm); }

/* New-space panel on /kb/manage. Unlike .kb-newcat this sits under the page header
   rather than in the tree rail, because a space is above the tree, not inside it. */
.kb-newspace { margin-bottom: var(--oc-space-5); padding: var(--oc-space-4) var(--oc-space-5); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); background: var(--oc-card-bg); box-shadow: var(--oc-shadow-xs); }
.kb-newspace .form-control { border-radius: var(--oc-radius-sm); flex: 1 1 12rem; }

@media (max-width: 980px) {
    .kb-browse-layout, .kb-article-layout, .kb-edit-grid { grid-template-columns: 1fr; }
    .kb-tree, .kb-article-rail, .kb-edit-preview { position: static; max-height: none; }
    .kb-page { padding: var(--oc-space-5) var(--oc-space-4); }
}

/* ---- LMS ---- */
.lms-progress { height: 8px; background: var(--oc-surface-2); border-radius: var(--oc-radius-pill); overflow: hidden; margin: var(--oc-space-3) 0 var(--oc-space-1); }
.lms-progress-bar { height: 100%; background: linear-gradient(90deg, var(--oc-emerald-600), var(--oc-emerald-700)); border-radius: var(--oc-radius-pill); transition: width var(--oc-dur-slow) var(--oc-ease); }
.lms-enrollbar { display: flex; align-items: center; gap: var(--oc-space-4); margin: var(--oc-space-3) 0 var(--oc-space-7); flex-wrap: wrap; }
.lms-module { border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); background: var(--oc-card-bg); box-shadow: var(--oc-shadow-xs); padding: var(--oc-space-5) var(--oc-space-6); margin-bottom: var(--oc-space-4); }
.lms-module-title { font-size: 1.1rem; font-weight: 700; color: var(--oc-gray-900); margin: 0 0 var(--oc-space-1); letter-spacing: -0.01em; }
.lms-lesson-list { list-style: none; margin: var(--oc-space-2) 0 0; padding: 0; }
.lms-lesson-row { border-top: 1px solid var(--oc-border); }
.lms-lesson-row:first-child { border-top: none; }
.lms-lesson-link { display: flex; align-items: center; gap: var(--oc-space-3); padding: var(--oc-space-3) var(--oc-space-1); text-decoration: none; color: var(--oc-gray-800); border-radius: var(--oc-radius-sm); transition: background var(--oc-dur-fast) var(--oc-ease), color var(--oc-dur-fast) var(--oc-ease); }
.lms-lesson-link:hover { background: var(--oc-surface-hover); color: var(--oc-gray-900); padding-inline: var(--oc-space-3); }
.lms-lesson-name { flex: 1; font-weight: 500; }
.lms-lesson-state .bi { font-size: 1.1rem; }
.lms-lesson-actions { display: flex; align-items: center; gap: var(--oc-space-3); margin-top: var(--oc-space-7); flex-wrap: wrap; }
.lms-lesson-nav { display: flex; gap: var(--oc-space-2); margin-left: auto; }
.lms-question { border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); padding: var(--oc-space-4) var(--oc-space-5); margin: var(--oc-space-3) 0; background: var(--oc-card-bg); box-shadow: var(--oc-shadow-xs); }
.lms-question-prompt { font-weight: 600; color: var(--oc-gray-900); margin-bottom: var(--oc-space-3); }
.lms-option { display: flex; align-items: center; gap: var(--oc-space-2); padding: var(--oc-space-2) 0; cursor: pointer; color: var(--oc-gray-800); }
.lms-option input { accent-color: var(--oc-orange); }
.lms-q-correct { border-color: var(--oc-emerald-600); box-shadow: 0 0 0 1px var(--oc-emerald-600); }
.lms-q-wrong { border-color: var(--oc-danger); box-shadow: 0 0 0 1px var(--oc-danger); }
.lms-result { border-radius: var(--oc-radius-lg); padding: var(--oc-space-5) var(--oc-space-6); margin: var(--oc-space-4) 0; box-shadow: var(--oc-shadow-sm); }
.lms-result.lms-pass { background: var(--oc-success-bg); color: var(--oc-success-text); }
.lms-result.lms-fail { background: var(--oc-warning-bg); color: var(--oc-warning-text); }

/* ---- Dark-mode: deepen the soft orange tints so they read on dark surfaces ---- */
[data-oc-theme="dark"] .kb-tree-link.kb-active,
[data-oc-theme="dark"] .kb-space-icon { background: var(--oc-orange-100); }

/* ---- Category subscriptions ---------------------------------------------
   The bell toggle above a category's article list, the author-only subscriber
   roster, and the public unsubscribe landing page. Tokens only, so both themes
   follow the rest of the KB. */

.kb-subscribe { margin: 0 0 var(--oc-space-5); }
.kb-subscribe-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--oc-space-3);
}
.kb-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--oc-space-2);
    padding: var(--oc-space-2) var(--oc-space-4);
    font-size: var(--oc-fs-body);
    color: var(--oc-gray-900);
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-md);
    cursor: pointer;
}
.kb-sub-btn:hover:not(:disabled) { background: var(--oc-surface-muted); }
.kb-sub-btn:disabled { opacity: 0.6; cursor: default; }
.kb-sub-btn.kb-sub-on {
    color: var(--oc-orange);
    border-color: var(--oc-orange);
    background: var(--oc-orange-100);
}
.kb-sub-note { font-size: var(--oc-fs-sm); color: var(--oc-text-muted); }
.kb-sub-link {
    margin-left: auto;
    padding: 0;
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}
.kb-sub-error {
    margin-top: var(--oc-space-2);
    font-size: var(--oc-fs-sm);
    color: var(--oc-warning-text);
}

.kb-sub-roster {
    margin-top: var(--oc-space-4);
    padding: var(--oc-space-4);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-lg);
    background: var(--oc-surface-muted);
}
.kb-sub-list { list-style: none; margin: 0 0 var(--oc-space-4); padding: 0; }
.kb-sub-item {
    display: flex;
    align-items: center;
    gap: var(--oc-space-3);
    padding: var(--oc-space-2) 0;
    border-bottom: 1px solid var(--oc-border);
}
.kb-sub-item:last-child { border-bottom: none; }
.kb-sub-who { display: flex; align-items: center; gap: var(--oc-space-2); }
.kb-sub-email {
    margin-left: auto;
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
}
.kb-sub-ext { color: var(--oc-warning-text); }
.kb-sub-remove {
    padding: var(--oc-space-1) var(--oc-space-2);
    color: var(--oc-text-muted);
    background: none;
    border: none;
    cursor: pointer;
}
.kb-sub-remove:hover:not(:disabled) { color: var(--oc-gray-900); }

.kb-sub-add { padding-top: var(--oc-space-3); border-top: 1px solid var(--oc-border); }
.kb-sub-add label {
    display: block;
    margin-bottom: var(--oc-space-2);
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
}
.kb-sub-add-row { display: flex; gap: var(--oc-space-2); flex-wrap: wrap; }
.kb-sub-add-row input {
    flex: 1 1 16rem;
    padding: var(--oc-space-2) var(--oc-space-3);
    font-family: inherit;
    font-size: var(--oc-fs-body);
    color: var(--oc-gray-900);
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-md);
}
.kb-sub-warn {
    display: flex;
    gap: var(--oc-space-2);
    margin: var(--oc-space-3) 0 0;
    font-size: var(--oc-fs-sm);
    color: var(--oc-warning-text);
}

/* Public unsubscribe page — signed-out, chrome-free (BareLayout). */
.kb-unsub-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--oc-space-6);
    font-family: var(--oc-font-sans);
    background: var(--oc-surface-muted);
}
.kb-unsub-card {
    max-width: 32rem;
    padding: var(--oc-space-7);
    text-align: center;
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-lg);
}
.kb-unsub-icon { font-size: 2.5rem; color: var(--oc-orange); }
.kb-unsub-icon-warn { color: var(--oc-warning-text); }
.kb-unsub-title { margin: var(--oc-space-3) 0; font-size: var(--oc-fs-h1); color: var(--oc-gray-900); }
.kb-unsub-muted { font-size: var(--oc-fs-sm); color: var(--oc-text-muted); }