/* =============================================================================
   Mentor Tips  —  /tips, the mentor portal's Tips page, the profile section
   and the lecture sidebar card.
   -----------------------------------------------------------------------------
   Same identity as the rest of the site: the dark masthead band, the #4242d6
   brand, the bb-* tokens and ws-btn buttons from bounty-board.css, the
   MonsterCoin palette for anything that pays. One extra colour, the streak
   flame, used only for the streak.

   "Platform Branding" (see .agent/Ui-Ux-Guidelines.md): a grid, flat colour
   blocks for state (each tip status its own block and word), hierarchy from
   size + weight, space before lines. Built for a long feed: no image is ever
   larger than a thumbnail, no shadows that repaint on scroll, and a card
   reserves the space of everything it holds so nothing jumps as it loads.

   Everything is namespaced .mtp-* (.tp-* is taken by the talent cards in bounty-board.css; .emo-* is the emoji palette) so the
   file is inert elsewhere.
   ========================================================================== */

:root {
    --mtp-flame:      #e2561b;   /* 4.6:1 on white */
    --mtp-flame-tint: #fff0e8;
    --mtp-flame-line: #f8cdb8;

    /* tip status blocks , bg / ink, every pair ≥ 4.5:1 */
    --mtp-live-bg:    #1f7a4d;  --mtp-live-ink:    #ffffff;
    --mtp-review-bg:  #f4c152;  --mtp-review-ink:  #3b2a00;
    --mtp-removed-bg: #e4e2ee;  --mtp-removed-ink: #3e3b52;

    /* a requested topic waiting for review , ink ≥ 7:1 on the tint */
    --mtp-pending-tint: #fff6df;
    --mtp-pending-line: #f4d58d;
    --mtp-pending-ink:  #6b4a00;

    --mtp-card-pad: 18px;
}

.mtp-page { background: var(--bb-canvas); padding-bottom: 72px; }
.mtp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* =============================================================================
   Masthead
   ========================================================================== */
.mtp-mast { position: relative; overflow: hidden; background: #1c1c26; color: #e9e8f2; }
.mtp-mast::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(44rem 22rem at 88% -40%, rgba(66, 66, 214, .42), transparent 68%),
        radial-gradient(30rem 18rem at 4% 140%, rgba(239, 193, 90, .20), transparent 70%);
}
.mtp-mast .container { position: relative; z-index: 1; max-width: 1180px; padding-block: 34px 28px; }
.mtp-mast__kicker {
    display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px;
    font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #b9b8ff;
}
.mtp-mast__title { margin: 0 0 10px; font-size: clamp(28px, 4.2vw, 42px); font-weight: 800; line-height: 1.1; color: #fff; text-wrap: balance; }
.mtp-mast__sub { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: #c9c7dc; }
.mtp-mast__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.mtp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
.mtp-stat { min-width: 118px; padding: 10px 14px; border-radius: var(--bb-r-sm); background: rgba(255, 255, 255, .06); }
.mtp-stat dt { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a9a7c2; }
.mtp-stat dd { margin: 2px 0 0; font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.mtp-preview-banner {
    display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 10px 14px;
    border-radius: var(--bb-r-sm); background: var(--bb-warn-bg); color: var(--bb-warn); font-size: 13.5px; font-weight: 600;
}

/* =============================================================================
   Layout: the feed, and an aside that drops under it on narrow screens
   ========================================================================== */
.mtp-wrap { max-width: 1180px; margin-inline: auto; padding: 24px 16px 0; }
.mtp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1100px) {
    .mtp-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .mtp-aside { position: sticky; top: 96px; }
}
.mtp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mtp-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.mtp-panel { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r); padding: 18px; }
.mtp-panel__title { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--bb-ink); }
.mtp-panel__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bb-body); }

/* =============================================================================
   Tabs + topic chips
   ========================================================================== */
.mtp-controls { display: flex; flex-direction: column; gap: 12px; }
.mtp-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bb-surface); border: 1px solid var(--bb-line); align-self: flex-start; }
.mtp-tab {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 16px;
    border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--bb-muted); text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.mtp-tab:hover { color: var(--bb-brand); background: var(--bb-brand-wash); }
.mtp-tab[aria-current="page"] { background: var(--bb-brand); color: #fff; }
.mtp-tab:focus-visible { outline: none; box-shadow: var(--bb-focus); }

.mtp-topics {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin;
    mask-image: linear-gradient(to right, #000 88%, transparent);
}
[dir="rtl"] .mtp-topics { mask-image: linear-gradient(to left, #000 88%, transparent); }
.mtp-chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px;
    border-radius: 999px; border: 1px solid var(--bb-line); background: var(--bb-surface);
    font-size: 13px; font-weight: 600; color: var(--bb-body); text-decoration: none; white-space: nowrap;
}
.mtp-chip:hover { border-color: var(--bb-brand); color: var(--bb-brand); }
.mtp-chip[aria-current="page"], .mtp-chip[aria-pressed="true"] { background: var(--bb-brand-tint); border-color: var(--bb-brand); color: var(--bb-brand-deep); }
.mtp-chip:focus-visible { outline: none; box-shadow: var(--bb-focus); }
.mtp-chip:disabled { opacity: .45; cursor: not-allowed; }

/* =============================================================================
   Tip card
   ========================================================================== */
.mtp-feed { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mtp-card {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    padding: var(--mtp-card-pad); background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r);
    scroll-margin-top: 110px;
    /* Off-screen cards skip layout and paint until they scroll near. */
    content-visibility: auto; contain-intrinsic-size: auto 280px;
}
.mtp-card:target { border-color: var(--bb-brand); box-shadow: 0 0 0 3px var(--bb-brand-tint); }
.mtp-card--compact { gap: 10px; padding: 16px; }

.mtp-card__head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.mtp-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bb-brand-tint); }
.mtp-avatar--lg { width: 64px; height: 64px; }
.mtp-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mtp-who__name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 14.5px; font-weight: 800; color: var(--bb-ink); text-decoration: none; }
.mtp-who__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtp-who__name:hover { color: var(--bb-brand); }
.mtp-who__meta { font-size: 12.5px; color: var(--bb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtp-badge {
    flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    background: var(--bb-brand-tint); color: var(--bb-brand-deep);
}
.mtp-card__tools { display: flex; align-items: center; gap: 6px; }

/* Body: rendered Markdown. Each block takes its own direction (dir="auto"
   from TipFormatter), so Arabic and English paragraphs can share a tip. */
.mtp-body {
    margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--bb-body);
    text-align: start; overflow-wrap: anywhere;
}
.mtp-body > :first-child { margin-top: 0; }
.mtp-body > :last-child { margin-bottom: 0; }
.mtp-body p, .mtp-body ul, .mtp-body ol, .mtp-body blockquote, .mtp-body pre, .mtp-body h4 { margin: 0 0 .7em; }
.mtp-body p, .mtp-body li, .mtp-body h4 { unicode-bidi: plaintext; }
.mtp-body ul, .mtp-body ol { padding-inline-start: 1.3em; }
.mtp-body ul { list-style: disc; }
.mtp-body ol { list-style: decimal; }
.mtp-body li { margin: .2em 0; }
.mtp-body h4 { font-size: 1.02em; font-weight: 800; color: var(--bb-ink); }
.mtp-body strong { font-weight: 800; color: var(--bb-ink); }
.mtp-body blockquote { padding: 4px 14px; border-inline-start: 3px solid var(--bb-brand-tint); color: var(--bb-muted); }
.mtp-body pre {
    padding: 12px 14px; border-radius: var(--bb-r-sm); background: #1c1c26; color: #e9e8f2;
    font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; text-align: left;
}
.mtp-body pre code { background: none; padding: 0; color: inherit; font: inherit; }
.mtp-body :not(pre) > code { padding: 1px 6px; border-radius: 5px; background: var(--bb-brand-wash); color: var(--bb-brand-deep); font: .88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; direction: ltr; unicode-bidi: isolate; }
/* Clamped by height, not by line count: a code block or a list clamps cleanly too. */
.mtp-body.is-clamped { max-height: calc(1.7em * 6); overflow: hidden; mask-image: linear-gradient(to bottom, #000 72%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.mtp-body--lg { font-size: 17px; }
.mtp-body a { color: var(--bb-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mtp-more {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: -4px; padding: 4px 0;
    border: 0; background: none; font-size: 13.5px; font-weight: 700; color: var(--bb-brand); cursor: pointer;
}
.mtp-more:focus-visible { outline: none; box-shadow: var(--bb-focus); border-radius: 4px; }

.mtp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mtp-tag { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--bb-surface-2); border: 1px solid var(--bb-line-soft); font-size: 12px; font-weight: 600; color: var(--bb-muted); text-decoration: none; }
.mtp-tag:hover { color: var(--bb-brand); border-color: var(--bb-brand-tint); }

/* ── Resources: one compact row each; after the first, the rest fold away ── */
.mtp-res { display: flex; flex-direction: column; gap: 6px; }
.mtp-res__label { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--bb-muted); }
.mtp-res__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mtp-res__item {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 6px; padding-inline-end: 12px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm);
    background: var(--bb-surface); color: inherit; text-decoration: none; transition: border-color .15s ease, background-color .15s ease;
}
.mtp-res__item:hover { border-color: var(--bb-brand); background: var(--bb-brand-wash); }
.mtp-res__item:focus-visible { outline: none; box-shadow: var(--bb-focus); }
.mtp-res__thumb {
    position: relative; width: 56px; height: 42px; border-radius: 7px; overflow: hidden; background: var(--bb-brand-tint);
    display: grid; place-items: center; color: var(--bb-brand); font-size: 18px; font-weight: 800;
}
.mtp-res__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mtp-res__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; background: rgba(0, 0, 0, .25); }
.mtp-res__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.mtp-res__title { font-size: 13.5px; font-weight: 700; color: var(--bb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.mtp-res__domain { font-size: 12px; color: var(--bb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
[dir="rtl"] .mtp-res__domain { text-align: end; }
.mtp-res__kind { font-size: 11px; font-weight: 700; color: var(--bb-muted); white-space: nowrap; }
.mtp-res__more > summary {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 9px;
    font-size: 13px; font-weight: 700; color: var(--bb-brand); cursor: pointer; list-style: none; background: var(--bb-brand-wash);
}
.mtp-res__more > summary::-webkit-details-marker { display: none; }
.mtp-res__more > summary:focus-visible { outline: none; box-shadow: var(--bb-focus); }
.mtp-res__more > summary .mtp-res__domains { min-width: 0; flex: 0 1 auto; font-weight: 600; color: var(--bb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; direction: ltr; }
.mtp-res__more > summary > span:not(.mtp-res__domains) { white-space: nowrap; }
@media (max-width: 480px) { .mtp-res__more > summary .mtp-res__domains { display: none; } }
.mtp-res__more[open] > summary { margin-bottom: 6px; }
.mtp-res__more[open] .mtp-when-closed { display: none; }
.mtp-res__more:not([open]) .mtp-when-open { display: none; }

/* ── Footer actions ── */
.mtp-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.mtp-act {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--bb-line); background: var(--bb-surface); font-size: 13.5px; font-weight: 700; color: var(--bb-body);
    text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.mtp-act i { font-size: 17px; }
.mtp-act:hover { border-color: var(--bb-brand); color: var(--bb-brand); }
.mtp-act:active { transform: scale(.97); }
.mtp-act:focus-visible { outline: none; box-shadow: var(--bb-focus); }
.mtp-act[aria-busy="true"] { cursor: progress; }
.mtp-act:disabled, .mtp-act.is-disabled { opacity: .55; cursor: not-allowed; }
.mtp-act--helpful[aria-pressed="true"] { background: var(--bb-brand); border-color: var(--bb-brand); color: #fff; }
.mtp-act--helpful[aria-pressed="true"]:hover { background: var(--bb-brand-strong); color: #fff; }
.mtp-act--quiet { border-color: transparent; background: transparent; color: var(--bb-muted); }
.mtp-act--quiet:hover { background: var(--bb-surface-2); border-color: transparent; }
.mtp-act__count { font-variant-numeric: tabular-nums; }
.mtp-act--follow { min-height: 32px; padding: 5px 12px; font-size: 12.5px; }
.mtp-act--follow[aria-pressed="true"] { background: var(--bb-brand-tint); border-color: var(--bb-brand-tint); color: var(--bb-brand-deep); }
@media (prefers-reduced-motion: reduce) { .mtp-act, .mtp-tab, .mtp-res__item { transition: none; } .mtp-act:active { transform: none; } }

/* ── Overflow menu (report, copy, edit) ── */
.mtp-menu { position: relative; }
.mtp-menu > summary {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--bb-muted);
    cursor: pointer; list-style: none; font-size: 20px;
}
.mtp-menu > summary::-webkit-details-marker { display: none; }
.mtp-menu > summary:hover, .mtp-menu[open] > summary { background: var(--bb-surface-2); color: var(--bb-ink); }
.mtp-menu > summary:focus-visible { outline: none; box-shadow: var(--bb-focus); }
.mtp-menu__list {
    position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px; margin: 0; padding: 6px; list-style: none;
    background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm); box-shadow: 0 16px 32px -18px rgba(28, 28, 110, .35);
}
.mtp-menu__item {
    display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 7px; background: none;
    font-size: 13.5px; font-weight: 600; color: var(--bb-body); text-align: start; text-decoration: none; cursor: pointer;
}
.mtp-menu__item:hover, .mtp-menu__item:focus-visible { background: var(--bb-surface-2); color: var(--bb-ink); outline: none; }
.mtp-menu__item--danger { color: var(--bb-danger); }

/* ── Status blocks (the tip status enum, made visible) ── */
.mtp-status { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mtp-status--published { background: var(--mtp-live-bg); color: var(--mtp-live-ink); }
.mtp-status--hidden { background: var(--mtp-review-bg); color: var(--mtp-review-ink); }
.mtp-status--removed { background: var(--mtp-removed-bg); color: var(--mtp-removed-ink); }
.mtp-notice { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--bb-r-sm); font-size: 13.5px; line-height: 1.5; background: var(--bb-warn-bg); color: #6b3f0c; }
.mtp-notice--gray { background: var(--bb-surface-2); color: var(--bb-body); }

/* =============================================================================
   Composer
   ========================================================================== */
.mtp-composer { display: flex; flex-direction: column; gap: 14px; }
.mtp-composer__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mtp-composer__title { margin: 0; font-size: 17px; font-weight: 800; color: var(--bb-ink); }
.mtp-composer__sub { margin: 2px 0 0; font-size: 13.5px; color: var(--bb-muted); }
.mtp-field { display: flex; flex-direction: column; gap: 6px; }
.mtp-field__label { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 800; color: var(--bb-ink); }
.mtp-field__label small { font-weight: 600; color: var(--bb-muted); }
.mtp-field__hint { margin: 0; font-size: 12.5px; color: var(--bb-muted); }
.mtp-field__error { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--bb-danger); }
.mtp-textarea {
    width: 100%; min-height: 132px; max-height: 60vh; padding: 12px 14px; resize: vertical;
    border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm); background: var(--bb-surface);
    font-family: inherit; font-size: 15.5px; line-height: 1.65; color: var(--bb-ink); unicode-bidi: plaintext; text-align: start;
}
.mtp-textarea:focus { outline: none; border-color: var(--bb-brand); box-shadow: var(--bb-focus); }
.mtp-textarea[aria-invalid="true"] { border-color: var(--bb-danger); }
.mtp-textarea-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--bb-muted); }
.mtp-counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtp-counter.is-over { color: var(--bb-danger); font-weight: 700; }
.mtp-topic-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.mtp-link-row { display: flex; gap: 8px; }
.mtp-input {
    flex: 1; min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm);
    background: var(--bb-surface); font-size: 14px; color: var(--bb-ink); direction: ltr; text-align: left;
}
.mtp-input:focus { outline: none; border-color: var(--bb-brand); box-shadow: var(--bb-focus); }
.mtp-input:disabled { background: var(--bb-surface-2); cursor: not-allowed; }
.mtp-draft-res { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mtp-draft-res .mtp-res__item { grid-template-columns: 56px minmax(0, 1fr) auto; cursor: default; }
.mtp-draft-res .mtp-res__item:hover { border-color: var(--bb-line); background: var(--bb-surface); }
.mtp-icon-btn {
    display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none;
    color: var(--bb-muted); font-size: 17px; cursor: pointer;
}
.mtp-icon-btn:hover { background: var(--bb-danger-bg); color: var(--bb-danger); }
.mtp-icon-btn:focus-visible { outline: none; box-shadow: var(--bb-focus); }
.mtp-skeleton { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--bb-line-soft), var(--bb-line), var(--bb-line-soft)); background-size: 200% 100%; animation: mtp-shimmer 1.2s linear infinite; }
@keyframes mtp-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mtp-skeleton { animation: none; } }
.mtp-composer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--bb-line-soft); }
.mtp-composer__status { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 600; color: var(--bb-muted); }
.mtp-composer__status.is-ready { color: var(--bb-ok); }
.mtp-composer__actions { display: flex; gap: 8px; margin-inline-start: auto; }
.mtp-draft-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: var(--bb-r-sm); background: var(--bb-info-bg); color: var(--bb-info); font-size: 13px; font-weight: 600; }
.mtp-draft-note button { border: 0; background: none; color: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.mtp-formatting { margin: 0; font-size: 12px; color: var(--bb-muted); }
.mtp-formatting code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* =============================================================================
   Streak
   ========================================================================== */
.mtp-streak { display: flex; flex-direction: column; gap: 12px; }
.mtp-streak__top { display: flex; align-items: center; gap: 12px; }
.mtp-flame {
    flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
    background: var(--mtp-flame-tint); color: var(--mtp-flame); font-size: 26px;
}
.mtp-flame.is-cold { background: var(--bb-surface-2); color: var(--bb-faint); }
.mtp-streak__weeks { margin: 0; font-size: 20px; font-weight: 800; color: var(--bb-ink); line-height: 1.2; }
.mtp-streak__state { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--bb-ok); }
.mtp-streak__state.is-risk { color: var(--mtp-flame); }
.mtp-streak__state.is-cold { color: var(--bb-muted); }
.mtp-progress { height: 8px; border-radius: 999px; background: var(--bb-line-soft); overflow: hidden; }
.mtp-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bb-coin-face), var(--mtp-flame)); }
.mtp-streak__next { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; color: var(--bb-body); }
.mtp-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.mtp-rung { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 9px; border: 1px dashed var(--bb-line); text-align: center; }
.mtp-rung__weeks { font-size: 12px; font-weight: 800; color: var(--bb-ink); }
.mtp-rung.is-reached { border-style: solid; border-color: var(--bb-coin-line); background: var(--bb-coin-bg); }
.mtp-rung.is-reached .mtp-rung__weeks { color: var(--bb-coin-ink); }
.mtp-rules { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.55; color: var(--bb-body); }
.mtp-streak-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
    background: var(--mtp-flame-tint); border: 1px solid var(--mtp-flame-line); color: #9a3a10; font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.mtp-streak-pill.is-cold { background: var(--bb-surface-2); border-color: var(--bb-line); color: var(--bb-muted); }

/* =============================================================================
   Aside: who to follow, become a mentor
   ========================================================================== */
.mtp-people { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mtp-person { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.mtp-person__meta { font-size: 12px; color: var(--bb-muted); }

/* =============================================================================
   Empty states
   ========================================================================== */
.mtp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 20px; text-align: center; background: var(--bb-surface); border: 1px dashed var(--bb-line); border-radius: var(--bb-r); }
.mtp-empty__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--bb-brand-tint); color: var(--bb-brand); font-size: 26px; }
.mtp-empty__title { margin: 4px 0 0; font-size: 17px; font-weight: 800; color: var(--bb-ink); }
.mtp-empty__text { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--bb-body); }
.mtp-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

/* =============================================================================
   Report dialog (one per page, reused by every card)
   ========================================================================== */
.mtp-dialog { width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--bb-r); box-shadow: 0 30px 60px -20px rgba(28, 28, 110, .45); }
.mtp-dialog::backdrop { background: rgba(20, 20, 40, .45); }
.mtp-dialog__body { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.mtp-dialog__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--bb-ink); }
.mtp-reasons { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.mtp-reason { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm); font-size: 14px; font-weight: 600; color: var(--bb-body); cursor: pointer; }
.mtp-reason:has(input:checked) { border-color: var(--bb-brand); background: var(--bb-brand-wash); color: var(--bb-ink); }
.mtp-reason input { accent-color: var(--bb-brand); }
.mtp-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* =============================================================================
   Single tip page + mentor page headers
   ========================================================================== */
.mtp-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #c9c7dc; text-decoration: none; }
.mtp-back:hover { color: #fff; }
.mtp-author { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mtp-author__name { margin: 0; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; color: #fff; line-height: 1.15; }
.mtp-author__job { margin: 4px 0 0; font-size: 14px; color: #c9c7dc; }
.mtp-book { display: flex; flex-direction: column; gap: 10px; background: var(--bb-brand-deep); color: #e9e8f2; border: 0; }
.mtp-book .mtp-panel__title { color: #fff; }
.mtp-book .mtp-panel__text { color: #c9c7dc; }

/* =============================================================================
   Mentor profile section + lecture sidebar card
   ========================================================================== */
.mtp-profile { display: flex; flex-direction: column; gap: 14px; }
.mtp-profile__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mtp-trust { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--bb-ok); }
.mtp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }

.mtp-lecture { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding: 16px; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r); }
.mtp-lecture__kicker { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-brand); }
.mtp-lecture .mtp-body { font-size: 14.5px; }
.mtp-lecture .mtp-body.is-clamped { max-height: calc(1.7em * 4); }
.mtp-lecture__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mtp-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; color: var(--bb-brand); text-decoration: none; }
.mtp-link:hover { text-decoration: underline; }

/* =============================================================================
   Mentor portal: My tips
   ========================================================================== */
.mtp-portal { display: flex; flex-direction: column; gap: 20px; }
.mtp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.mtp-kpi { padding: 14px 16px; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r); }
.mtp-kpi__label { margin: 0; font-size: 12px; font-weight: 700; color: var(--bb-muted); }
.mtp-kpi__value { margin: 4px 0 0; font-size: 22px; font-weight: 800; color: var(--bb-ink); font-variant-numeric: tabular-nums; }
.mtp-kpi__sub { margin: 2px 0 0; font-size: 12px; color: var(--bb-muted); }
.mtp-portal__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1200px) { .mtp-portal__cols { grid-template-columns: minmax(0, 1fr) 320px; } }
.mtp-mine { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mtp-mine__item { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r); }
.mtp-mine__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--bb-muted); }
.mtp-mine__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--bb-body); unicode-bidi: plaintext; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mtp-mine__actions { display: flex; flex-wrap: wrap; gap: 6px; }
[x-cloak] { display: none !important; }


/* =============================================================================
   Composer, closed: one line, like the top of a social feed
   ========================================================================== */
.mtp-prompt { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.mtp-prompt__field {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 48px; padding: 8px 16px;
    border: 1px solid var(--bb-line); border-radius: 999px; background: var(--bb-surface-2); text-align: start; cursor: text;
    transition: border-color .15s ease, background-color .15s ease;
}
.mtp-prompt__field:hover { border-color: var(--bb-brand); background: var(--bb-surface); }
.mtp-prompt__field:focus-visible { outline: none; box-shadow: var(--bb-focus); }
.mtp-prompt__text { font-size: 15px; font-weight: 600; color: var(--bb-muted); }
.mtp-prompt__field small { font-size: 12px; color: var(--bb-faint); }
.mtp-prompt__quick { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mtp-composer__open { display: flex; flex-direction: column; gap: 14px; }
.mtp-icon-btn--neutral:hover { background: var(--bb-surface-2); color: var(--bb-ink); }

/* The editor inside a tip: shorter than the bounty editor, same look. */
.mtp-editor .mde__doc { min-height: 130px; max-height: 50vh; }
.mtp-editor .mde__source { min-height: 130px; }
.mtp-editor .mde__doc pre { background: #1c1c26; color: #e9e8f2; padding: 10px 12px; border-radius: 8px; direction: ltr; text-align: left; }
.mtp-editor .mde__doc :not(pre) > code { background: var(--bb-brand-wash); color: var(--bb-brand-deep); padding: 1px 5px; border-radius: 4px; }
.mtp-editor .emo__trigger { width: 32px; height: 32px; }

/* =============================================================================
   Topic picker: search + select, a small box however many topics exist
   ========================================================================== */
.mtp-combo { position: relative; }
.mtp-combo__box {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 5px 8px;
    border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm); background: var(--bb-surface); cursor: text;
}
.mtp-combo__box:focus-within { border-color: var(--bb-brand); box-shadow: var(--bb-focus); }
.mtp-combo.is-invalid .mtp-combo__box { border-color: var(--bb-danger); }
.mtp-combo__chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px;
    background: var(--bb-brand-tint); color: var(--bb-brand-deep); font-size: 13px; font-weight: 700;
}
[dir="rtl"] .mtp-combo__chip { padding: 3px 10px 3px 4px; }
.mtp-combo__chip button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.mtp-combo__chip button:hover, .mtp-combo__chip button:focus-visible { background: rgba(66, 66, 214, .15); outline: none; }
.mtp-combo__input { flex: 1 1 140px; min-width: 120px; min-height: 32px; border: 0; outline: none; background: transparent; font-size: 14px; color: var(--bb-ink); }
.mtp-combo__input:disabled { cursor: not-allowed; }
.mtp-combo__panel {
    position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; padding: 6px;
    background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm); box-shadow: 0 16px 32px -18px rgba(28, 28, 110, .35);
}
.mtp-combo__label { margin: 4px 8px 6px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--bb-muted); }
.mtp-combo__list { max-height: 232px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.mtp-combo__option { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--bb-body); cursor: pointer; }
.mtp-combo__option i { color: var(--bb-faint); }
.mtp-combo__option.is-active { background: var(--bb-brand-wash); color: var(--bb-brand-deep); }
.mtp-combo__empty { margin: 0; padding: 10px; font-size: 13px; color: var(--bb-muted); }
/* A topic the mentor requested: amber + the word, until an admin approves it
   (the same "pending review" look as requested skills and mentor topics). */
.mtp-combo__chip.is-pending { background: var(--mtp-pending-tint); color: var(--mtp-pending-ink); box-shadow: inset 0 0 0 1px var(--mtp-pending-line); }
.mtp-combo__chip.is-pending button:hover, .mtp-combo__chip.is-pending button:focus-visible { background: rgba(107, 74, 0, .12); }
.mtp-combo__chip-state {
    padding: 1px 6px; border-radius: 999px; background: var(--mtp-pending-line); color: var(--mtp-pending-ink);
    font-size: 10.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.mtp-combo__request { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mtp-combo__request-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.mtp-combo__request-text small { font-size: 12px; font-weight: 500; color: var(--bb-muted); }
.mtp-combo__option--request { margin-top: 4px; border: 1px dashed var(--mtp-pending-line); background: var(--mtp-pending-tint); color: var(--mtp-pending-ink); }
.mtp-combo__option--request i { color: var(--mtp-pending-ink); }
.mtp-combo__option--request.is-active { background: #ffeec2; color: var(--mtp-pending-ink); }

/* =============================================================================
   Emoji palette (components/emoji-picker) , used by the tip composer and every
   discussion composer
   ========================================================================== */
.emo { position: relative; display: inline-flex; }
.emo__trigger {
    display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent;
    color: var(--bb-muted, #7c7893); font-size: 18px; cursor: pointer;
}
.emo__trigger:hover, .emo__trigger[aria-expanded="true"] { background: var(--bb-brand-tint, #ecebff); color: var(--bb-brand, #4242d6); }
.emo__trigger:focus-visible { outline: none; box-shadow: var(--bb-focus); }
.emo__panel {
    position: absolute; bottom: calc(100% + 6px); z-index: 40; width: 292px; max-width: calc(100vw - 32px); padding: 8px;
    background: var(--bb-surface, #fff); border: 1px solid var(--bb-line, #e7e5f2); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(28, 28, 110, .4);
}
.emo--start .emo__panel { inset-inline-start: 0; }
.emo--end .emo__panel { inset-inline-end: 0; }
.emo__tabs { display: flex; gap: 2px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--bb-line-soft, #f1f0f8); }
.emo__tab { flex: 1; display: grid; place-items: center; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--bb-muted, #7c7893); cursor: pointer; }
.emo__tab[aria-selected="true"] { background: var(--bb-brand-tint, #ecebff); color: var(--bb-brand, #4242d6); }
.emo__label { display: block; margin: 2px 4px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-muted, #7c7893); }
.emo__recent { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--bb-line-soft, #f1f0f8); }
.emo__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emo__btn { display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 7px; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }
.emo__btn:hover, .emo__btn:focus-visible { background: var(--bb-surface-2, #faf9fd); outline: none; transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) { .emo__btn:hover { transform: none; } }

/* =============================================================================
   How streaks work: steps on a line, one idea each
   ========================================================================== */
.mtp-how > summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; }
.mtp-how > summary::-webkit-details-marker { display: none; }
.mtp-how[open] > summary i { transform: rotate(180deg); }
.mtp-steps { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.mtp-steps::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 13px; width: 2px; background: var(--bb-line); }
.mtp-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.mtp-step__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bb-brand-tint); color: var(--bb-brand); font-size: 14px; box-shadow: 0 0 0 3px var(--bb-surface); }
.mtp-step__icon--coin { background: var(--bb-coin-bg); color: var(--bb-coin-ink); }
.mtp-step__icon--warn { background: var(--mtp-flame-tint); color: var(--mtp-flame); }
.mtp-step__title { margin: 3px 0 2px; font-size: 13.5px; font-weight: 800; color: var(--bb-ink); }
.mtp-step__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bb-body); }
.mtp-step__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.mtp-step__chips .mc-badge { font-size: 12px; }

/* Inside the editor toolbar the palette opens downward over the text, and the
   editor box must not clip it. */
.mtp-editor .mde__box { overflow: visible; }
.mtp-editor .emo__panel { bottom: auto; top: calc(100% + 6px); }
.mtp-editor .mde__bar { border-start-start-radius: 12px; border-start-end-radius: 12px; }
.mtp-editor .mde__doc { border-end-start-radius: 12px; border-end-end-radius: 12px; }