/* ═══════════════════════════════════════════════════════════════════
   Prolancer in the margin (blog post page)
   The sidebar note for the section being read, the phone dock and the
   closing recap. Plan: apps/blog/margin.py; behaviour: js/blog-margin.js.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Sidebar card ───────────────────────────────────────── */
/* The sidebar sticks below the site's sticky top bar (64px), not under it. */
@media (min-width: 801px) {
    .b-post .b-post__sidebar { top: 88px; }
}
/* Short screens: drop the picture so the card and the trial CTA under it both fit. */
@media (min-width: 801px) and (max-height: 880px) {
    .bm .bm-mock { display: none; }
}
.bm {
    position: relative;
    margin-bottom: 18px;
    padding: 18px 18px 16px 20px;
    border-radius: 16px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    box-shadow: var(--shadow-md, var(--shadow-lg));
}
/* The spine and the tick that tie the note to the column it annotates. */
.bm::before {
    content: "";
    position: absolute;
    left: -1px; top: 18px; bottom: 18px;
    width: 3px;
    border-radius: 3px;
    background: var(--gradient-brand, var(--color-brand));
}
.bm::after {
    content: "";
    position: absolute;
    left: -26px; top: 30px;
    width: 24px;
    border-top: 1px dashed var(--color-brand);
    opacity: .55;
}
@media (max-width: 1100px) { .bm::after { display: none; } }

.bm-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.bm-eyebrow {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 700 10px/1.2 var(--cf-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-brand);
}
.bm-count {
    flex-shrink: 0;
    font: 500 11px/1 var(--font-mono, ui-monospace, monospace);
    color: var(--cf-text-muted);
}

/* Progress: one segment per note, lit as the reader passes it. */
.bm-rail {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    gap: 4px;
}
.bm-rail li { flex: 1; display: flex; }
.bm-dot {
    flex: 1;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--cf-border);
    cursor: pointer;
    transition: background .25s ease;
}
.bm-dot.is-seen { background: var(--color-brand-subtle); box-shadow: inset 0 0 0 1px var(--color-brand); }
.bm-dot.is-current { background: var(--color-brand); box-shadow: none; }
.bm-dot:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

/* ── One note ───────────────────────────────────────────── */
.bm-note[hidden] { display: none; }
.bm-note.is-entering { animation: bm-in .38s cubic-bezier(.2, .8, .2, 1) both; }
.bm-note.is-entering .bm-stamp { animation: bm-stamp .5s .18s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes bm-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes bm-stamp {
    from { opacity: 0; transform: rotate(-2.5deg) scale(1.18); }
    to { opacity: 1; transform: rotate(-2.5deg) scale(1); }
}

.bm-note__from {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-bottom: 8px;
    font: 500 11.5px/1.3 var(--cf-font);
    color: var(--cf-text-muted);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bm-note__from svg { width: 12px; height: 12px; flex-shrink: 0; }
.bm-note__from:hover { color: var(--cf-text); }

.bm-note__title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    font: 600 16px/1.25 var(--font-display, var(--cf-font));
    letter-spacing: -.01em;
    color: var(--cf-text);
}
.bm-note__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--color-brand-subtle);
    color: var(--color-brand);
}
.bm-note__icon svg { width: 16px; height: 16px; }

.bm-note__body {
    margin: 10px 0 0;
    font: 400 12.5px/1.5 var(--cf-font);
    color: var(--cf-text-secondary);
}
.bm-note__tool {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px dashed var(--cf-border);
    font: 400 12px/1.3 var(--cf-font);
    color: var(--cf-text-secondary);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.bm-note__tool span { flex: 1; min-width: 0; }
.bm-note__tool strong { color: var(--cf-text); font-weight: 600; }
.bm-note__tool svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-brand); }
.bm-note__tool:hover { border-color: var(--color-brand); color: var(--cf-text); }

/* ── The small product picture ──────────────────────────── */
.bm-mock {
    border: 1px solid var(--cf-border);
    border-radius: 12px;
    background: var(--cf-surface-sunk);
    overflow: hidden;
}
.bm-mock__bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--cf-border);
    background: var(--cf-surface);
}
.bm-mock__bar > span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cf-border);
    flex-shrink: 0;
}
.bm-mock__bar b {
    flex: 1;
    min-width: 0;
    margin-left: 6px;
    font: 500 11px/1.2 var(--font-mono, ui-monospace, monospace);
    color: var(--cf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bm-mock__bar em {
    flex-shrink: 0;
    font: 600 9px/1 var(--cf-font);
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
}
.bm-mock__rows { margin: 0; padding: 8px 12px 2px; }
.bm-mock__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font: 400 12px/1.35 var(--cf-font);
}
.bm-mock__row + .bm-mock__row { border-top: 1px dotted var(--cf-border); }
.bm-mock__row dt { color: var(--cf-text-muted); }
.bm-mock__row dd { margin: 0; text-align: right; font-weight: 600; color: var(--cf-text); }
.bm-mock__row dd.is-good { color: var(--success); }
.bm-mock__row dd.is-warn { color: var(--warning); }
.bm-mock__row dd.is-bad { color: var(--danger); }

.bm-stamp {
    display: inline-block;
    margin: 6px 14px 12px;
    padding: 4px 9px;
    border: 1.5px solid currentColor;
    border-radius: 6px;
    transform: rotate(-2.5deg);
    font: 700 10.5px/1 var(--cf-font);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.bm-stamp.is-good { color: var(--success); background: var(--success-subtle); }
.bm-stamp.is-warn { color: var(--warning); background: var(--warning-subtle); }
.bm-stamp.is-bad { color: var(--danger); background: var(--danger-subtle); }

/* ── Phones: the dock replaces the sidebar card ─────────── */
@media (max-width: 800px) {
    .bm { display: none; }
}
.bm-dock {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    border-radius: 16px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(100% + 32px));
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
}
.bm-dock.is-on {
    transform: none;
    visibility: visible;
    transition: transform .3s ease;
}
@media (min-width: 801px) { .bm-dock { display: none; } }
.bm-dock__note[hidden] { display: none; }
.bm-dock__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: none;
    color: var(--cf-text);
    text-align: left;
    cursor: pointer;
}
.bm-dock__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bm-dock__text small {
    font: 700 9.5px/1.2 var(--cf-font);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--color-brand);
}
.bm-dock__text strong {
    font: 600 14.5px/1.25 var(--font-display, var(--cf-font));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bm-dock__chev { width: 18px; height: 18px; flex-shrink: 0; color: var(--cf-text-muted); transition: transform .25s ease; }
.bm-dock.is-open .bm-dock__chev { transform: rotate(180deg); }
.bm-dock__more { display: none; padding: 0 14px 14px; }
.bm-dock.is-open .bm-dock__more { display: block; }
.bm-dock.is-open .bm-dock__text strong { white-space: normal; }
.bm-dock__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--gradient-brand, var(--color-brand));
    color: var(--text-on-brand);
    font: 700 14px/1 var(--cf-font);
    cursor: pointer;
}
.bm-dock__cta svg { width: 15px; height: 15px; }

/* ── Closing recap (inside the dark CTA band) ───────────── */
.bm-recap__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 40px;
}
@media (max-width: 860px) { .bm-recap__inner { grid-template-columns: 1fr; gap: 28px; } }
.bm-recap__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font: 700 11px/1 var(--cf-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}
.bm-recap__heading {
    margin: 0 0 26px;
    max-width: 720px;
    font: 600 34px/1.15 var(--font-display, var(--cf-font));
    letter-spacing: -.02em;
    color: rgb(255, 255, 255);
}
@media (max-width: 720px) { .bm-recap__heading { font-size: 25px; } }
.bm-recap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px 24px;
    counter-reset: bm;
}
.bm-recap__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
}
.bm-recap__tick {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: rgb(255, 255, 255);
}
.bm-recap__tick svg { width: 15px; height: 15px; }
.bm-recap__list strong {
    display: block;
    font: 600 14.5px/1.3 var(--cf-font);
    color: rgb(255, 255, 255);
}
.bm-recap__list a {
    display: inline-block;
    margin-top: 3px;
    font: 400 12px/1.3 var(--cf-font);
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.bm-recap__list a:hover { color: rgb(255, 255, 255); }
.bm-recap__act { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bm-recap__act p { margin: 0; max-width: 260px; font: 400 12.5px/1.45 var(--cf-font); color: rgba(255, 255, 255, .62); }

@media (prefers-reduced-motion: reduce) {
    .bm-note.is-entering, .bm-note.is-entering .bm-stamp { animation: none; }
    .bm-dock, .bm-dock.is-on { transition: none; }
}