/* ============================================
   Kronoscript - Deep Teal Modern Theme
   ============================================ */

:root {
    /* Anchors */
    --mst-ink:       #1a1f2e;  /* near-black, primary text + dark surfaces */
    --mst-ink-soft:  #2b3142;
    --mst-canvas:    #fafaf7;  /* near-white page canvas */
    --mst-card:      #ffffff;
    --mst-surface-2: #f3f3ee;  /* subtle raised surface / bubbles */
    --mst-border:    #e6e6df;

    /* Accent: deep teal */
    --mst-primary:   #0f6466;  /* deep teal */
    --mst-primary-2: #144f52;  /* darker */
    --mst-primary-3: #1a8a8d;  /* brighter, for hover */
    --mst-accent:    #d4a84a;  /* lighter gold secondary */
    --mst-accent-2:  #b8871a;  /* deeper gold for hover/shadow */

    /* Visibility / relationship tier palette — shared with My Network */
    --tier-public:        #dc3545;  /* red — broad/exposed */
    --tier-acquaintances: #3b82f6;  /* sky blue — breezy, casual */
    --tier-friends:       #10b981;  /* emerald — the friendly middle */
    --tier-family:        #eab308;  /* brilliant gold — the precious inner circle */
    --tier-private:       #6c757d;

    /* Text */
    --mst-text:      #1a1f2e;
    --mst-muted:     #6b7280;

    /* Surfaces (legacy names kept as aliases so existing classes keep working) */
    --mst-bg:        var(--mst-canvas);
    --mst-dark:      var(--mst-ink);
    --mst-secondary: var(--mst-primary-3);
    --mst-gold:      var(--mst-accent);
    --mst-gold-light:#fbd9cb;
    --mst-light:     #e6f2f2;

    /* Elevation */
    --mst-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --mst-shadow:    0 1px 3px rgba(16, 24, 40, 0.06), 0 10px 30px -16px rgba(16, 24, 40, 0.18);
    --mst-shadow-lg: 0 20px 60px -20px rgba(16, 24, 40, 0.35);

    /* Radii */
    --mst-radius:    16px;
    --mst-radius-sm: 10px;
    --mst-radius-lg: 22px;

    /* Type */
    --mst-font-serif: 'Fraunces', 'Instrument Serif', Georgia, serif;
    --mst-font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Dark mode */
[data-theme="dark"] {
    --mst-ink:       #e7e9ee;
    --mst-ink-soft:  #c8ccd6;
    --mst-canvas:    #0f131c;
    --mst-card:      #161b27;
    --mst-surface-2: #1b2130;
    --mst-border:    #242b3c;
    --mst-primary:   #2dd4bf;
    --mst-primary-2: #14b8a6;
    --mst-primary-3: #5eead4;
    --mst-accent:    #d4a84a;
    --mst-accent-2:  #b8871a;
    --mst-text:      #e7e9ee;
    --mst-muted:     #8a92a6;
    --mst-bg:        var(--mst-canvas);
    --mst-dark:      var(--mst-ink);
    --mst-secondary: var(--mst-primary-3);
    --mst-light:     #10303a;
    --mst-shadow:    0 1px 3px rgba(0,0,0,0.5), 0 10px 30px -16px rgba(0,0,0,0.7);
}

html {
    font-size: 15px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    /* Sticky footer pattern: body is a flex column with min-height = viewport,
       so the <footer class="mt-auto"> in _Layout pushes itself to the bottom
       on short pages. Removed the old `margin-bottom: 60px` which paired with
       the old absolute-positioned 60px footer (now flows in normal order). */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--mst-canvas);
    color: var(--mst-text);
    font-family: var(--mst-font-sans);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5 {
    font-family: var(--mst-font-serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--mst-ink);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 { color: var(--mst-ink); }

/* Dark mode: force Bootstrap utility classes onto CSS variables */
[data-theme="dark"] {
    color: var(--mst-text);
}
[data-theme="dark"] .text-muted        { color: var(--mst-muted) !important; }
[data-theme="dark"] .text-dark         { color: var(--mst-text) !important; }
[data-theme="dark"] .text-body         { color: var(--mst-text) !important; }
[data-theme="dark"] .text-body-secondary { color: var(--mst-muted) !important; }
[data-theme="dark"] .text-black        { color: var(--mst-text) !important; }
[data-theme="dark"] small,
[data-theme="dark"] .small              { color: inherit; }
[data-theme="dark"] .bg-light           { background-color: var(--mst-surface-2) !important; color: var(--mst-text) !important; }
[data-theme="dark"] .bg-white           { background-color: var(--mst-card) !important; color: var(--mst-text) !important; }
[data-theme="dark"] .card,
[data-theme="dark"] .card * { color: var(--mst-text); }
[data-theme="dark"] .card .text-muted,
[data-theme="dark"] .card small { color: var(--mst-muted) !important; }
[data-theme="dark"] .bg-success-subtle  { background-color: rgba(45,212,191,0.15) !important; color: var(--mst-primary-3) !important; }
[data-theme="dark"] .text-success       { color: var(--mst-primary-3) !important; }
[data-theme="dark"] .bg-secondary,
[data-theme="dark"] .badge.bg-secondary { background-color: var(--mst-surface-2) !important; color: var(--mst-text) !important; }
[data-theme="dark"] .dropdown-menu      { background-color: var(--mst-card); border-color: var(--mst-border); color: var(--mst-text); }
[data-theme="dark"] .dropdown-item      { color: var(--mst-text); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus{ background-color: var(--mst-surface-2); color: var(--mst-ink); }
[data-theme="dark"] .modal-content      { background-color: var(--mst-card); color: var(--mst-text); border: 1px solid var(--mst-border); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer       { border-color: var(--mst-border); }
[data-theme="dark"] .btn-close          { filter: invert(1) grayscale(100%) brightness(180%); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select        { background-color: var(--mst-surface-2); color: var(--mst-text); border-color: var(--mst-border); }
[data-theme="dark"] .form-control::placeholder { color: var(--mst-muted); }
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] textarea,
[data-theme="dark"] select              { color-scheme: dark; }
[data-theme="dark"] a                   { color: var(--mst-primary-3); }
[data-theme="dark"] a:hover             { color: var(--mst-primary); }
[data-theme="dark"] .list-group-item    { background-color: var(--mst-card); color: var(--mst-text); border-color: var(--mst-border); }
[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus { background-color: var(--mst-surface-2); color: var(--mst-ink); }
[data-theme="dark"] .card-header.bg-white { background-color: var(--mst-card) !important; color: var(--mst-text); border-color: var(--mst-border); }
.conv-name { color: var(--mst-ink); }
[data-theme="dark"] .conv-name { color: #ffffff !important; }

/* Navbar icons are always white regardless of theme */
.navbar .btn-outline-secondary svg,
.navbar .btn-outline-primary svg,
.navbar .theme-toggle svg,
.navbar .dropdown-toggle svg { color: #fff !important; stroke: #fff !important; }

/* Links */
a { color: var(--mst-primary); text-decoration: none; }
a:hover { color: var(--mst-primary-3); }

/* Buttons */
.btn {
    border-radius: var(--mst-radius-sm);
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: background-color .14s ease, color .14s ease, transform .08s ease, box-shadow .14s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background-color: var(--mst-primary);
    border-color: var(--mst-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--mst-primary-2);
    border-color: var(--mst-primary-2);
    color: #fff;
}
.btn-outline-primary {
    color: var(--mst-primary);
    border-color: var(--mst-primary);
    background: transparent;
}
.btn-outline-primary:hover {
    background-color: var(--mst-primary);
    border-color: var(--mst-primary);
    color: #fff;
}
.btn-outline-secondary {
    color: var(--mst-muted);
    border-color: var(--mst-border);
    background: transparent;
}
.btn-outline-secondary:hover {
    background: var(--mst-surface-2);
    color: var(--mst-ink);
    border-color: var(--mst-border);
}

/* Focus rings */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(15, 100, 102, 0.18);
    border-color: var(--mst-primary);
    outline: none;
}

/* Cards */
.card {
    border-radius: var(--mst-radius);
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    box-shadow: var(--mst-shadow-sm);
}
.card.shadow-sm { box-shadow: var(--mst-shadow) !important; }

/* Form controls */
.form-control, .form-select {
    border-radius: var(--mst-radius-sm);
    border-color: var(--mst-border);
    background-color: var(--mst-card);
    color: var(--mst-text);
}
.form-control.bg-light, .form-select.bg-light { background-color: var(--mst-surface-2) !important; }
.form-control::placeholder { color: var(--mst-muted); }

/* Diff highlighting removed — edits surface as a small 'edited' note under the post */
.diff-added,
.diff-changed,
.diff-removed {
    background: none;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    opacity: 1;
}

/* Inline comments panel under feed/timeline cards */
.post-comments-inline {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mst-border);
}
.post-comments-inline .pci-empty {
    font-size: 0.78rem;
    color: var(--mst-muted);
    text-align: center;
    padding: 6px 0;
}
.post-comments-inline .pci-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 8px;
    background: var(--mst-surface-2);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius-sm);
    padding: 8px 10px;
}
.post-comments-inline .pci-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--mst-primary);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.post-comments-inline .pci-avatar img { width: 26px; height: 26px; object-fit: cover; }
.post-comments-inline .pci-body { flex: 1; min-width: 0; }
.post-comments-inline .pci-meta {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    font-size: 0.7rem;
}
.post-comments-inline .pci-meta strong { font-size: 0.78rem; color: var(--mst-text); }
.post-comments-inline .pci-meta time   { color: var(--mst-muted); }
.post-comments-inline .pci-text { font-size: 0.84rem; color: var(--mst-text); margin-top: 2px; }
.post-comments-inline .pci-form {
    display: flex; gap: 6px; margin-top: 6px;
}
.post-comments-inline .pci-form input {
    flex: 1;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.82rem;
    color: var(--mst-text);
    outline: none;
}
.post-comments-inline .pci-form input:focus { border-color: var(--mst-primary); }
.post-comments-inline .pci-form button {
    background: var(--mst-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.post-comments-inline .pci-form button:hover { background: var(--mst-primary-2); }

/* Post expand/collapse — surfaced as a "Read more" / "Read less" link
   that's actually visible. The old 3-dot icon was easy to miss. */
.btn-expand-post {
    background: none;
    border: none;
    color: var(--mst-primary);
    cursor: pointer;
    padding: 2px 0;
    margin-left: 4px;
    vertical-align: baseline;
    font-weight: 600;
    font-size: inherit;
    transition: color .1s ease;
}
.btn-expand-post:hover { color: var(--mst-primary-2, var(--mst-secondary)); text-decoration: underline; }
.btn-expand-label::before { content: "… "; color: var(--mst-muted); }
.post-expand-wrap.expanded .post-preview-text { display: none; }
.post-expand-wrap.expanded .post-full-text { display: block !important; }
.post-expand-wrap.expanded .btn-expand-label::before { content: ""; }

/* Article feed preview: full article-layout markup is rendered inside a
   collapsible wrapper so the card keeps its newspaper / book look both
   when collapsed and expanded. The collapse uses a max-height clamp +
   fade-out at the bottom; "Read more" toggles `.expanded` on the
   surrounding .post-expand-wrap to drop the clamp. */
.post-article-collapse {
    position: relative;
    max-height: 26em;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.post-article-collapse::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fbfaf6 90%);
    pointer-events: none;
}
.feed-card-book .post-article-collapse::after {
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fbf7ee 90%);
}
[data-theme="dark"] .feed-card-newspaper .post-article-collapse::after {
    background: linear-gradient(to bottom, rgba(34,31,23,0), #221f17 90%);
}
[data-theme="dark"] .feed-card-book .post-article-collapse::after {
    background: linear-gradient(to bottom, rgba(42,36,24,0), #2a2418 90%);
}
.post-expand-wrap.expanded .post-article-collapse { max-height: none; }
.post-expand-wrap.expanded .post-article-collapse::after { display: none; }
.post-expand-wrap.is-fully-shown .post-article-collapse { max-height: none; }
.post-expand-wrap.is-fully-shown .post-article-collapse::after { display: none; }
.btn-expand-article { margin-top: 6px; }

/* Tighter article look inside the feed card — smaller headline and
   paragraph type than the Detail page so multiple cards still read as a
   feed. The two-column flow is preserved on newspaper. */
.article-feed-preview { margin: 0; padding: 0; }
.article-feed-preview .article-headline {
    font-size: 1.35rem !important;
    line-height: 1.2;
    margin: 0 0 4px 0;
}
.article-feed-preview .article-byline {
    font-size: 0.78rem;
    color: var(--mst-muted);
    margin-bottom: 8px;
}
.article-feed-preview .article-prose {
    font-size: 0.94rem;
    line-height: 1.55;
}
.article-feed-preview.article-newspaper .article-prose.article-news-grid {
    column-gap: 22px;
}
.article-feed-preview.article-newspaper .article-news-col-1 > p:first-of-type::first-letter {
    font-size: 2.6rem;
    padding: 2px 6px 0 0;
}
.article-feed-preview.article-newspaper .article-news-col-2 {
    padding-left: 12px;
    margin-left: -12px;
}
@media (max-width: 575px) {
    /* Phone-narrow feed cards: collapse the journal grid sooner. */
    .article-feed-preview.article-newspaper .article-prose.article-news-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .article-feed-preview.article-newspaper .article-news-col-2 {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        margin-top: 8px;
    }
}
.article-feed-preview.article-book {
    /* Loosen the chapter-page max-width so the card uses the column it has. */
    max-width: 100%;
    padding: 0;
}
.article-feed-preview.article-book .article-headline {
    font-size: 1.4rem !important;
}
.article-feed-preview.article-book .article-prose > p:first-of-type::first-letter {
    font-size: 2.2rem;
}
.article-feed-preview .article-image { margin-bottom: 10px; }
.article-feed-preview .art-img-h-2 img,
.article-feed-preview .art-img-h-3 img,
.article-feed-preview .art-img-h-4 img,
.article-feed-preview .art-img-h-5 img,
.article-feed-preview .art-img-h-6 img,
.article-feed-preview .art-img-h-7 img,
.article-feed-preview .art-img-h-8 img {
    /* On the feed, very tall thumbs would dominate the card — clamp height. */
    max-height: 220px;
}

/* Lightweight toast (Share link copy feedback, etc.) */
.kron-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 12px);
    background: rgba(20,20,20,0.92);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    opacity: 0;
    z-index: 2000;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}
.kron-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Comment like button — small heart that fills when active */
.btn-comment-like {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    color: var(--mst-muted);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s ease, transform 0.08s ease;
}
.btn-comment-like svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.btn-comment-like:hover { color: #d6336c; }
.btn-comment-like:active { transform: scale(1.15); }
.btn-comment-like.is-liked { color: #d6336c; }
.btn-comment-like.is-liked svg { fill: currentColor; stroke: currentColor; }
.btn-comment-like .comment-like-count { font-weight: 500; }
.btn-comment-like:not(.is-liked) .comment-like-count:empty { display: none; }

/* Translate button feedback */
.btn-translate-post { transition: color .15s ease, opacity .15s ease; }
.btn-translate-post.is-loading { opacity: 0.55; pointer-events: none; }
.btn-translate-post.is-loading svg { animation: kron-pulse 900ms ease-in-out infinite; }
.btn-translate-post.is-translated,
.btn-translate-post.is-translated svg { color: var(--mst-primary); }
@keyframes kron-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Split-button caret next to the translate icon — narrow, borderless. */
.translate-group .dropdown-toggle-split {
    padding: 0 6px;
    min-width: 0;
    line-height: 1;
}
.translate-group .dropdown-toggle-split::after {
    margin-left: 0;
    border-top-color: currentColor;
    opacity: 0.6;
}
.translate-group .dropdown-toggle-split:hover::after { opacity: 1; }
.translate-menu {
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    /* Solid background + ring so it reads clearly over busy content. */
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    /* Escape the action-bar's local stacking context (z-index:3) so the menu
       paints above following cards on the feed. */
    z-index: 2100;
}
[data-theme="dark"] .translate-menu {
    background-color: #1d2627;
    color: #e5e5e5;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.translate-menu .dropdown-header { color: var(--mst-muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.translate-menu .dropdown-item { color: inherit; }
.translate-menu .dropdown-item:hover,
.translate-menu .dropdown-item:focus { background-color: rgba(15, 100, 102, 0.10); color: inherit; }
[data-theme="dark"] .translate-menu .dropdown-item:hover,
[data-theme="dark"] .translate-menu .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); }

/* Guided product tour */
.kron-tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1900;
    pointer-events: auto;
}
.kron-tour-popup {
    background: #fff;
    color: #1a1a1a;
    border-radius: 12px;
    padding: 16px 18px 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.35);
    width: min(360px, calc(100vw - 24px));
    z-index: 2000;
    font-size: 0.92rem;
    line-height: 1.5;
}
[data-theme="dark"] .kron-tour-popup {
    background: #1e2425;
    color: #e5e5e5;
    box-shadow: 0 14px 40px rgba(0,0,0,0.6);
}
.kron-tour-popup .kron-tour-counter {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mst-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.kron-tour-popup .kron-tour-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
}
.kron-tour-popup .kron-tour-body {
    margin-bottom: 14px;
    white-space: pre-wrap;
}
.kron-tour-popup .kron-tour-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.kron-tour-popup .kron-tour-skip {
    color: var(--mst-muted);
    text-decoration: none;
}
.kron-tour-popup .kron-tour-skip:hover { color: var(--mst-primary); }

/* Spotlight ring on the anchored element. !important beats inline z-index on
   existing elements (e.g. the feed action bar uses style="z-index:3"). */
.kron-tour-highlight {
    position: relative !important;
    z-index: 1950 !important;
    box-shadow: 0 0 0 3px var(--mst-accent, #f0c040), 0 0 18px 4px rgba(240,192,64,0.55);
    border-radius: 8px;
    transition: box-shadow 180ms ease;
}
/* The navbar creates its own stacking context at z-index:1040, so step 7's
   anchor would otherwise sit below the overlay. Lift the whole navbar above
   the overlay whenever the tour is active. */
body.kron-tour-active .navbar { z-index: 1960; }

/* Start Here (/Home/GettingStarted) */
.gs-page {
    max-width: 920px;
    margin: 0 auto;
    padding-bottom: 3rem;
}
.gs-hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
}
.gs-hero-kicker {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mst-accent);
    margin-bottom: 0.5rem;
}
.gs-hero-title {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
    color: var(--mst-text, #1a1a1a);
}
.gs-hero-sub {
    color: var(--mst-muted);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 640px;
    margin: 0 auto;
}

.gs-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0 2.5rem;
}
@media (max-width: 720px) {
    .gs-paths { grid-template-columns: 1fr; }
}
.gs-path-card {
    position: relative;
    text-align: left;
    background: var(--mst-surface, #fff);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 1.5rem 1.4rem 1.25rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
    overflow: hidden;
}
.gs-path-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,100,102,0.04), transparent 60%);
    pointer-events: none;
}
.gs-path-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.10);
    border-color: var(--mst-accent);
}
.gs-path-card:focus-visible {
    outline: 3px solid var(--mst-accent);
    outline-offset: 2px;
}
.gs-path-kicker {
    position: relative;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 0.9rem;
}
.gs-path-why .gs-path-kicker {
    background: rgba(240,192,64,0.18);
    color: #8a6b1e;
}
.gs-path-how .gs-path-kicker {
    background: rgba(15,100,102,0.14);
    color: var(--mst-primary);
}
.gs-path-title {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: -0.005em;
    margin: 0 0 0.55rem;
    color: var(--mst-text, #1a1a1a);
    position: relative;
}
.gs-path-body {
    color: var(--mst-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1rem;
    position: relative;
}
.gs-path-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
}
.gs-path-length {
    font-size: 0.8rem;
    color: var(--mst-muted);
}
.gs-path-cta {
    font-weight: 600;
    color: var(--mst-primary);
    font-size: 0.92rem;
}
.gs-path-card:hover .gs-path-cta { color: var(--mst-primary-2, #0d5a5c); }

/* Feature grid */
.gs-section-title {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 1.6rem;
    text-align: center;
    margin: 0 0 1.25rem;
    color: var(--mst-text, #1a1a1a);
}
.gs-features { margin-bottom: 2.5rem; }
.gs-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 900px) { .gs-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gs-feature-grid { grid-template-columns: 1fr; } }
.gs-feature {
    display: flex;
    gap: 0.8rem;
    padding: 1rem;
    background: var(--mst-surface, #fff);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
}
.gs-feature-icon {
    flex: 0 0 auto;
    font-size: 1.4rem;
    line-height: 1;
}
.gs-feature h4 {
    margin: 0 0 0.2rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--mst-text, #1a1a1a);
}
.gs-feature p {
    margin: 0;
    color: var(--mst-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.gs-final {
    text-align: center;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(0,0,0,0.06);
}

/* Dark-mode tweaks */
[data-theme="dark"] .gs-path-card,
[data-theme="dark"] .gs-feature {
    background: var(--mst-surface-2, #1d2627);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
[data-theme="dark"] .gs-path-card:hover {
    box-shadow: 0 14px 32px rgba(0,0,0,0.5);
}
[data-theme="dark"] .gs-final { border-top-color: rgba(255,255,255,0.08); }

.post-edited-note {
    font-size: 0.72rem;
    color: var(--mst-muted);
    font-style: italic;
    letter-spacing: 0.01em;
}

/* Post body */
.post-body {
    white-space: pre-wrap;
    line-height: 1.65;
    font-size: 1rem;
    color: var(--mst-text);
}
.post-body p { margin-bottom: 0.8em; }

/* Badge tweaks */
.bg-success-subtle {
    background-color: var(--mst-light) !important;
}

/* Footer — single elegant line of links + a quiet copyright row */
.footer {
    background-color: transparent;
    color: var(--mst-muted);
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 0.78rem;
}
.footer a { color: var(--mst-muted); text-decoration: none; }
.footer a:hover { color: var(--mst-primary); text-decoration: none; }
.footer-fine {
    letter-spacing: 0.01em;
}
.footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    column-gap: 14px;
    row-gap: 6px;
}
.footer-brand { color: var(--mst-text); font-weight: 600; }
.footer-sep { color: rgba(0,0,0,0.20); user-select: none; }
[data-theme="dark"] .footer-sep { color: rgba(255,255,255,0.18); }
.footer-bottom {
    margin-top: 6px;
    font-size: 0.72rem;
    opacity: 0.75;
}
.footer-bottom .footer-sep { margin: 0 6px; }

/* Navbar — deep teal bar, sticky at top */
.navbar {
    background: linear-gradient(180deg, var(--mst-primary) 0%, var(--mst-primary-2) 100%) !important;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    box-shadow: 0 2px 8px rgba(15,100,102,0.25) !important;
    position: sticky;
    top: 0;
    z-index: 1040;
}
header { position: sticky; top: 0; z-index: 1040; }
[data-theme="dark"] .navbar {
    background: linear-gradient(180deg, #0a2a2b 0%, #061a1b 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.navbar-brand-ks {
    color: #fff !important;
    font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.02em;
    font-size: 2rem !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    line-height: 1;
}
.navbar-brand-ks img { height: 48px !important; width: auto; }

.nav-link-gold {
    color: #fff !important;
    font-weight: 500;
}
.nav-link-gold svg { color: #fff !important; stroke: #fff !important; }
.nav-link-gold:hover,
.nav-link-gold:focus { color: var(--mst-accent) !important; }
.nav-link-gold:hover svg,
.nav-link-gold:focus svg { color: var(--mst-accent) !important; stroke: var(--mst-accent) !important; }
.nav-link-gold:hover .nav-icon-label,
.nav-link-gold:focus .nav-icon-label { color: var(--mst-accent) !important; }
.nav-icon-label {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: #fff !important;
    font-weight: 500;
}

/* Navbar user dropdown name white */
.navbar .nav-link.dropdown-toggle,
.navbar .nav-link.dropdown-toggle.nav-link-gold { color: #fff !important; }
.navbar .nav-link.dropdown-toggle::after { color: #fff !important; border-top-color: #fff !important; }

/* Start Here button: white outline on teal navbar */
.navbar .btn-outline-primary {
    color: #fff !important;
    border-color: #fff !important;
    background: transparent;
}
.navbar .btn-outline-primary:hover,
.navbar .btn-outline-primary:focus {
    background: #fff;
    color: var(--mst-primary) !important;
    border-color: #fff !important;
}

/* Navbar icon buttons (theme toggle, tips) — outlined on teal */
.navbar .btn-outline-secondary {
    color: #fff;
    border-color: rgba(255,255,255,0.35);
    background: transparent;
}
.navbar .btn-outline-secondary:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}
.navbar .btn-outline-primary {
    color: #fff;
    border-color: var(--mst-accent);
    background: transparent;
}
.navbar .btn-outline-primary:hover {
    background: var(--mst-accent);
    border-color: var(--mst-accent);
    color: var(--mst-ink);
}
.navbar .dropdown-toggle::after { color: rgba(255,255,255,0.7); }
.navbar .navbar-toggler { border-color: rgba(255,255,255,0.4); }
.navbar .navbar-toggler-icon { filter: invert(1) brightness(1.5); }

/* Mobile navbar: user dropdown always visible on the top bar; the collapsed
   menu lays nav items out as wrapping rows rather than a tall column. */
@media (max-width: 767.98px) {
    .navbar .navbar-mobile-user .nav-link.dropdown-toggle {
        padding: 0.25rem 0.5rem;
        font-weight: 600;
        border: 1px solid rgba(255,255,255,0.35);
        border-radius: 999px;
        line-height: 1.1;
    }
    .navbar .navbar-mobile-user .dropdown-menu { right: 0; left: auto; }

    .navbar-collapse .nav-main-icons {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        row-gap: 0.25rem;
    }
    .navbar-collapse .nav-main-icons .nav-item { flex: 0 0 auto; }
    .navbar-collapse .nav-main-icons .nav-link { padding: 0.4rem 0.5rem !important; }
    .navbar-collapse .nav-main-icons .nav-icon-label { font-size: 0.7rem; }

    .navbar-collapse .nav-utility {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem !important;
        width: 100%;
        margin: 0.5rem 0 0 !important;
    }
    .navbar-collapse .nav-utility .nav-item { margin: 0; }
}

/* Relationship tier dot (shared between sidebar + visibility selectors) */
.tier-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}
/* Visibility select: color each option by tier */
select.visibility-select option[value="Public"]         { color: var(--tier-public); }
select.visibility-select option[value="Acquaintances"]  { color: var(--tier-acquaintances); }
select.visibility-select option[value="Friends"]        { color: var(--tier-friends); }
select.visibility-select option[value="Family"]         { color: var(--tier-family); }
select.visibility-select option[value="Private"]        { color: var(--tier-private); }

/* Tag bubbles */
.tag-bubble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--mst-light);
    color: var(--mst-primary);
    border: 1px solid var(--mst-accent);
    border-radius: 20px;
    padding: 4px 10px 4px 12px;
    font-size: 0.85rem;
    font-weight: 500;
}
.tag-bubble button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--mst-muted);
    font-size: 1rem;
    line-height: 1;
}
.tag-bubble button:hover { color: #dc3545; }

/* Gold nav links */
.nav-link-gold {
    color: var(--mst-gold) !important;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: color 0.15s;
}
.nav-link-gold:hover,
.nav-link-gold:focus {
    color: var(--mst-gold-light) !important;
}

/* Icon + label nav style */
.nav-icon-label {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-top: 2px;
    text-transform: uppercase;
    line-height: 1;
}

/* Navbar dropdown fix */
.dropdown-item:active {
    background-color: var(--mst-primary);
}

/* ── Full-page landing background ── */
body.landing-body {
    background:
        radial-gradient(ellipse 80% 50% at 80% 0%, rgba(184,135,26,0.20) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 10% 90%, rgba(15,100,102,0.40) 0%, transparent 60%),
        linear-gradient(160deg, #0a1f24 0%, #0e2e34 45%, #061a1d 100%);
    background-attachment: fixed;
    margin-bottom: 0;
    color: #f4f1e6;
}

/* Auth pages — clean white canvas with a subtle teal corner accent */
body.auth-body {
    background:
        radial-gradient(circle at 100% 0%, rgba(15,100,102,0.06) 0%, transparent 35%),
        radial-gradient(circle at 0% 100%, rgba(184,135,26,0.05) 0%, transparent 30%),
        #ffffff;
    background-attachment: fixed;
    color: var(--mst-text);
}

.auth-wrap { min-height: calc(100vh - 200px); display: flex; align-items: center; }
.auth-card {
    background: #ffffff;
    border: 1px solid var(--mst-border);
    border-radius: 18px;
    box-shadow: 0 12px 40px -12px rgba(15,100,102,0.18), 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}
.auth-title {
    font-family: var(--mst-font-serif);
    color: var(--mst-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.85rem;
}
.auth-sub { color: var(--mst-muted); font-size: 0.95rem; }
.auth-card .form-label { font-size: 0.82rem; font-weight: 600; color: var(--mst-text); }
.auth-card .btn-primary {
    background: linear-gradient(135deg, var(--mst-primary) 0%, var(--mst-primary-2) 100%);
    border: none;
    border-radius: 12px;
    padding: 0.7rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(15,100,102,0.35);
}
.auth-card .btn-primary:hover { box-shadow: 0 6px 24px rgba(15,100,102,0.5); }
body.landing-body header,
body.landing-body .footer {
    display: none !important;
}
body.landing-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 22% 18%, rgba(45,212,191,0.10) 0%, transparent 38%),
        radial-gradient(circle at 78% 72%, rgba(232,128,91,0.06) 0%, transparent 42%);
    pointer-events: none;
    z-index: 0;
}
body.landing-body > * { position: relative; z-index: 1; }

.landing-page-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.footer-landing {
    background: rgba(0,0,0,0.35) !important;
    color: rgba(255,255,255,0.5) !important;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 0 !important;
}

/* ── Hero ── */
.landing-hero {
    padding: 4rem 1.5rem 3rem;
}
.hero-logo {
    height: 200px;
    width: auto;
    filter: drop-shadow(0 4px 32px rgba(201,162,39,0.5));
}
.hero-title {
    font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
    font-size: clamp(2.8rem, 6vw, 4.4rem);
    font-weight: 700;
    font-style: italic;
    background: linear-gradient(135deg, #f4d97e 0%, #e8c25a 50%, #d4a84a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0.01em;
    margin-bottom: 0;
    line-height: 1;
    filter: drop-shadow(0 2px 14px rgba(212,168,74,0.25));
}
.landing-hero .hero-headline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    color: rgba(244,241,230,0.98);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    letter-spacing: -0.005em;
    margin: 0 auto;
    max-width: 820px;
    line-height: 1.3;
    text-shadow: 0 2px 18px rgba(45,212,191,0.22);
}
.landing-hero .tagline {
    color: rgba(244,241,230,0.6);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 0.4rem;
}
.hero-lead {
    color: rgba(244,241,230,0.78);
    font-size: 1.1rem;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: 400;
}
.btn-hero-gold {
    background: linear-gradient(135deg, #f4d97e 0%, #d4a84a 100%);
    color: #0a1f24;
    border: none;
    box-shadow: 0 6px 22px rgba(212,168,74,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
    font-weight: 600;
    border-radius: 12px;
    padding: 0.85rem 2.2rem;
    transition: box-shadow 0.2s, transform 0.18s;
}
.btn-hero-gold:hover {
    box-shadow: 0 10px 32px rgba(212,168,74,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
    transform: translateY(-2px);
    color: #0a1f24;
}
.btn-hero-outline {
    color: rgba(244,241,230,0.95);
    border: 1.5px solid rgba(244,241,230,0.35);
    background: rgba(244,241,230,0.04);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 0.85rem 2.2rem;
    font-weight: 500;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-hero-outline:hover {
    border-color: rgba(45,212,191,0.7);
    color: #2dd4bf;
    background: rgba(45,212,191,0.08);
}

/* ── Quill Script ── */
.quill-section {
    padding: 4rem 1.5rem 3rem;
    flex: 1;
}
.quill-stage {
    display: inline-block;
    min-height: 3.5rem;
    transition: opacity 0.6s ease;
}
.quill-stage.quill-fade-out {
    opacity: 0;
}
.quill-text {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-style: italic;
    font-weight: 500;
    color: rgba(244,241,230,0.92);
    letter-spacing: 0.005em;
    line-height: 1.4;
    text-shadow: 0 2px 16px rgba(45,212,191,0.18);
}

/* ── Bottom image + Celtic frame ── */
.landing-bottom-img-wrap {
    padding: 0 2rem 4rem;
    margin: 0 auto;
    box-sizing: border-box;
}
.landing-bottom-img {
    max-width: 100%;
    width: 100%;
    display: block;
}

.landing-inline-footer {
    padding: 2rem 0 2.5rem;
    color: rgba(255,255,255,0.35);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

/* Celtic golden frame */
.celtic-frame {
    position: relative;
    display: inline-block;
    width: 100%;
    border: 3px double var(--mst-gold);
    box-shadow:
        0 0 0 1px rgba(201,162,39,0.2),
        0 0 0 7px rgba(9,26,15,0.9),
        0 0 0 10px var(--mst-gold),
        0 0 0 12px rgba(201,162,39,0.3),
        0 0 0 18px rgba(9,26,15,0.7),
        0 0 0 20px rgba(201,162,39,0.15),
        0 12px 50px rgba(0,0,0,0.7);
    padding: 10px;
    background: rgba(9,26,15,0.4);
}
/* Celtic corner shamrocks */
.cf-corner {
    position: absolute;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--mst-gold);
    text-shadow: 0 0 10px rgba(201,162,39,0.8), 0 0 20px rgba(201,162,39,0.4);
    z-index: 2;
}
.cf-tl { top: -22px;  left: -22px;  transform: rotate(0deg); }
.cf-tr { top: -22px;  right: -22px; transform: rotate(90deg); }
.cf-br { bottom: -22px; right: -22px; transform: rotate(180deg); }
.cf-bl { bottom: -22px; left: -22px;  transform: rotate(270deg); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--mst-bg); }
::-webkit-scrollbar-thumb { background: var(--mst-accent); border-radius: 4px; }

/* ── 3-column layout: left ~17.5%, center ~50%, right ~32.5% ── */
@media (min-width: 768px) {
    .col-sidebar {
        align-self: flex-start;
    }
    /* Left sidebar (first in row) */
    .row > .col-sidebar:first-child {
        flex: 0 0 17.5% !important;
        width: 17.5% !important;
        max-width: 17.5% !important;
    }
    /* Right sidebar (last in row) */
    .row > .col-sidebar:last-child {
        flex: 0 0 22.5% !important;
        width: 22.5% !important;
        max-width: 22.5% !important;
    }
    .col-main {
        flex: 0 0 60% !important;
        width: 60% !important;
        max-width: 60% !important;
    }
}

/* ── Chronological Timeline ── */
.timeline-year-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.5rem 0 1rem;
}

.timeline-line-segment {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mst-accent) 20%, var(--mst-accent) 80%, transparent);
    border-radius: 2px;
    opacity: 0.55;
}

.timeline-year-badge {
    background: var(--mst-card);
    color: var(--mst-primary);
    border: 1px solid var(--mst-accent);
    border-radius: 20px;
    padding: 4px 16px;
    font-family: 'Georgia', 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(184, 135, 26, 0.18);
    letter-spacing: 0.02em;
}

/* ── Post media: fixed 16:9 aspect ratio spanning full column ── */
.post-media-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}
.post-media-wrap img,
.post-media-wrap video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Inline pasted images in the body textarea preview */
.pasted-img-preview {
    max-width: 100%;
    border-radius: 6px;
    margin-top: 8px;
    display: block;
}

/* ============================================
   Quick Story — clean modern composer
   ============================================ */
.quick-story-card {
    position: relative;
    background: var(--mst-card) !important;
    border: 2px solid var(--mst-accent) !important;
    border-radius: var(--mst-radius) !important;
    box-shadow:
        0 6px 20px -8px rgba(184,135,26,0.25),
        var(--mst-shadow) !important;
    overflow: visible !important;
    margin-top: 14px !important;
}
/* Inline replacement for the old floating pseudo-element label. Reads
   cleanly in dark mode and doesn't fight the card's stacking context. */
.quick-story-tag {
    display: inline-block;
    background: var(--mst-accent);
    color: #fff;
    font-family: var(--mst-font-sans);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 1px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(184,135,26,0.20);
}
.quick-story-card .card-body { padding: 14px 16px !important; }

/* ============================================
   Full Story page-style editor
   ============================================ */
.story-page {
    position: relative;
    background: #fffefa;
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius);
    box-shadow:
        0 1px 0 rgba(0,0,0,0.04),
        0 12px 36px -16px rgba(15,100,102,0.18);
    padding: 36px 48px 60px;
    min-height: 520px;
}
[data-theme="dark"] .story-page {
    background: #1b2130;
}
@@media (max-width: 600px) {
    .story-page { padding: 24px 18px 56px; }
}

.story-title-input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--mst-font-serif);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--mst-ink);
    padding: 2px 0 6px;
    outline: none;
    border-bottom: 1px dashed transparent;
    margin-bottom: 10px;
}
.story-title-input::placeholder { color: var(--mst-muted); font-style: italic; }
.story-title-input:focus { border-bottom-color: var(--mst-border); }

.story-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 14px;
    padding: 4px;
    background: var(--mst-surface-2);
    border-radius: 8px;
    width: fit-content;
}
.story-tool {
    background: transparent;
    border: none;
    color: var(--mst-text);
    width: 32px;
    height: 30px;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color .1s ease;
}
.story-tool:hover { background: var(--mst-card); }
.story-tool-sep {
    width: 1px;
    background: var(--mst-border);
    margin: 4px 4px;
}

.story-editor {
    min-height: 360px;
    outline: none;
    font-family: 'Georgia', 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--mst-text);
    padding: 4px 2px;
}
.story-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--mst-muted);
    font-style: italic;
    pointer-events: none;
}
.story-editor h2 {
    font-family: var(--mst-font-serif);
    font-size: 1.4rem;
    margin: 16px 0 6px;
    color: var(--mst-ink);
}
.story-editor blockquote {
    border-left: 3px solid var(--mst-accent);
    padding: 4px 14px;
    background: rgba(184,135,26,0.05);
    margin: 12px 0;
    font-style: italic;
}
.story-editor p { margin: 8px 0 12px; }
.story-editor img { max-width: 100%; border-radius: 8px; margin: 8px 0; display: block; }

.story-page-actions {
    position: absolute;
    top: 28px;
    right: 24px;
    display: flex;
    gap: 8px;
}
.story-action-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(15,100,102,0.1);
    border: 1.5px solid var(--mst-primary);
    color: var(--mst-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background .12s ease, transform .1s ease, box-shadow .12s ease;
    box-shadow: 0 2px 6px rgba(15,100,102,0.15);
}
.story-action-btn:hover {
    color: #fff;
    background: var(--mst-primary);
    border-color: var(--mst-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15,100,102,0.32);
}
.story-action-btn svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
/* Music variant — gold-tinted */
.story-action-btn[data-bs-target*="Music"] {
    background: rgba(234,179,8,0.14);
    border-color: var(--mst-accent);
    color: var(--mst-accent-2);
    box-shadow: 0 2px 6px rgba(234,179,8,0.18);
}
.story-action-btn[data-bs-target*="Music"]:hover {
    background: var(--mst-accent);
    border-color: var(--mst-accent);
    color: var(--mst-ink);
    box-shadow: 0 6px 16px rgba(234,179,8,0.35);
}
.story-action-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--mst-accent);
    color: var(--mst-ink);
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
    line-height: 1.2;
}

.story-meta {
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius-sm);
    padding: 12px 14px;
}

/* Tooltips: white text on teal, narrow, force above the icon */
.tooltip { z-index: 1090 !important; }
.tooltip .tooltip-inner {
    background: rgba(15,100,102,0.96) !important;
    color: #fff !important;
    font-size: 0.72rem;
    padding: 4px 9px;
    border-radius: 8px;
    white-space: nowrap;
    max-width: 240px;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: rgba(15,100,102,0.96) !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: rgba(15,100,102,0.96) !important;
}

/* ============================================
   Sidebar rail — flatter visual hierarchy
   ============================================ */
.rail-section {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius);
    box-shadow: var(--mst-shadow-sm);
}
.rail-head {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mst-muted);
    font-weight: 700;
    margin-bottom: 8px;
}
.rail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rail-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--mst-text);
    text-decoration: none;
    font-size: 0.86rem;
    transition: background-color .12s ease;
}
.rail-link:hover { background: var(--mst-surface-2); color: var(--mst-text); }
.rail-list-divider { border-top: 1px solid var(--mst-border); margin-top: 6px; padding-top: 6px; }
.rail-friend-link { gap: 10px; }
.rail-friend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-tag {
    flex-shrink: 0;
    font-size: 0.66rem;
    color: var(--mst-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    background: var(--mst-surface-2);
    border-radius: 999px;
    padding: 1px 7px;
}
.rail-tag-online {
    background: rgba(34,197,94,0.15);
    color: #16a34a;
    font-weight: 600;
}
.rail-week-pill {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--mst-primary);
    background: rgba(15,100,102,0.1);
    border-radius: 999px;
    padding: 1px 7px;
}
.rail-footer-link {
    display: block;
    text-align: right;
    font-size: 0.76rem;
    color: var(--mst-primary);
    padding: 6px 4px 0;
    text-decoration: none;
}
.rail-footer-link:hover { color: var(--mst-primary-2); text-decoration: underline; }
.rail-empty { font-size: 0.8rem; color: var(--mst-muted); padding: 0 4px; }

/* Collapsible rail sections (My Network, Recently Active, Tips) */
.rail-collapsible summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 6px;
}
.rail-collapsible summary::-webkit-details-marker { display: none; }
.rail-collapsible summary::before {
    content: "▾";
    font-size: 0.7rem;
    color: var(--mst-muted);
    width: 10px;
    transition: transform .15s ease;
    display: inline-block;
}
.rail-collapsible:not([open]) summary::before { transform: rotate(-90deg); }
.rail-collapsible summary:hover { background: var(--mst-surface-2); }

/* Tips & Announcements rail card */
.rail-tips-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rail-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 6px;
    font-size: 0.78rem;
    line-height: 1.35;
}
.rail-tip-text { color: var(--mst-text); }

/* Compose card — emphasized (overrides default rail-section bg) */
.rail-compose {
    background: linear-gradient(135deg, rgba(15,100,102,0.08), rgba(234,179,8,0.06)) !important;
    padding: 12px !important;
}
.rail-compose-primary {
    background: var(--mst-primary) !important;
    color: #fff !important;
    border-color: var(--mst-primary) !important;
}

/* On This Day card — soft tinted (overrides default rail-section bg) */
.rail-on-this-day {
    background: linear-gradient(135deg, rgba(15,100,102,0.06), rgba(234,179,8,0.08)) !important;
    border-left: 3px solid var(--mst-accent) !important;
}
.rail-otd-row { font-size: 0.82rem; line-height: 1.35; margin-bottom: 6px; }
.rail-otd-row:last-child { margin-bottom: 0; }
.rail-otd-year {
    display: inline-block;
    font-size: 0.66rem;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    color: var(--mst-muted);
    border-radius: 999px;
    padding: 1px 8px;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rail-otd-link { color: var(--mst-text); text-decoration: none; font-weight: 500; }
.rail-otd-link:hover { color: var(--mst-primary); text-decoration: underline; }

/* Today's Prompt / Announcement card (shared base) */
.rail-prompt {
    border-left: 4px solid var(--mst-primary) !important;
}
.rail-prompt-gold { border-left-color: var(--mst-accent) !important; }
.rail-prompt-teal { border-left-color: var(--mst-primary) !important; }

/* Rotator card: fixed-size box, JS auto-fits text inside. */
.rail-rotator {
    border-left: 4px solid var(--mst-primary) !important;
    transition: opacity .22s ease, border-color .22s ease;
    height: 170px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.rail-rotator.rail-rotator-fading { opacity: 0; }
.rail-rotator:has(.tips-badge-prompt)  { border-left-color: var(--mst-accent) !important; }
.rail-rotator:has(.tips-badge-warning) { border-left-color: #ef4444 !important; }
.rail-rotator:has(.tips-badge-new)     { border-left-color: var(--mst-accent) !important; }
.rail-rotator-badge { display: inline-block; align-self: flex-start; flex-shrink: 0; }
.rail-rotator-text {
    flex-grow: 1;
    margin: 8px 0 4px !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    line-height: 1.4;
    /* font-size set dynamically by JS to fit; default starting size: */
    font-size: 0.92rem;
}
.rail-rotator-btn { align-self: flex-start; flex-shrink: 0; }
.rail-prompt-text {
    font-family: var(--mst-font-serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--mst-text);
    line-height: 1.4;
    margin-bottom: 8px;
}
.rail-prompt-btn {
    display: inline-block;
    background: var(--mst-accent);
    color: var(--mst-ink);
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background-color .12s ease;
}
.rail-prompt-btn:hover { background: var(--mst-accent-2); color: #fff; }

/* Coming Soon (collapsed by default) */
.rail-coming summary {
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 8px;
    user-select: none;
}
.rail-coming summary::-webkit-details-marker { display: none; }
.rail-coming summary::before {
    content: "▸ ";
    color: var(--mst-muted);
    transition: transform .15s ease;
    display: inline-block;
}
.rail-coming[open] summary::before { content: "▾ "; }
.rail-coming summary:hover { background: var(--mst-surface-2); }
.rail-coming-body { padding: 0 6px 4px; }
.rail-coming-sub {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mst-primary);
    font-weight: 700;
    margin-bottom: 4px;
}
.rail-coming-list {
    list-style: none;
    padding: 0;
    margin: 0 0 6px;
    font-size: 0.78rem;
    color: var(--mst-text);
}
.rail-coming-list li { padding: 3px 4px; border-bottom: 1px solid var(--mst-border); }
.rail-coming-list li:last-child { border-bottom: none; }

/* Ko-fi tip jar — warm, subtle card that sits just before Coming Soon */
.rail-kofi { text-align: center; }
.rail-kofi-head {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mst-text);
    margin-bottom: 8px;
}
.rail-kofi-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ff5e5b;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 7px 14px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(255, 94, 91, 0.35);
    transition: background 0.15s ease, transform 0.15s ease;
}
.rail-kofi-btn:hover {
    background: #e85451;
    color: #fff !important;
    transform: translateY(-1px);
}
.rail-kofi-cup { font-size: 1rem; line-height: 1; }
.rail-kofi-sub {
    font-size: 0.72rem;
    color: var(--mst-muted);
    margin: 8px 0 0;
}

/* Centered single-column main content */
.col-main {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.col-sidebar {
    min-width: 240px;
    padding-right: 8px;
}
.col-sidebar .card {
    box-shadow: none;
}

/* Floating feedback button (legacy class — kept in case any page outside
   the layout still references it). */
.feedback-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mst-primary);
    color: #fff;
    border: none;
    box-shadow: var(--mst-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1030;
    transition: transform .12s ease, background-color .12s ease;
}
.feedback-fab:hover { background: var(--mst-primary-2); transform: translateY(-2px); }
.feedback-fab svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Floating chat dock ────────────────────────────────────────────────
   The bubble (.chat-fab) anchors to the bottom-right; clicking it slides
   open the .chat-dock panel as a visual extension of the bubble. The
   dock contains a pinned "feedback to admin" composer at the top and
   the user's recent conversations below — same data the inbox shows,
   tightened for a corner overlay.                                     */
.chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mst-primary);
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040;
    cursor: pointer;
    transition: transform .12s, background-color .12s, box-shadow .12s;
}
.chat-fab:hover {
    background: var(--mst-primary-2, var(--mst-secondary));
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}
.chat-fab[aria-expanded="true"] {
    background: var(--mst-primary-2, var(--mst-secondary));
}
.chat-fab svg {
    width: 26px; height: 26px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.chat-fab-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 22px; height: 22px;
    border-radius: 999px;
    background: #d54545;
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    display: flex; align-items: center; justify-content: center;
    padding: 0 6px;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.chat-dock {
    position: fixed;
    right: 24px;
    bottom: 96px;
    width: 360px;
    max-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--mst-border);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
    z-index: 1039;
    overflow: hidden;
    animation: chat-dock-pop 0.18s ease-out;
    transform-origin: bottom right;
}
[data-theme="dark"] .chat-dock {
    background: #1d1b16;
    border-color: rgba(217,212,197,0.18);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
@keyframes chat-dock-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.chat-dock-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mst-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
}
[data-theme="dark"] .chat-dock-header {
    background: linear-gradient(180deg, rgba(34,31,23,0.95), rgba(34,31,23,0.8));
}
.chat-dock-title {
    flex: 1;
    font-weight: 700;
    color: var(--mst-primary);
    font-size: 1rem;
}
.chat-dock-open-all {
    color: var(--mst-muted);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
}
.chat-dock-open-all:hover { color: var(--mst-primary); }
.chat-dock-close {
    background: none;
    border: none;
    color: var(--mst-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 4px;
}
.chat-dock-close:hover { color: var(--mst-text); }

/* Pinned feedback row at the top — collapsible composer */
.chat-dock-feedback {
    border-bottom: 1px solid var(--mst-border);
    background: rgba(160,110,60,0.06);
}
[data-theme="dark"] .chat-dock-feedback { background: rgba(217,199,154,0.07); }
.chat-dock-feedback-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.chat-dock-feedback-row:hover { background: rgba(160,110,60,0.10); }
[data-theme="dark"] .chat-dock-feedback-row:hover { background: rgba(217,199,154,0.10); }
.chat-dock-feedback-icon { font-size: 1.4rem; flex-shrink: 0; }
.chat-dock-feedback-label {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.chat-dock-feedback-title { font-weight: 600; font-size: 0.92rem; color: var(--mst-text); }
.chat-dock-feedback-sub { color: var(--mst-muted); font-size: 0.74rem; }
.chat-dock-chevron {
    color: var(--mst-muted);
    transition: transform .15s;
    font-size: 0.9rem;
}
.chat-dock-feedback-row[aria-expanded="true"] .chat-dock-chevron {
    transform: rotate(180deg);
}
.chat-dock-feedback-form {
    padding: 0 14px 12px 14px;
}
.chat-dock-feedback-form textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--mst-border);
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    resize: vertical;
    min-height: 70px;
    max-height: 180px;
    background: #fff;
    color: var(--mst-text);
}
[data-theme="dark"] .chat-dock-feedback-form textarea {
    background: #2a2620;
    border-color: rgba(217,212,197,0.18);
}
.chat-dock-feedback-form textarea:focus {
    outline: none;
    border-color: var(--mst-primary);
}
.chat-dock-feedback-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}
.chat-dock-feedback-status {
    font-size: 0.78rem;
    color: var(--mst-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-dock-feedback-send {
    background: var(--mst-primary);
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 6px 16px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}
.chat-dock-feedback-send:hover:not(:disabled) {
    background: var(--mst-primary-2, var(--mst-secondary));
}
.chat-dock-feedback-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Conversation list inside the dock */
.chat-dock-list {
    flex: 1 1 auto;
    overflow-y: auto;
    background: #fff;
}
[data-theme="dark"] .chat-dock-list { background: #1d1b16; }
.chat-dock-loading {
    padding: 20px;
    text-align: center;
    color: var(--mst-muted);
    font-size: 0.86rem;
}
.chat-dock-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--mst-muted);
}
.chat-dock-empty-icon { font-size: 2rem; opacity: 0.6; margin-bottom: 6px; }
.chat-dock-empty-title { font-weight: 600; color: var(--mst-text); font-size: 0.95rem; margin-bottom: 2px; }
.chat-dock-empty-sub { font-size: 0.82rem; }

.chat-dock-conv {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--mst-border);
    transition: background-color .12s;
}
.chat-dock-conv:last-child { border-bottom: none; }
.chat-dock-conv:hover { background: rgba(160,110,60,0.06); color: inherit; }
[data-theme="dark"] .chat-dock-conv:hover { background: rgba(217,199,154,0.07); }
.chat-dock-avatar { flex-shrink: 0; }
.chat-dock-avatar img,
.chat-dock-avatar-fallback {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mst-light, #f5efe6);
    color: var(--mst-primary);
    font-weight: 700;
    font-size: 0.78rem;
}
.chat-dock-conv-body { flex: 1 1 auto; min-width: 0; }
.chat-dock-conv-row1 {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.chat-dock-conv-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--mst-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-dock-conv.is-unread .chat-dock-conv-name {
    font-weight: 800;
    color: var(--mst-primary);
}
.chat-dock-conv-time {
    color: var(--mst-muted);
    font-size: 0.7rem;
    flex-shrink: 0;
}
.chat-dock-conv-preview {
    color: var(--mst-muted);
    font-size: 0.78rem;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-dock-conv.is-unread .chat-dock-conv-preview {
    color: var(--mst-text);
    font-weight: 600;
}
.chat-dock-conv-unread {
    background: var(--mst-primary);
    color: #fff;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    align-self: center;
}

.chat-dock-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--mst-border);
    background: #fafaf6;
    text-align: center;
}
[data-theme="dark"] .chat-dock-footer {
    background: rgba(255,255,255,0.03);
}
.chat-dock-new {
    color: var(--mst-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.86rem;
}
.chat-dock-new:hover { color: var(--mst-primary-2, var(--mst-secondary)); }

/* List/Thread panels live inside the same dock; only one is visible at a
   time. Both stretch to fill the dock between the header and the bottom
   edge so the inner sections (list / composer) scroll naturally. */
.chat-dock-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.chat-dock-panel-list { /* same baseline */ }
.chat-dock-panel-thread {
    background: #f7f5ef;
}
[data-theme="dark"] .chat-dock-panel-thread { background: #14110d; }

/* Thread-mode header — back arrow + small avatar + name + "expand to full
   page" + close. The list-mode header keeps its own simpler layout. */
.chat-dock-header-thread {
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
    gap: 8px;
}
[data-theme="dark"] .chat-dock-header-thread {
    background: linear-gradient(180deg, rgba(34,31,23,0.95), rgba(34,31,23,0.8));
}
.chat-dock-back {
    background: var(--mst-light, #f5efe6);
    color: var(--mst-primary);
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .12s;
}
.chat-dock-back:hover { background: rgba(160,110,60,0.20); }
.chat-dock-thread-avatar {
    flex-shrink: 0;
}
.chat-dock-thread-avatar img,
.chat-dock-thread-avatar-fallback {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mst-light, #f5efe6);
    color: var(--mst-primary);
    font-weight: 700;
    font-size: 0.74rem;
}
.chat-dock-thread-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: var(--mst-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
}
.chat-dock-thread-name:hover { color: var(--mst-primary); }
.chat-dock-thread-expand {
    color: var(--mst-muted);
    text-decoration: none;
    font-size: 1rem;
    padding: 0 4px;
}
.chat-dock-thread-expand:hover { color: var(--mst-primary); }

/* Scrolling thread inside the dock */
.chat-dock-thread {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 12px 4px 12px;
    background: #f7f5ef;
    background-image: radial-gradient(circle at 1px 1px, rgba(160,110,60,0.06) 1px, transparent 1px);
    background-size: 22px 22px;
}
[data-theme="dark"] .chat-dock-thread {
    background: #14110d;
    background-image: radial-gradient(circle at 1px 1px, rgba(217,199,154,0.05) 1px, transparent 1px);
}
.chat-dock-thread-empty {
    text-align: center;
    color: var(--mst-muted);
    padding: 30px 16px;
}
.chat-dock-thread-empty > div:first-child { font-size: 1.8rem; opacity: 0.6; margin-bottom: 6px; }

.chat-dock-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 8px;
}
.chat-dock-row.is-continuation { margin-top: -4px; }
.chat-dock-row.is-me { justify-content: flex-end; }
.chat-dock-row.is-them { justify-content: flex-start; }

.chat-dock-row-avatar {
    width: 26px; height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
}
.chat-dock-row-avatar img,
.chat-dock-row-avatar-fallback,
.chat-dock-row-avatar .chat-dock-thread-avatar-fallback {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mst-light, #f5efe6);
    color: var(--mst-primary);
    font-weight: 700;
    font-size: 0.66rem;
}
.chat-dock-row-bubblegroup {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    min-width: 0;
}
.chat-dock-row.is-me .chat-dock-row-bubblegroup { align-items: flex-end; }
.chat-dock-row.is-them .chat-dock-row-bubblegroup { align-items: flex-start; }
.chat-dock-bubble {
    padding: 7px 12px;
    border-radius: 16px;
    line-height: 1.4;
    font-size: 0.88rem;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.chat-dock-row.is-me .chat-dock-bubble {
    background: var(--mst-primary);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
}
.chat-dock-row.is-them .chat-dock-bubble {
    background: #fff;
    color: var(--mst-text);
    border: 1px solid var(--mst-border);
    border-radius: 16px 16px 16px 4px;
}
[data-theme="dark"] .chat-dock-row.is-them .chat-dock-bubble {
    background: #2a2620;
    border-color: rgba(217,212,197,0.15);
    color: var(--mst-text);
}
.chat-dock-row.is-continuation.is-me .chat-dock-bubble { border-radius: 16px 4px 4px 16px; }
.chat-dock-row.is-continuation.is-them .chat-dock-bubble { border-radius: 4px 16px 16px 4px; }
.chat-dock-row-time {
    font-size: 0.66rem;
    color: var(--mst-muted);
    margin-top: 2px;
    padding: 0 4px;
}
.chat-dock-row.is-continuation .chat-dock-row-time { display: none; }

/* Composer at the bottom of the inline thread */
.chat-dock-composer {
    flex-shrink: 0;
    padding: 8px 10px;
    border-top: 1px solid var(--mst-border);
    background: #fff;
    display: flex;
    gap: 6px;
    align-items: flex-end;
}
[data-theme="dark"] .chat-dock-composer { background: #1d1b16; }
.chat-dock-composer textarea {
    flex: 1;
    resize: none;
    border-radius: 18px;
    padding: 8px 14px;
    min-height: 36px;
    max-height: 120px;
    overflow-y: auto;
    border: 1px solid var(--mst-border);
    background: var(--mst-light, #f5efe6);
    color: var(--mst-text);
    font-size: 0.88rem;
    line-height: 1.4;
    transition: border-color .12s, background-color .12s;
}
.chat-dock-composer textarea:focus {
    outline: none;
    border-color: var(--mst-primary);
    background: #fff;
}
[data-theme="dark"] .chat-dock-composer textarea {
    background: #2a2620;
    border-color: rgba(217,212,197,0.15);
}
[data-theme="dark"] .chat-dock-composer textarea:focus {
    background: #322d24;
}
.chat-dock-send-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--mst-primary);
    color: #fff;
    font-size: 0.92rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .12s, transform .12s;
}
.chat-dock-send-btn:hover:not(:disabled) {
    background: var(--mst-primary-2, var(--mst-secondary));
    transform: translateY(-1px);
}
.chat-dock-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-dock-send-error {
    color: #b34141;
    font-size: 0.74rem;
    padding: 4px 12px 8px 12px;
    background: #fff;
}
[data-theme="dark"] .chat-dock-send-error { background: #1d1b16; }

/* Make the conversation rows in list mode look like real buttons (they
   used to be <a> tags). The list element rules expect block-level. */
.chat-dock-conv {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}
.chat-dock-conv:focus { outline: none; background: rgba(160,110,60,0.08); }

@media (max-width: 575px) {
    .chat-dock {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 84px;
        max-height: calc(100vh - 120px);
    }
    .chat-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
    .chat-fab svg { width: 24px; height: 24px; }
}

/* Tips popover (navbar dropdown) */
.tips-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mst-accent);
    box-shadow: 0 0 0 2px var(--mst-primary);
}
.tips-popover {
    min-width: 320px;
    max-width: 360px;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius);
    box-shadow: var(--mst-shadow-lg);
    overflow: hidden;
}
.tips-popover-head {
    font-family: var(--mst-font-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mst-accent-2);
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--mst-border);
    background: linear-gradient(135deg, rgba(184,135,26,0.08), rgba(15,100,102,0.06));
}
[data-theme="dark"] .tips-popover-head { color: var(--mst-accent); }
.tips-popover-list {
    list-style: none;
    padding: 10px 14px 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}
.tips-popover-list li {
    font-size: 0.82rem;
    color: var(--mst-text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.tips-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 1px;
}
.tips-badge-new     { background: var(--mst-accent); color: #fff; }
.tips-badge-info    { background: rgba(15,100,102,0.14); color: var(--mst-primary); }
.tips-badge-tip     { background: var(--mst-surface-2); color: var(--mst-muted); }
.tips-badge-warning { background: #fde8e8; color: #8b2020; }
.tips-badge-prompt  { background: var(--mst-accent); color: #fff; }

/* Feed media thumbnails on home cards */
.feed-media-grid {
    display: grid;
    gap: 4px;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 2 / 1;   /* height never exceeds half the width */
}
.feed-media-grid-1 { grid-template-columns: 1fr; }
.feed-media-grid-2 { grid-template-columns: 1fr 1fr; }
.feed-media-grid-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.feed-media-grid-3 .feed-media-thumb-btn:first-child { grid-row: span 2; }
.feed-media-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.feed-media-thumb-btn {
    position: relative;
    padding: 0;
    border: none;
    background: none;
    overflow: hidden;
    border-radius: var(--mst-radius-sm);
    cursor: pointer;
    height: 100%;
    min-height: 0;
}

.feed-media-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--mst-border);
    background: var(--mst-surface-2);
    border-radius: var(--mst-radius-sm);
    display: block;
}
.feed-media-more {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mst-radius-sm);
}

/* Lightbox */
.kron-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 2050;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.kron-lightbox[aria-hidden="true"] { display: none !important; }
.kron-lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    max-width: 96vw;
    padding: 0 70px;
}
.kron-lightbox-content {
    max-width: 60vw;
    max-height: 76vh;
    flex-shrink: 0;
}
.kron-lightbox-content img,
.kron-lightbox-content video {
    max-width: 60vw;
    max-height: 76vh;
    border-radius: 6px;
    display: block;
}
@media (max-width: 900px) {
    .kron-lightbox-stage { flex-direction: column; padding: 0 12px; gap: 8px; }
    .kron-lightbox-content { max-width: 92vw; }
    .kron-lightbox-content img,
    .kron-lightbox-content video { max-width: 92vw; max-height: 50vh; }
}

.kron-lightbox-bubbles {
    width: 240px;
    max-height: 70vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.kron-lightbox-bubbles::-webkit-scrollbar { width: 4px; }
.kron-lightbox-bubbles::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 2px; }
@media (max-width: 900px) { .kron-lightbox-bubbles { width: 100%; max-height: 22vh; flex-direction: row; overflow-x: auto; } }

.kron-bubble {
    background: rgba(255,255,255,0.96);
    color: var(--mst-text);
    border-radius: 14px;
    padding: 8px 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.78rem;
    line-height: 1.35;
    position: relative;
    flex-shrink: 0;
}
.kron-bubble.right  { border-bottom-right-radius: 4px; }
.kron-bubble.left   { border-bottom-left-radius: 4px; }
.kron-bubble-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mst-primary);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kron-bubble-avatar img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.kron-bubble-body { flex: 1; min-width: 0; }
.kron-bubble-author { font-weight: 600; font-size: 0.74rem; color: var(--mst-primary); }
.kron-bubble-time   { font-size: 0.66rem; color: var(--mst-muted); margin-left: 4px; }

.kron-lightbox-footer {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(560px, 90vw);
}
.kron-lightbox-comment-form {
    display: flex;
    gap: 6px;
    width: 100%;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    padding: 4px 6px 4px 14px;
}
.kron-lightbox-comment-form input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
}
.kron-lightbox-comment-form input::placeholder { color: rgba(255,255,255,0.6); }
.kron-lightbox-comment-form button {
    background: var(--mst-accent);
    color: var(--mst-ink);
    border: none;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.kron-lightbox-comment-form button:hover { background: var(--mst-accent-2); color: #fff; }
.kron-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
}
.kron-lightbox-close:hover { opacity: 1; }
.kron-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    font-size: 1.8rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    transition: background .12s ease;
}
.kron-lightbox-arrow:hover { background: rgba(255,255,255,0.22); }
.kron-lightbox-arrow.left  { left: 18px; }
.kron-lightbox-arrow.right { right: 18px; }
.kron-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.8);
    font-size: 0.82rem;
    background: rgba(0,0,0,0.4);
    padding: 4px 10px;
    border-radius: 999px;
}

/* Sticky left sidebar so the feed scrolls beside it. When the rail is
   taller than the viewport, we let it scroll INTERNALLY — pinned to
   the top of the page, with its own thin scrollbar — so the bottom
   items (Coming Soon, On-This-Day) stay reachable while the main feed
   scrolls separately. Replaces the older approach of stripping the
   sticky class entirely on tall rails (the user wanted the rail to
   keep floating with them). */
@media (min-width: 768px) {
    .col-sidebar.sticky-rail {
        position: sticky;
        top: 88px;
        align-self: flex-start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        /* Discreet scrollbar — visible on hover, ghosted otherwise. */
        scrollbar-width: thin;
        scrollbar-color: rgba(160,110,60,0.30) transparent;
        padding-right: 4px;
    }
    .col-sidebar.sticky-rail::-webkit-scrollbar {
        width: 6px;
    }
    .col-sidebar.sticky-rail::-webkit-scrollbar-thumb {
        background: rgba(160,110,60,0.18);
        border-radius: 3px;
    }
    .col-sidebar.sticky-rail:hover::-webkit-scrollbar-thumb {
        background: rgba(160,110,60,0.40);
    }
}

/* On This Day — sepia memoir card with a calendar icon. Shows the user's
   own past posts whose event date matches today's calendar day. */
.on-this-day-card {
    background: linear-gradient(180deg, rgba(160,110,60,0.10), rgba(160,110,60,0.03));
    border: 1px solid rgba(160,110,60,0.30);
    border-left: 3px solid #a06e3c;
    border-radius: var(--mst-radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}
[data-theme="dark"] .on-this-day-card {
    background: linear-gradient(180deg, rgba(190,140,80,0.14), rgba(190,140,80,0.03));
}
.on-this-day-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.on-this-day-icon { font-size: 1rem; }
.on-this-day-title {
    font-family: 'Georgia', serif;
    font-weight: 700;
    color: #6d4720;
    font-size: 0.95rem;
}
[data-theme="dark"] .on-this-day-title { color: #d6a878; }
.on-this-day-row {
    display: block;
    padding: 6px 0;
    border-top: 1px dashed rgba(160,110,60,0.20);
    text-decoration: none;
    color: var(--mst-text);
    transition: color 0.15s;
}
.on-this-day-row:first-of-type { border-top: none; padding-top: 0; }
.on-this-day-row:hover { color: var(--mst-primary); }
.on-this-day-when {
    display: inline-block;
    background: rgba(160,110,60,0.18);
    color: #6d4720;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 0.70rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 8px;
    vertical-align: middle;
}
[data-theme="dark"] .on-this-day-when { color: #d6a878; background: rgba(190,140,80,0.18); }
.on-this-day-text {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 0.92rem;
}

/* Timeline zoom tabs */
.zoom-tabs {
    display: inline-flex;
    background: var(--mst-surface-2);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.zoom-tabs a {
    padding: 4px 14px;
    font-size: 0.82rem;
    color: var(--mst-muted);
    border-radius: 8px;
    font-weight: 500;
}
.zoom-tabs a.active {
    background: var(--mst-card);
    color: var(--mst-ink);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Unified timeline tabs — both sort (Recent/Chronological) and zoom
   (Decade/Year/Month) live in one underline-tab row to match. */
.timeline-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-bottom: 1px solid var(--mst-border);
    flex-wrap: wrap;
}
.timeline-tab {
    padding: 6px 12px;
    color: var(--mst-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.timeline-tab:hover { color: var(--mst-primary); }
.timeline-tab.active {
    color: var(--mst-primary);
    border-bottom-color: var(--mst-primary);
}
.timeline-tabs-sep {
    width: 1px;
    height: 14px;
    background: var(--mst-border);
    margin: 0 6px;
    align-self: center;
}
.quick-story-card .quick-story-textarea,
.quick-story-card .tag-search-input,
.quick-story-card .quick-story-textarea::placeholder,
.quick-story-card .tag-search-input::placeholder {
    font-family: var(--mst-font-sans);
    font-size: 0.82rem;
    line-height: 1.4;
}
.btn-quick-media {
    background: rgba(15,100,102,0.08);
    border: 1.5px solid var(--mst-primary);
    color: var(--mst-primary);
    border-radius: var(--mst-radius-sm);
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    box-shadow: 0 1px 3px rgba(15,100,102,0.12);
    transition: color .12s ease, border-color .12s ease, background .12s ease, transform .1s ease, box-shadow .12s ease;
    position: relative;
}
.btn-quick-media:hover {
    color: #fff;
    background: var(--mst-primary);
    border-color: var(--mst-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15,100,102,0.3);
}
.btn-quick-media.quick-music-btn {
    background: rgba(234,179,8,0.12);
    border-color: var(--mst-accent);
    color: var(--mst-accent-2);
    box-shadow: 0 1px 3px rgba(234,179,8,0.15);
}
.btn-quick-media.quick-music-btn:hover {
    background: var(--mst-accent);
    border-color: var(--mst-accent);
    color: var(--mst-ink);
    box-shadow: 0 4px 10px rgba(234,179,8,0.35);
}
.btn-quick-media svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-quick-media .media-count-badge,
.btn-quick-media .music-set-badge {
    display: inline-block;
    background: var(--mst-primary);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 2px;
}
.btn-quick-media .music-set-badge { background: var(--mst-accent); color: var(--mst-ink); }

/* Memory Music chip under the textarea once a URL is set */
.quick-music-chip {
    margin-top: 6px;
    background: rgba(184,135,26,0.08);
    border: 1px solid rgba(184,135,26,0.4);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: var(--mst-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.quick-music-chip a { color: var(--mst-accent-2); }

/* Quick Story upload progress */
.quick-upload-status {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--mst-surface-2);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius-sm);
    font-size: 0.82rem;
    color: var(--mst-text);
}
.quick-upload-status .qup-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-weight: 500;
}
.quick-upload-status .qup-bar {
    height: 6px;
    background: var(--mst-card);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--mst-border);
}
.quick-upload-status .qup-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mst-primary) 0%, var(--mst-primary-3) 100%);
    width: 0%;
    transition: width 0.18s ease;
}
.quick-upload-status.qup-success {
    background: rgba(34,197,94,0.10);
    border-color: rgba(34,197,94,0.45);
    color: var(--mst-text);
    font-weight: 600;
}
.quick-upload-status.qup-error {
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.45);
    color: #b91c1c;
}

/* Memory Music chip on rendered posts */
.post-music-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(184,135,26,0.1);
    border: 1px solid rgba(184,135,26,0.5);
    color: var(--mst-accent-2);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.78rem;
    text-decoration: none;
    transition: background-color .12s ease;
}
.post-music-chip:hover { background: rgba(184,135,26,0.18); color: var(--mst-accent-2); }
[data-theme="dark"] .post-music-chip { color: var(--mst-accent); }

/* ============================================
   Working Index — table layout
   ============================================ */
.working-table-wrap {
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius);
    box-shadow: var(--mst-shadow-sm);
    overflow: auto;
    max-height: 75vh;
}
/* Grid-based row so columns share the available width and the table
   never side-scrolls. Year column is fixed-narrow; the six fields each
   take 1fr. Mood is no longer a column — clicking the year pill opens
   a popover with the 5 options. */
.working-table {
    width: 100%;
    display: block;
}
.wt-row {
    display: grid;
    grid-template-columns: 56px repeat(6, minmax(0, 1fr));
    border-bottom: 1px solid var(--mst-border);
    align-items: stretch;
}
.wt-row > div {
    padding: 5px 6px;
    display: flex;
    align-items: center;
    min-width: 0;
}
.wt-row.wt-head > div {
    background: var(--mst-surface-2);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mst-muted);
    font-weight: 700;
    padding: 6px;
    border-bottom: 2px solid var(--mst-border);
    line-height: 1.15;
}
.wt-row:not(.wt-head):hover > div { background: rgba(15,100,102,0.03); }

.wt-year-col {
    text-align: center;
    background: var(--mst-card);
    border-right: 1px solid var(--mst-border);
    justify-content: center;
}
.wt-year-pill {
    display: inline-block;
    font-family: var(--mst-font-serif);
    font-weight: 700;
    font-size: 0.82rem;
    color: #fff;
    background: var(--mst-primary);
    border-radius: 6px;
    padding: 2px 8px;
    line-height: 1.1;
    cursor: pointer;
    border: none;
    transition: background-color .2s ease, transform .1s;
}
.wt-year-pill:hover { transform: scale(1.05); }
.wt-year-pill.mood-great   { background: #16a34a; }
.wt-year-pill.mood-good    { background: #65a30d; }
.wt-year-pill.mood-neutral { background: #6b7280; }
.wt-year-pill.mood-tough   { background: #d97706; }
.wt-year-pill.mood-heavy   { background: #b91c1c; }

.wt-cell-col { min-width: 0; }

.wt-cell { transition: background-color .14s ease; }
.wt-cell:focus-within { background: rgba(15,100,102,0.06); }
.wt-cell.cell-saved { background: rgba(34,197,94,0.14); }

/* Mood popover — anchored to the year pill on click. Compact column
   of 5 swatch buttons with labels so the colors finally have space
   to breathe and read clearly. */
.wt-mood-popover {
    position: fixed;
    z-index: 1080;
    background: #fff;
    border: 1px solid var(--mst-border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
}
[data-theme="dark"] .wt-mood-popover {
    background: #1d1b16;
    border-color: rgba(217,212,197,0.18);
    color: var(--mst-text);
}
.wt-mood-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: var(--mst-text);
    font-size: 0.88rem;
    font-weight: 500;
    transition: background-color .1s;
}
.wt-mood-option:hover {
    background: rgba(160,110,60,0.08);
}
.wt-mood-option.is-active {
    background: rgba(15,100,102,0.10);
    font-weight: 700;
}
.wt-mood-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Soft column tints for visual scanning */
.wt-row:not(.wt-head) .wt-cell-col[data-field="MainEvent"]    { background: rgba(184,135,26,0.04); }
.wt-row:not(.wt-head) .wt-cell-col[data-field="Residence"]    { background: rgba(29,78,216,0.04); }
.wt-row:not(.wt-head) .wt-cell-col[data-field="SchoolJob"]    { background: rgba(15,100,102,0.04); }
.wt-row:not(.wt-head) .wt-cell-col[data-field="Relationship"] { background: rgba(236,72,153,0.04); }
.wt-row:not(.wt-head) .wt-cell-col[data-field="Vacation"]     { background: rgba(245,158,11,0.04); }
.wt-row:not(.wt-head) .wt-cell-col[data-field="Other"]        { background: rgba(107,114,128,0.04); }

.wt-cell-value {
    outline: none;
    font-size: 0.78rem;
    color: var(--mst-text);
    line-height: 1.3;
    min-height: 1.2em;
    cursor: text;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.wt-cell-value:empty::before {
    content: "";
    color: var(--mst-muted);
    opacity: 0.45;
    font-style: italic;
}
.wt-cell:focus-within .wt-cell-value:empty::before { content: ""; }

.wt-emoji { font-size: 0.85rem; margin-right: 2px; }

/* ============================================
   Working Index (private life grid)
   ============================================ */
.working-hero {
    background: linear-gradient(135deg, rgba(15,100,102,0.08), rgba(184,135,26,0.08));
    border: 1px solid var(--mst-border);
    border-left: 4px solid var(--mst-accent);
    border-radius: var(--mst-radius);
    padding: 18px 20px;
}

/* ── Overview band: density + mood arc ─────────────────────────────
   Sits above the table so the user reads "your life at a glance"
   before scrolling through the decades. */
.working-overview {
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
[data-theme="dark"] .working-overview { background: rgba(255,255,255,0.04); }
.working-overview-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.working-overview-pct {
    font-weight: 700;
    color: var(--mst-primary);
    margin-left: 4px;
}
.working-progress {
    flex: 1;
    min-width: 120px;
    height: 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    overflow: hidden;
}
[data-theme="dark"] .working-progress { background: rgba(255,255,255,0.08); }
.working-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mst-primary), var(--mst-accent));
    transition: width .3s ease;
}
.working-mood-arc {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    overflow-x: auto;
    padding: 6px 0;
}
.working-arc-dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.working-arc-dot:hover {
    transform: scale(1.4);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}
.working-arc-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--mst-muted);
}
.working-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: -1px;
}

/* ── Decade collapsibles ───────────────────────────────────────────
   Each decade is a <details> so default semantics handle keyboard +
   accessibility. Summary doubles as a clickable header strip with a
   density chip, a mini mood arc, and a chevron. */
.wt-decade {
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: 14px;
    margin-bottom: 12px;
    /* No overflow:hidden here — it would clip the Other + Mood columns
       on the right when the table is wider than the card. The rounded
       corners still read fine without it. */
}
[data-theme="dark"] .wt-decade { background: rgba(255,255,255,0.03); }
.wt-decade[open] { box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.wt-decade-current { border-color: var(--mst-primary); }
.wt-decade-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
}
.wt-decade-head::-webkit-details-marker { display: none; }
[data-theme="dark"] .wt-decade-head { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); }
.wt-decade-current .wt-decade-head { background: linear-gradient(180deg, rgba(15,100,102,0.10), rgba(15,100,102,0)); }
.wt-decade-label {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--mst-primary);
    line-height: 1;
}
.wt-decade-suffix {
    font-size: 0.7em;
    opacity: 0.7;
    margin-left: 1px;
}
.wt-decade-density {
    font-size: 0.82rem;
    color: var(--mst-muted);
    background: rgba(0,0,0,0.04);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
}
[data-theme="dark"] .wt-decade-density { background: rgba(255,255,255,0.06); }
.wt-decade-arc {
    display: inline-flex;
    gap: 3px;
    flex: 1;
}
.wt-decade-arc-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.wt-decade-chevron {
    color: var(--mst-muted);
    font-size: 0.95rem;
    transition: transform .15s;
}
.wt-decade[open] .wt-decade-chevron { transform: rotate(180deg); }
.wt-decade > .working-table {
    margin: 0 0 12px 0;
    padding: 0 8px;
    /* Grid layout fits the available width — no horizontal scroll. */
}

/* "Write about it" chip — tiny call-to-action that appears on a
   filled cell on hover/focus. Click takes the user to Posts/Create
   with the year + cell text pre-filled. */
.wt-cell { position: relative; }
.wt-write-chip {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: var(--mst-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s, transform .12s, background-color .12s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 5;
}
.wt-cell:hover .wt-write-chip:not([hidden]),
.wt-cell:focus-within .wt-write-chip:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
}
.wt-write-chip:hover {
    background: var(--mst-primary-2, var(--mst-secondary));
}

/* Multi-item picker: shown when the user clicks "Write about it" on
   a cell that contains multiple comma/and-separated items. */
.wt-write-picker {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.wt-write-picker-inner {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 22px 22px 18px 22px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}
[data-theme="dark"] .wt-write-picker-inner { background: #1d1b16; color: var(--mst-text); }
.wt-write-picker-close {
    position: absolute;
    top: 8px; right: 12px;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--mst-muted);
    cursor: pointer;
}
.wt-write-picker-title {
    font-weight: 700;
    color: var(--mst-primary);
    margin-bottom: 12px;
}
.wt-write-picker-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wt-write-picker-option {
    background: rgba(160,110,60,0.08);
    border: 1px solid rgba(160,110,60,0.30);
    border-radius: 10px;
    padding: 10px 14px;
    text-align: left;
    color: var(--mst-text);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color .12s, border-color .12s;
}
.wt-write-picker-option:hover {
    background: rgba(160,110,60,0.18);
    border-color: var(--mst-primary);
}

/* Briefly flash a row when the user clicks a mood-arc dot to jump to
   that year — orientation cue. */
.wt-row-flash {
    animation: wtRowFlash 1.1s ease-out;
}
@keyframes wtRowFlash {
    0%   { background: rgba(15,100,102,0.18); }
    100% { background: transparent; }
}
.working-hero h2 {
    font-family: var(--mst-font-serif);
    color: var(--mst-primary);
    font-weight: 700;
    margin: 0;
    font-size: 1.6rem;
}
.working-toolbar { font-size: 0.85rem; }

.working-empty {
    text-align: center;
    padding: 50px 20px;
    background: var(--mst-card);
    border: 2px dashed var(--mst-border);
    border-radius: var(--mst-radius);
}
.working-empty-icon { font-size: 3rem; margin-bottom: 8px; }
.working-empty h5 { font-family: var(--mst-font-serif); }

.working-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.working-row {
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius);
    padding: 14px 16px 12px;
    box-shadow: var(--mst-shadow-sm);
    position: relative;
    transition: box-shadow .14s ease;
}
.working-row:hover { box-shadow: var(--mst-shadow); }

.working-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.working-year-pill {
    font-family: var(--mst-font-serif);
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    background: var(--mst-primary);
    border-radius: 12px;
    padding: 4px 14px;
    line-height: 1.1;
    min-width: 90px;
    text-align: center;
    transition: background-color .2s ease;
}
.working-year-pill.mood-great   { background: #16a34a; }
.working-year-pill.mood-good    { background: #65a30d; }
.working-year-pill.mood-neutral { background: #6b7280; }
.working-year-pill.mood-tough   { background: #d97706; }
.working-year-pill.mood-heavy   { background: #b91c1c; }

.working-mood-picker { display: inline-flex; gap: 4px; }
.mood-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform .12s ease, border-color .12s ease;
    opacity: 0.55;
}
.mood-dot:hover { transform: scale(1.18); opacity: 1; }
.mood-dot.active { opacity: 1; border-color: var(--mst-card); box-shadow: 0 0 0 2px rgba(0,0,0,0.12); }

.working-delete {
    background: transparent;
    border: none;
    color: var(--mst-muted);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
    border-radius: 8px;
}
.working-delete:hover { color: #b91c1c; background: rgba(239,68,68,0.08); }

.working-cells {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.working-cell {
    background: var(--mst-surface-2);
    border: 1px solid transparent;
    border-radius: var(--mst-radius-sm);
    padding: 8px 10px 6px;
    transition: border-color .12s ease, background-color .14s ease;
    min-height: 64px;
    display: flex;
    flex-direction: column;
}
.working-cell:focus-within { border-color: var(--mst-primary); background: var(--mst-card); }
.working-cell.cell-saved { background: rgba(34,197,94,0.12); }

/* Distinct soft tints per column type */
.working-cell[data-field="MainEvent"]    { background: linear-gradient(135deg, rgba(184,135,26,0.10), rgba(184,135,26,0.04)); }
.working-cell[data-field="Residence"]    { background: linear-gradient(135deg, rgba(29,78,216,0.10), rgba(29,78,216,0.04)); }
.working-cell[data-field="SchoolJob"]    { background: linear-gradient(135deg, rgba(15,100,102,0.10), rgba(15,100,102,0.04)); }
.working-cell[data-field="Relationship"] { background: linear-gradient(135deg, rgba(236,72,153,0.10), rgba(236,72,153,0.04)); }
.working-cell[data-field="Family"]       { background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.04)); }
.working-cell[data-field="Vacation"]     { background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(245,158,11,0.04)); }
.working-cell[data-field="Other"]        { background: linear-gradient(135deg, rgba(107,114,128,0.10), rgba(107,114,128,0.04)); }

.working-cell-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mst-muted);
    font-weight: 600;
    margin-bottom: 2px;
}
.working-cell-emoji { font-size: 0.85rem; margin-right: 2px; }
.working-cell-value {
    font-size: 0.88rem;
    color: var(--mst-text);
    outline: none;
    line-height: 1.35;
    flex: 1;
    cursor: text;
    min-height: 1.2em;
}
.working-cell-value:empty::before {
    content: attr(data-placeholder);
    color: var(--mst-muted);
    opacity: 0.5;
    font-style: italic;
}

.working-notes summary {
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--mst-muted);
    padding: 4px 0;
    list-style: none;
}
.working-notes summary::before { content: "▸ "; transition: transform .15s ease; display: inline-block; }
.working-notes[open] summary::before { content: "▾ "; }
.working-notes-value {
    background: var(--mst-surface-2);
    padding: 8px 12px;
    border-radius: var(--mst-radius-sm);
    margin-top: 4px;
    min-height: 60px;
}
.quick-media-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.quick-media-preview .thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 1px solid var(--mst-border);
    object-fit: cover;
    background: var(--mst-surface-2);
}
.quick-media-preview .thumb-video {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--mst-muted);
    padding: 4px;
    text-align: center;
    word-break: break-word;
}
.quick-story-textarea {
    min-height: 2.4em;
    overflow: hidden;
    resize: none;
}
.btn-quick-story {
    background: var(--mst-primary);
    color: #fff !important;
    border: 1px solid var(--mst-primary);
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: var(--mst-radius-sm);
}
.btn-quick-story:hover {
    background: var(--mst-primary-2);
    border-color: var(--mst-primary-2);
    color: #fff;
}

/* Comments: off-white rounded bubbles, slightly indented */
.comment-row {
    margin-left: 1.2rem;
    background: var(--mst-surface-2);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius);
    padding: 12px 16px !important;
    margin-top: 12px !important;
}

/* Threaded comment reply: lighter fill + thin connector */
.comment-reply {
    margin-left: 1.8rem;
    padding: 10px 14px;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius-sm);
    position: relative;
    margin-top: 10px;
}
.comment-reply::before {
    content: "";
    position: absolute;
    top: 18px;
    left: -0.9rem;
    width: 0.75rem;
    height: 1px;
    background: var(--mst-border);
}

/* Global search popover (small bubble — positioned by JS) */
.nav-search-popover {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2050;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius);
    box-shadow: var(--mst-shadow-lg);
    padding: 10px;
    width: min(380px, 92vw);
}
.nav-search-popover::before {
    content: "";
    position: absolute;
    top: -8px;
    left: var(--caret-left, 50%);
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--mst-card);
    border-left: 1px solid var(--mst-border);
    border-top: 1px solid var(--mst-border);
}
.nav-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius-sm);
    padding: 4px 8px;
    background: var(--mst-surface-2);
    position: relative;
    z-index: 1;
}
.nav-search-input-wrap svg { color: var(--mst-muted); flex-shrink: 0; }
.nav-search-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.9rem;
    color: var(--mst-text);
    padding: 4px 0;
}
.nav-search-input-wrap input::placeholder { color: var(--mst-muted); }
.nav-search-clear {
    background: transparent;
    border: none;
    color: var(--mst-muted);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.nav-search-clear:hover { color: var(--mst-ink); }

/* Inline search results card injected into the main column */
.search-results-card {
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-left: 4px solid var(--mst-primary);
    border-radius: var(--mst-radius);
    box-shadow: var(--mst-shadow-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.search-results-card .src-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.search-results-card .src-head h6 {
    font-family: var(--mst-font-serif);
    color: var(--mst-primary);
    margin: 0;
    font-weight: 700;
}
.search-results-card .src-close {
    background: transparent;
    border: none;
    color: var(--mst-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.search-results-card .src-close:hover { color: var(--mst-ink); background: var(--mst-surface-2); }
.nav-search-section { margin-top: 10px; }
.nav-search-section:first-child { margin-top: 0; }
.nav-search-section-head {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mst-accent-2);
    font-weight: 700;
    margin-bottom: 4px;
    padding: 0 4px;
}
.nav-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--mst-radius-sm);
    color: var(--mst-text);
    text-decoration: none;
    font-size: 0.88rem;
    transition: background-color .12s ease;
}
.nav-search-row:hover { background: var(--mst-surface-2); color: var(--mst-text); }
.nav-search-row .nsr-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--mst-light); color: var(--mst-primary);
    font-weight: 700; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.nav-search-row .nsr-avatar img { width: 28px; height: 28px; object-fit: cover; }
.nav-search-row .nsr-body { flex: 1; min-width: 0; }
.nav-search-row .nsr-title { font-weight: 600; }
.nav-search-row .nsr-meta { font-size: 0.74rem; color: var(--mst-muted); }
.nav-search-row .nsr-feature-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(15,100,102,0.1);
    color: var(--mst-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
}
.nav-search-empty {
    text-align: center;
    color: var(--mst-muted);
    padding: 24px 12px;
    font-size: 0.88rem;
}

/* Profile field visibility selector */
.field-vis-btn {
    color: var(--mst-muted);
    text-decoration: none;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.field-vis-btn:hover { color: var(--mst-primary); }
.field-vis-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.field-vis-dropdown .dropdown-menu .field-vis-opt { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.field-vis-dropdown .dropdown-menu .field-vis-opt svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.profile-field { position: relative; }
/* Visibility dropdown lives inside a profile field card. Without help it
   gets painted under the next-row sibling cards (no stacking context on
   .profile-field). Force the open menu above siblings, and combined with
   data-bs-strategy="fixed" on the toggle the menu escapes the card. */
.field-vis-dropdown .dropdown-menu { z-index: 2100; }
.profile-field:has(.dropdown.show) { z-index: 50; }

/* ─── Modernized profile page ──────────────────────────────────────────
   Hero band → stats strip → tabs (About / Stories / Badges / Dashboard).
   Replaces the old shell+overlay+grid layout. */

.profile-hero {
    border-radius: var(--mst-radius);
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    box-shadow: var(--mst-shadow);
    overflow: hidden;
}
.profile-hero-cover {
    height: 180px;
    background: linear-gradient(135deg, var(--mst-primary) 0%, var(--mst-primary-2, var(--mst-secondary)) 100%);
    background-size: cover;
    background-position: center;
}
.profile-hero.no-bg .profile-hero-cover { height: 100px; }
/* Body sits BELOW the cover; only the avatar overlaps. This keeps the
   name and meta from being painted over the cover image (which made them
   unreadable when a photo background was set). */
.profile-hero-body {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 12px 1.25rem 1.1rem 1.25rem;
    flex-wrap: wrap;
}
.profile-hero-avatar {
    border-radius: 50%;
    background: var(--mst-card);
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    line-height: 0;
    flex: 0 0 auto;
    margin-top: -68px; /* only the avatar overlaps the cover */
}
.profile-hero-avatar img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50%;
    object-fit: cover;
}
.profile-hero-identity {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 4px;
}
.profile-hero-name {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--mst-text);
    line-height: 1.15;
    word-break: break-word;
}
.profile-hero-handle { color: var(--mst-muted); font-size: 0.9rem; }
.profile-hero-meta { margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.profile-hero-meta-item { color: var(--mst-muted); font-size: 0.88rem; }
.profile-hero-meta-flags { display: inline-flex; gap: 4px; align-items: center; }
.profile-hero-meta-flags img { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
.profile-hero-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    padding-bottom: 6px;
    flex-wrap: wrap;
}
.profile-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    color: var(--mst-primary);
    border: 1px solid var(--mst-border);
    text-decoration: none;
    transition: background 0.15s, transform 0.15s, color 0.15s;
    padding: 0;
}
.profile-hero-btn:hover {
    background: var(--mst-primary);
    color: #fff;
    transform: translateY(-1px);
}
.profile-hero-btn-danger { color: #dc3545; }
.profile-hero-btn-danger:hover { background: #dc3545; color: #fff; }
[data-theme="dark"] .profile-hero-btn { background: rgba(255,255,255,0.06); }
.profile-hero-more-menu .dropdown-item { font-size: 0.88rem; padding: 6px 14px; }
.profile-hero-more-menu .dropdown-item:hover { color: #dc3545 !important; background: rgba(220,53,69,0.06); }

@media (max-width: 575px) {
    .profile-hero-cover { height: 120px; }
    .profile-hero.no-bg .profile-hero-cover { height: 64px; }
    .profile-hero-body { padding: 10px 1rem 1rem 1rem; }
    .profile-hero-avatar { margin-top: -52px; }
    .profile-hero-avatar img { width: 96px !important; height: 96px !important; }
    .profile-hero-name { font-size: 1.35rem; }
    .profile-hero-actions { width: 100%; padding-top: 6px; }
}

/* Stats strip — 4 quick numbers under the hero */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: var(--mst-radius);
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    box-shadow: var(--mst-shadow);
    overflow: hidden;
}
.profile-stat {
    padding: 10px 10px;
    text-align: center;
    border-right: 1px solid var(--mst-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.profile-stat:last-child { border-right: none; }
a.profile-stat {
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
a.profile-stat:hover {
    background: rgba(15,100,102,0.06);
    color: inherit;
    border-bottom-color: var(--mst-primary);
}
a.profile-stat:hover .profile-stat-num { color: var(--mst-primary); }
/* Quieter, more refined stats — serif italic-ish numbers, very small caps label */
.profile-stat-num {
    font-family: 'Georgia', 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mst-text);
    line-height: 1.15;
    letter-spacing: 0.01em;
}
.profile-stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--mst-muted);
    margin-top: 3px;
    font-weight: 500;
}
@media (max-width: 575px) {
    .profile-stats { grid-template-columns: repeat(2, 1fr); }
    .profile-stat { border-bottom: 1px solid var(--mst-border); }
    .profile-stat:nth-child(2) { border-right: none; }
    .profile-stat:nth-child(odd) { border-right: 1px solid var(--mst-border); }
    .profile-stat:nth-last-child(-n+2) { border-bottom: none; }
    .profile-stat-num { font-size: 0.98rem; }
}

/* Collapsible profile sections — each section has a clickable header bar
   and a body that toggles open/closed. Replaces the old tabbed layout. */
.profile-sections { display: flex; flex-direction: column; gap: 10px; }
.profile-section {
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius);
    box-shadow: var(--mst-shadow);
    overflow: hidden;
}
.profile-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    padding: 12px 16px;
    text-align: left;
    cursor: pointer;
    color: var(--mst-text);
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.15s;
}
.profile-section-toggle:hover { background: rgba(15,100,102,0.04); }
.profile-section-toggle:focus-visible {
    outline: 2px solid var(--mst-primary);
    outline-offset: -2px;
}
.profile-section-title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* One-line preview of what's inside, so users don't have to expand a
   collapsed Settings section to remember what it covers. */
.profile-section-preview {
    color: var(--mst-muted);
    font-weight: 400;
    font-size: 0.78rem;
}
@media (max-width: 575px) {
    .profile-section-preview { display: none; }
}
.profile-section-count {
    display: inline-block;
    background: rgba(15,100,102,0.10);
    color: var(--mst-primary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}
.profile-section-chevron {
    color: var(--mst-muted);
    font-size: 0.9rem;
    transition: transform 0.2s;
    transform: rotate(0deg);
}
.profile-section-toggle.collapsed .profile-section-chevron { transform: rotate(-90deg); }

/* Engage-bar grouping — subtle vertical dividers between react/comment,
   share/translate, and the "Open" link, so each control reads as part
   of a logical group instead of a flat row of seven things. */
.engage-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.engage-bar .engage-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.engage-bar .engage-divider {
    width: 1px;
    height: 16px;
    background: var(--mst-border);
    align-self: center;
}

/* Subtle press-feel for primary/outline buttons on hover. Keeps things
   under 120ms so it never feels in the way. */
.btn-primary:hover,
.btn-outline-primary:hover,
.btn-warning:hover,
.btn-outline-warning:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(15,100,102,0.18);
    transition: transform 0.10s ease, box-shadow 0.10s ease;
}
.btn-primary:active,
.btn-outline-primary:active {
    transform: translateY(0);
}

/* Mobile nav — switch the icon-on-top-of-label layout to icon-beside-label
   on phones, where the vertical layout was stealing two rows of header
   real estate. The dropdown menu still expands as Bootstrap default. */
@media (max-width: 991.98px) {
    .nav-main-icons .nav-link.d-flex {
        flex-direction: row !important;
        gap: 8px;
        padding: 8px 12px !important;
    }
    .nav-main-icons .nav-icon-label {
        margin-top: 0 !important;
    }
}

/* Comment thread line — visual continuity from the parent comment to
   each reply, especially helpful on phones where indent alone is easy
   to lose track of. */
.comment-reply {
    position: relative;
    padding-left: 16px;
}
.comment-reply::before {
    content: "";
    position: absolute;
    left: 4px; top: 0; bottom: 6px;
    width: 2px;
    background: var(--mst-border);
    border-radius: 1px;
}
[data-theme="dark"] .comment-reply::before { background: rgba(255,255,255,0.10); }
.profile-section-body {
    padding: 0 16px 16px 16px;
    border-top: 1px solid var(--mst-border);
    padding-top: 14px;
}

/* About — clean dl rows, no card-per-field */
.profile-about-list { margin: 0; padding: 0; }
.profile-about-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--mst-border);
}
.profile-about-row:last-child { border-bottom: none; }
.profile-about-row dt {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mst-muted);
    margin: 0;
}
.profile-about-row dd { margin: 0; color: var(--mst-text); }
.profile-about-vis { justify-self: end; }
@media (max-width: 575px) {
    .profile-about-row { grid-template-columns: 1fr auto; }
    .profile-about-row dt { grid-column: 1 / -1; padding-bottom: 2px; }
    .profile-about-row dd { grid-column: 1; }
    .profile-about-vis { grid-column: 2; grid-row: 2; }
}

/* Stories — thumbnail grid */
.profile-stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.profile-story-card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}
.profile-story-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: inherit;
}
.profile-story-thumb {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--mst-light, #f0ece1);
    position: relative;
}
.profile-story-thumb.no-thumb {
    background: linear-gradient(135deg, rgba(15,100,102,0.10), rgba(15,100,102,0.04));
    display: flex; align-items: center; justify-content: center;
}
.profile-story-thumb-year {
    font-family: 'Georgia', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--mst-primary);
    opacity: 0.5;
}
.profile-story-meta { padding: 10px 12px; }
.profile-story-year { font-size: 0.75rem; color: var(--mst-muted); font-weight: 600; }
.profile-story-title {
    font-weight: 700;
    margin-top: 4px;
    font-size: 0.95rem;
    color: var(--mst-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.profile-story-preview {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--mst-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Profile card with optional background image */
.profile-card-shell {
    border-radius: var(--mst-radius);
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    box-shadow: var(--mst-shadow);
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.profile-card-shell.has-bg .profile-card-overlay {
    /* 0-4-25-4-0 wash: image visible at top and bottom, soft band mid-card */
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.04) 75%, rgba(255,255,255,0) 100%);
    backdrop-filter: none;
}
[data-theme="dark"] .profile-card-shell.has-bg .profile-card-overlay {
    background: linear-gradient(180deg, rgba(22,27,39,0) 0%, rgba(22,27,39,0.05) 25%, rgba(22,27,39,0.3) 50%, rgba(22,27,39,0.05) 75%, rgba(22,27,39,0) 100%);
}
.profile-card-shell.has-bg { min-height: 280px; }
.profile-card-shell.user-name-card.has-bg { min-height: 110px; }
.profile-card-shell.user-name-card .profile-card-overlay { padding: 1rem 1.25rem; }
.profile-card-shell.user-name-card.has-bg h3 { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.profile-action-link, .profile-action-link svg { color: var(--mst-primary) !important; }
.profile-action-link:hover, .profile-action-link:hover svg { color: var(--mst-primary-2) !important; }
.profile-card-shell.has-bg h3 {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
[data-theme="dark"] .profile-card-shell.has-bg h3 { color: #fff; }
.profile-card-overlay {
    padding: 1.5rem;
}
.profile-card-shell .card.bg-light { backdrop-filter: blur(4px); background: rgba(255,255,255,0.92) !important; }
[data-theme="dark"] .profile-card-shell .card.bg-light { background: rgba(27,33,48,0.92) !important; }

/* Presence dot — sits on the bottom-right of any avatar/wrapper */
.presence-dot {
    position: relative;
    display: inline-block;
}
.presence-dot::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #9ca3af;
    border: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
    transition: background-color .2s ease;
}
.presence-dot.is-online::after { background: #22c55e; }

/* Inline 'online'/'offline' label */
.presence-label {
    font-size: 0.7rem;
    color: var(--mst-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.presence-label.is-online { color: #22c55e; }
.presence-dot.size-sm::after { width: 11px; height: 11px; right: 0; bottom: 0; }
.presence-dot.size-lg::after { width: 18px; height: 18px; right: 0; bottom: 0; }

/* Reaction picker: pops above the like button on hover/focus */
.reaction-wrap {
    display: inline-block;
    position: relative;
}
.reaction-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: 999px;
    box-shadow: var(--mst-shadow);
    padding: 4px 8px;
    display: none;
    gap: 2px;
    z-index: 30;
}
.reaction-wrap:hover .reaction-picker,
.reaction-wrap:focus-within .reaction-picker { display: inline-flex; }

/* Notification bell dropdown — pops below the navbar Alerts button */
.notif-menu {
    width: 360px;
    max-width: calc(100vw - 24px);
    padding: 0;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    z-index: 2050;
}
[data-theme="dark"] .notif-menu {
    background-color: #1d2627;
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
.notif-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .notif-menu-head { border-bottom-color: rgba(255,255,255,0.08); }
.notif-menu-body {
    max-height: 420px;
    overflow-y: auto;
}
.notif-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.12s ease;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background-color: rgba(0,0,0,0.03); color: inherit; }
[data-theme="dark"] .notif-item:hover { background-color: rgba(255,255,255,0.04); }
.notif-item.unread { background-color: rgba(15,100,102,0.06); }
[data-theme="dark"] .notif-item.unread { background-color: rgba(240,192,64,0.07); }
.notif-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mst-surface-2, #eee);
    color: var(--mst-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}
.notif-avatar img { width: 100%; height: 100%; object-fit: cover; }
.notif-text { font-size: 0.88rem; line-height: 1.35; }
.notif-time { font-size: 0.72rem; color: var(--mst-muted); margin-top: 2px; }
.notif-empty { padding: 28px 14px; }

/* Notification type color tags — left border stripe */
.notif-item { border-left: 3px solid transparent; }
.notif-item.notif-comment        { border-left-color: #2563eb; }
.notif-item.notif-mention        { border-left-color: #9333ea; }
.notif-item.notif-reply          { border-left-color: var(--mst-primary); }
.notif-item.notif-friendrequest  { border-left-color: #f59e0b; }
.notif-item.notif-friendaccepted { border-left-color: #10b981; }
.notif-item.notif-announcement   { border-left-color: #f0c040; background: rgba(240,192,64,0.05); }

/* User Dashboard (rendered above Settings) */
.dash-card {
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius);
    box-shadow: var(--mst-shadow-sm);
    padding: 20px 22px;
    margin-bottom: 20px;
}
.dash-head { margin-bottom: 14px; }
.dash-title { color: var(--mst-primary); margin-bottom: 2px; }
.dash-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 720px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
}
.dash-stat {
    text-align: center;
    padding: 12px 6px;
    background: var(--mst-surface-2, #f7f7f7);
    border-radius: 10px;
}
[data-theme="dark"] .dash-stat { background: rgba(255,255,255,0.04); }
.dash-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--mst-primary);
    line-height: 1.1;
}
.dash-stat-label { font-size: 0.78rem; color: var(--mst-muted); margin-top: 4px; }
.dash-stat-label small { font-size: 0.7rem; opacity: 0.7; }

.dash-tiers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--mst-border);
    margin-top: 6px;
}
.dash-tier-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.dash-tier-circles {
    /* Fill the full width of the dashboard card; only start scrolling
       horizontally once avatars overflow that width. No premature 4-avatar cap. */
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    width: 100%;
    padding: 4px 2px;
    scrollbar-width: thin;
}
.dash-tier-circles::-webkit-scrollbar { height: 6px; }
.dash-tier-circles::-webkit-scrollbar-thumb { background: var(--mst-border); border-radius: 3px; }
.dash-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid;
    background: var(--mst-surface-2, #eee);
    color: var(--mst-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.1s ease;
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.dash-circle:hover { transform: scale(1.08); color: var(--mst-text); }
.dash-circle img { width: 100%; height: 100%; object-fit: cover; }
.dash-circle-more {
    color: var(--mst-muted);
    border-color: var(--mst-border);
    font-size: 0.78rem;
    cursor: default;
}

.dash-badges { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mst-border); }
.dash-section-title { color: var(--mst-primary); margin-bottom: 4px; }
.dash-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.dash-badge {
    position: relative;
    padding: 10px 12px;
    border: 1px dashed var(--mst-border);
    border-radius: 10px;
    background: var(--mst-surface-2, #f7f7f7);
    text-align: center;
}
[data-theme="dark"] .dash-badge { background: rgba(255,255,255,0.03); }
.dash-badge-locked { opacity: 0.55; }
.dash-badge-emoji { font-size: 1.4rem; display: block; margin-bottom: 2px; }
.dash-badge-name { font-size: 0.8rem; font-weight: 600; }
.dash-badge-lock { position: absolute; top: 4px; right: 6px; font-size: 0.7rem; }

/* Achievement ladders — five cards, one per ladder, with badge image + progress */
.dash-badge-summary {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    color: var(--mst-primary);
    text-align: center;
    padding: 6px 10px;
    background: rgba(15,100,102,0.06);
    border-radius: 8px;
}
.ladder-grid {
    /* Fixed 3-column grid on desktop. Cards stack vertically so the bigger badge
       sits cleanly above the title/progress, and 3 cards fit in the dashboard
       column without crowding. Falls back to 2 / 1 columns on narrower viewports. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 900px) { .ladder-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ladder-grid { grid-template-columns: 1fr; } }
.ladder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 14px 12px;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: 14px;
}
[data-theme="dark"] .ladder-card { background: rgba(255,255,255,0.04); }
.ladder-card.not-yet { opacity: 0.55; }
.ladder-badge {
    /* Transparent badges sit directly on the card — no white frame. */
    width: 140px;
    height: 140px;
    object-fit: contain;
    background: transparent;
    border: none;
    padding: 0;
}
.ladder-body { width: 100%; }

/* Badge hover zoom — bigger preview floats above the badge on hover/focus.
   The popover uses `position: fixed` so it escapes the dashboard's nested
   stacking contexts (`.dash-card` ancestors trap absolute popovers below
   sibling cards above). The actual top/left are computed in JS from the
   badge's bounding rect; we keep the visual transform here for the
   scale-in animation. */
.badge-hover-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.badge-hover-zoom {
    position: fixed;
    top: 0;
    left: 0;
    transform: scale(0.6);
    transform-origin: bottom center;
    width: 280px;
    background: #fff;
    border: 1px solid var(--mst-border);
    border-radius: 16px;
    padding: 12px 12px 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.28);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
    z-index: 99999;
    text-align: center;
}
.badge-hover-zoom img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
}
.badge-hover-title {
    margin-top: 8px;
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--mst-primary);
    line-height: 1.1;
}
.badge-hover-wrap:hover .badge-hover-zoom,
.badge-hover-wrap:focus-within .badge-hover-zoom {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}
[data-theme="dark"] .badge-hover-zoom {
    background: #1d2627;
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .badge-hover-zoom img { background: #fff; border-radius: 8px; }
[data-theme="dark"] .badge-hover-title { color: var(--mst-accent); }
.ladder-card.not-yet .ladder-badge { filter: grayscale(1); }
.ladder-body { flex: 1; min-width: 0; }
.ladder-title { font-weight: 700; color: var(--mst-text); line-height: 1.2; }
.ladder-name {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mst-muted);
    margin-top: 2px;
}
.ladder-meta { font-size: 0.82rem; color: var(--mst-text); margin-top: 4px; }
.ladder-level { color: var(--mst-muted); font-size: 0.78rem; }
.ladder-progress {
    height: 6px;
    background: var(--mst-surface-2, #eee);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px;
}
.ladder-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mst-primary), var(--mst-accent));
    transition: width 0.3s ease;
}
.ladder-next { font-size: 0.72rem; color: var(--mst-muted); margin-top: 4px; }

/* Level-up celebration modal */
.level-up-modal {
    border: none;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(15,100,102,0.35);
    background: linear-gradient(160deg, #fff 0%, #fff8e6 100%);
    overflow: hidden;
}
[data-theme="dark"] .level-up-modal {
    background: linear-gradient(160deg, #1d2627 0%, #2a2010 100%);
    color: #f0e6c0;
}
.level-up-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mst-accent);
    margin-bottom: 6px;
}
.level-up-badge {
    width: 144px;
    height: 144px;
    object-fit: contain;
    background: transparent;
    border: none;
    filter: drop-shadow(0 8px 24px rgba(15,100,102,0.25));
    animation: kron-levelup-pop 0.5s ease-out;
}
@keyframes kron-levelup-pop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.level-up-title {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    color: var(--mst-primary);
}
[data-theme="dark"] .level-up-title { color: var(--mst-accent); }
.level-up-ladder {
    font-size: 0.85rem;
    color: var(--mst-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.level-up-next { font-size: 0.92rem; color: var(--mst-text); }

/* Admin tool grid — replaces the cramped row of small buttons */
.admin-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.admin-tool-card {
    display: block;
    padding: 16px 18px;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--mst-text);
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}
.admin-tool-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mst-shadow);
    border-color: var(--mst-primary);
    color: var(--mst-text);
}
.admin-tool-primary { border-color: var(--mst-primary); }
.admin-tool-attention { border-color: #dc3545; background: rgba(220,53,69,0.04); }
.admin-tool-attention:hover { border-color: #dc3545; }
.admin-tool-icon { font-size: 1.6rem; margin-bottom: 4px; }
.admin-tool-name { font-weight: 600; margin-bottom: 2px; }
.admin-tool-desc { color: var(--mst-muted); font-size: 0.78rem; line-height: 1.35; }

/* Account "danger zone" panels in Settings */
.account-danger-zone .border { border-color: rgba(220,53,69,0.25) !important; }

/* Onboarding progress card on Home for new users (auto-hides at 3/3) */
.ob-card {
    background: var(--mst-card);
    border: 1px solid var(--mst-accent);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--mst-shadow-sm);
}
.ob-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.ob-title { font-weight: 700; color: var(--mst-primary); }
.ob-sub { font-size: 0.78rem; color: var(--mst-muted); }
.ob-progress {
    flex: 1;
    height: 8px;
    background: var(--mst-surface-2, #eee);
    border-radius: 999px;
    overflow: hidden;
    max-width: 240px;
}
.ob-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mst-primary), var(--mst-accent));
    transition: width 0.3s ease;
}
.ob-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ob-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--mst-surface-2, #f8f8f8);
}
[data-theme="dark"] .ob-item { background: rgba(255,255,255,0.04); }
.ob-item.done { opacity: 0.6; }
.ob-item.done .ob-text { text-decoration: line-through; }
.ob-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    text-align: center;
    line-height: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ob-item.done .ob-check { background: var(--mst-primary); color: #fff; border-color: var(--mst-primary); }
.ob-text { flex: 1; font-size: 0.88rem; line-height: 1.45; }
.ob-cta { margin-left: auto; flex-shrink: 0; }

/* Empty-feed card (Home) */
.empty-feed-card {
    background: var(--mst-card);
    border: 1px dashed var(--mst-border);
    border-radius: 14px;
    padding: 32px 20px;
    text-align: center;
}
.empty-feed-icon { font-size: 2.4rem; margin-bottom: 6px; }

/* Channel posts — admin-curated topical content with a yellow accent so they
   stand apart from personal stories on the home feed. */
.post-card-channel {
    background: linear-gradient(180deg, rgba(240,192,64,0.08), rgba(240,192,64,0.02) 70%, transparent);
    border-left: 3px solid #f0c040 !important;
}
[data-theme="dark"] .post-card-channel {
    background: linear-gradient(180deg, rgba(240,192,64,0.10), rgba(240,192,64,0.02) 70%, transparent);
}
.post-channel-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(240,192,64,0.18);
    border-bottom: 1px solid rgba(240,192,64,0.35);
    font-size: 0.78rem;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.post-channel-strip-detail {
    border-radius: 999px;
    border: 1px solid rgba(240,192,64,0.45);
    display: inline-flex;
    width: auto;
    padding: 4px 12px;
}
.post-channel-icon { font-size: 1rem; line-height: 1; }
.post-channel-name { font-weight: 700; color: #8a6b1e; }
[data-theme="dark"] .post-channel-name { color: #f0c040; }
.post-channel-tag {
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.65rem;
    color: var(--mst-muted);
}
.post-channel-strip-detail .post-channel-tag { margin-left: 8px; }
a.post-channel-strip { cursor: pointer; }
a.post-channel-strip:hover { background: rgba(240,192,64,0.28); }

/* Biographical / managed-account posts — fictional or historical-figure
   profiles get a sepia accent so readers know it's not a real person.
   Visually distinct from yellow channel posts; the two can stack
   (e.g., Caesar in the History channel). */
.post-card-biographical {
    background: linear-gradient(180deg, rgba(160,110,60,0.10), rgba(160,110,60,0.03) 70%, transparent);
    border-left: 3px solid #a06e3c !important;
}
[data-theme="dark"] .post-card-biographical {
    background: linear-gradient(180deg, rgba(190,140,80,0.14), rgba(190,140,80,0.03) 70%, transparent);
}
.post-bio-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(160,110,60,0.18);
    border-bottom: 1px solid rgba(160,110,60,0.35);
    font-size: 0.78rem;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.post-bio-strip-detail {
    border-radius: 999px;
    border: 1px solid rgba(160,110,60,0.45);
    display: inline-flex;
    width: auto;
    padding: 4px 12px;
}
.post-bio-icon { font-size: 1rem; line-height: 1; }
.post-bio-name { font-weight: 700; color: #6d4720; font-family: Georgia, "Times New Roman", serif; }
[data-theme="dark"] .post-bio-name { color: #d6a878; }
.post-bio-era {
    color: var(--mst-muted);
    font-style: italic;
    font-size: 0.78rem;
}
.post-bio-tag {
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.65rem;
    color: var(--mst-muted);
}
.post-bio-strip-detail .post-bio-tag { margin-left: 8px; }
a.post-bio-strip { cursor: pointer; }
a.post-bio-strip:hover { background: rgba(160,110,60,0.28); }
.profile-bio-banner {
    background: linear-gradient(180deg, rgba(160,110,60,0.18), rgba(160,110,60,0.08));
    border: 1px solid rgba(160,110,60,0.35);
    border-left: 3px solid #a06e3c;
    border-radius: 8px;
    padding: 10px 14px;
    /* Breathing room between the bio banner and the headline / byline
       that follows it ("Winston Churchill · 1899" on the bio's stories,
       or the article header on a single bio post). */
    margin-bottom: 24px;
}
[data-theme="dark"] .profile-bio-banner {
    background: linear-gradient(180deg, rgba(190,140,80,0.20), rgba(190,140,80,0.08));
}

/* User typeahead — admin channel writer + (future) other admin pickers */
.user-typeahead-wrap { position: relative; }
.user-typeahead-results {
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 1080;
    max-height: 280px;
    overflow-y: auto;
    display: none;
    margin-top: 2px;
}
.user-typeahead-item { cursor: pointer; }
.user-typeahead-item.active,
.user-typeahead-item:hover {
    background: rgba(15,100,102,0.08);
    color: inherit;
}

/* Channel tiles on /Channel index */
.channel-tile {
    display: block;
    padding: 12px 14px;
    border-radius: var(--mst-radius);
    border: 1px solid var(--mst-border);
    text-decoration: none;
    color: var(--mst-text);
    transition: transform 0.15s, box-shadow 0.15s;
}
.channel-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: var(--mst-text);
}
.channel-tile-head {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700;
    margin-bottom: 4px;
}
.channel-tile-icon { font-size: 1.2rem; }
.channel-tile-name { flex: 1; }
.channel-tile-count {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--mst-muted);
}
.channel-tile-desc {
    color: var(--mst-muted);
    font-size: 0.88rem;
    margin-bottom: 4px;
}
.channel-tile-writer {
    font-size: 0.72rem;
    color: var(--mst-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Biography listing tiles — sepia accent matching post-card-biographical */
.bio-tile {
    display: block;
    padding: 14px;
    border-radius: var(--mst-radius);
    border: 1px solid rgba(160,110,60,0.35);
    border-left: 3px solid #a06e3c;
    background: linear-gradient(180deg, rgba(160,110,60,0.08), transparent);
    text-decoration: none;
    color: var(--mst-text);
    transition: transform 0.15s, box-shadow 0.15s;
}
.bio-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(160,110,60,0.18);
    color: var(--mst-text);
}
.bio-tile-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
}
.bio-tile-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 48px;
    background: rgba(160,110,60,0.15);
}
.bio-tile-name {
    font-family: 'Georgia', serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.15;
    color: #6d4720;
}
[data-theme="dark"] .bio-tile-name { color: #d6a878; }
.bio-tile-era {
    font-size: 0.75rem;
    color: var(--mst-muted);
    font-style: italic;
}
.bio-tile-summary {
    font-size: 0.88rem;
    color: var(--mst-muted);
    margin-top: 2px;
}
.bio-tile-count {
    font-size: 0.72rem;
    color: var(--mst-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* Home feed sort bar — small Latest / Popular pills above the cards. */
.feed-sort-bar {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--mst-border);
    font-size: 0.78rem;
}
[data-theme="dark"] .feed-sort-bar { background: rgba(255,255,255,0.05); }
.feed-sort-btn {
    padding: 3px 12px;
    border-radius: 999px;
    color: var(--mst-muted);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.feed-sort-btn:hover { color: var(--mst-primary); }
.feed-sort-btn.active {
    background: var(--mst-primary);
    color: #fff;
}
.feed-sort-btn.active:hover { color: #fff; }

/* Tier filter — segmented pill control on the Friends page.
   Each button's left edge gets a colored dot matching its tier. */
.tier-filter-group {
    display: inline-flex;
    gap: 0;
    padding: 3px;
    border-radius: 999px;
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--mst-border);
    font-size: 0.78rem;
}
[data-theme="dark"] .tier-filter-group { background: rgba(255,255,255,0.05); }
.tier-filter-btn {
    padding: 4px 12px 4px 22px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--mst-muted);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: background 0.15s, color 0.15s;
}
.tier-filter-btn::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--tier-acquaintances);
}
.tier-filter-btn[data-tier-color="friends"]::before { background: var(--tier-friends); }
.tier-filter-btn[data-tier-color="family"]::before  { background: var(--tier-family); }
.tier-filter-btn:hover { color: var(--mst-text); background: rgba(0,0,0,0.04); }
.tier-filter-btn.active {
    background: var(--mst-card);
    color: var(--mst-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Quick filter pills (Channels / Biographies on/off). One click toggles
   the user's per-feed-pref without having to open Settings. */
.feed-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--mst-border);
    background: var(--mst-card);
    color: var(--mst-text);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.feed-filter-btn:hover {
    border-color: var(--mst-primary);
}
.feed-filter-btn .feed-filter-state {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
}
.feed-filter-btn.is-on .feed-filter-state {
    background: var(--mst-primary);
    color: #fff;
}
.feed-filter-btn.is-off {
    opacity: 0.6;
    color: var(--mst-muted);
}
.feed-filter-btn.is-off .feed-filter-state {
    background: rgba(0,0,0,0.10);
    color: var(--mst-muted);
}
[data-theme="dark"] .feed-filter-btn.is-off .feed-filter-state {
    background: rgba(255,255,255,0.10);
}
.feed-filter-btn.is-off .feed-filter-icon { filter: grayscale(60%); }

/* Admin: signup-ordinal badge (#1 = first ever signup) */
.user-ordinal-badge {
    background: rgba(15,100,102,0.10);
    color: var(--mst-primary);
    font-family: 'Georgia', serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
[data-theme="dark"] .user-ordinal-badge {
    background: rgba(120,200,200,0.12);
    color: #8fd2d4;
}

/* Media reorder grid — drag-to-reorder thumbnails on Create + Edit so the
   writer picks which photo becomes the home-feed cover. Uses HTML5 drag &
   drop; tiles carry the form input that submits the new order. */
.media-reorder-grid {
    /* Two columns of tile-rows on wider screens, one column on narrow. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.02);
    border: 1px dashed var(--mst-border);
    border-radius: 8px;
}
[data-theme="dark"] .media-reorder-grid { background: rgba(255,255,255,0.03); }
.media-reorder-tile {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 6px;
    overflow: hidden;
    cursor: grab;
    background: #000;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    user-select: none;
    flex: 0 0 auto;
}
.media-tile-row > .media-reorder-tile { aspect-ratio: auto; }
.media-reorder-tile:active { cursor: grabbing; }
.media-reorder-tile.dragging { opacity: 0.45; transform: scale(0.97); }
.media-reorder-tile.drag-over { box-shadow: 0 0 0 3px var(--mst-primary); }
.media-reorder-tile img,
.media-reorder-tile video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    pointer-events: none; /* let drag events fire on the tile, not the img */
}
.media-reorder-grip {
    position: absolute; top: 4px; right: 6px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    font-size: 0.95rem;
    pointer-events: none;
}
.media-reorder-badge {
    position: absolute; bottom: 4px; left: 6px;
    background: rgba(0,0,0,0.65); color: #fff;
    padding: 1px 6px; border-radius: 4px;
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.media-reorder-remove {
    position: absolute; top: 4px; left: 4px;
    width: 22px; height: 22px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background 0.15s;
}
.media-reorder-remove:hover { background: #dc3545; }

/* Per-tile media row — a thumbnail tile on the left + a layout-position
   panel on the right. The panel makes the picker much more findable than
   the old tiny corner overlay. */
.media-tile-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 6px;
    border: 1px solid var(--mst-border);
    border-radius: 8px;
    background: var(--mst-card);
}
.media-tile-row .media-reorder-tile {
    flex: 0 0 auto;
}
.media-layout-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
}
.media-layout-panel-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mst-muted);
    font-weight: 600;
}
.media-layout-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    width: 64px; height: 64px;
    background: rgba(0,0,0,0.06);
    padding: 3px;
    border-radius: 6px;
}
/* Finer 4-col × 8-row picker — used in newspaper / book mode for more
   precise spans. Cells are tiny but density is the point: shift-click
   selects rectangles for any size from 1 cell up to 32. */
.media-layout-panel-grid.layout-grid-fine {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: 88px; height: 176px;
    gap: 2px;
    padding: 3px;
}
.layout-grid-fine .media-layout-cell { border-radius: 1px; }
[data-theme="dark"] .media-layout-panel-grid { background: rgba(255,255,255,0.06); }
.media-layout-cell {
    background: rgba(0,0,0,0.10);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    transition: background 0.10s, transform 0.10s;
}
[data-theme="dark"] .media-layout-cell { background: rgba(255,255,255,0.10); }
.media-layout-cell:hover {
    background: rgba(15,100,102,0.35);
    transform: scale(1.10);
}
.media-layout-cell.active {
    background: var(--mst-primary);
    box-shadow: 0 0 0 1px var(--mst-primary-2, var(--mst-secondary)) inset;
}
.media-layout-panel-current {
    font-size: 0.78rem;
    color: var(--mst-text);
    font-weight: 600;
}
.media-layout-panel-hint {
    font-size: 0.68rem;
    color: var(--mst-muted);
    font-style: italic;
}

/* Shown in place of the per-image positioning grid on Standard
   personal posts for non-admin users — the grid stays exclusive
   to Newspaper/Book posts (and admin previews) until premium
   ships. */
.media-layout-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px dashed rgba(160,110,60,0.40);
    border-radius: 10px;
    background: rgba(160,110,60,0.06);
    color: var(--mst-text);
    max-width: 320px;
}
[data-theme="dark"] .media-layout-locked {
    background: rgba(217,199,154,0.08);
    border-color: rgba(217,199,154,0.30);
}
.media-layout-locked-icon { font-size: 1.4rem; flex-shrink: 0; }
.media-layout-locked-body { min-width: 0; }
.media-layout-locked-title {
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--mst-primary);
    line-height: 1.2;
}
.media-layout-locked-sub {
    font-size: 0.74rem;
    color: var(--mst-muted);
    margin-top: 2px;
}

/* ── Premium badge + gate ──────────────────────────────────────────
   Small ⭐ chip that sits next to any premium-tagged feature, and a
   replacement card for when the feature is locked. Today (enforcement
   off) the gate is unused — every view's IsAvailableAsync returns true
   so the actual feature renders alongside the badge. When enforcement
   flips on, non-subscribers see the gate where the feature used to be. */
.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(240,192,64,0.18);
    border: 1px solid rgba(240,192,64,0.55);
    color: #8a5a00;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
    vertical-align: 2px;
    cursor: help;
}
.premium-badge-star { font-size: 0.74rem; }
[data-theme="dark"] .premium-badge {
    background: rgba(240,192,64,0.18);
    border-color: rgba(240,192,64,0.5);
    color: #f0c040;
}

.premium-gate {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px dashed rgba(240,192,64,0.55);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(240,192,64,0.08), rgba(160,110,60,0.06));
    color: var(--mst-text);
    max-width: 460px;
}
[data-theme="dark"] .premium-gate {
    background: linear-gradient(135deg, rgba(240,192,64,0.10), rgba(217,199,154,0.06));
    border-color: rgba(240,192,64,0.40);
}
.premium-gate-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.premium-gate-body { flex: 1; min-width: 0; }
.premium-gate-title {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--mst-primary);
    line-height: 1.2;
}
.premium-gate-sub {
    color: var(--mst-muted);
    font-size: 0.84rem;
    margin: 4px 0 8px 0;
    line-height: 1.4;
}
.premium-gate-cta {
    display: inline-block;
    font-weight: 700;
    color: var(--mst-primary);
    text-decoration: none;
    font-size: 0.86rem;
}
.premium-gate-cta:hover {
    color: var(--mst-primary-2, var(--mst-secondary));
    text-decoration: underline;
}

/* ── People profiles (NPC cards) ───────────────────────────────────
   Grid of "people you write about" — non-member profiles created by
   the user. Bubble avatar + name + relation, click → full profile. */
.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}
.people-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--mst-card);
    border: 1px solid var(--mst-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--mst-text);
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.people-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
    border-color: rgba(160,110,60,0.45);
    color: var(--mst-text);
}
[data-theme="dark"] .people-card { background: rgba(255,255,255,0.04); }
.people-card-avatar {
    width: 56px; height: 56px; flex-shrink: 0;
}
.people-card-avatar img,
.people-card-initials {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mst-light, #f5efe6);
    color: var(--mst-primary);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}
.people-card-body { flex: 1; min-width: 0; }
.people-card-name {
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.2;
    color: var(--mst-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.people-card-relation {
    font-size: 0.8rem;
    color: var(--mst-muted);
    margin-top: 2px;
}
.people-card-range {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-size: 0.85rem;
    color: var(--mst-primary);
    margin-top: 4px;
    letter-spacing: 0.03em;
}
.people-card-linked {
    font-size: 0.72rem;
    color: #2a7a2a;
    margin-top: 4px;
    font-weight: 600;
}

/* Profile detail header — bigger avatar + meta on the left, action
   buttons on the right. */
.person-detail-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}
.person-detail-avatar { width: 88px; height: 88px; flex-shrink: 0; }
.person-detail-avatar img,
.person-detail-initials {
    width: 88px; height: 88px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mst-light, #f5efe6);
    color: var(--mst-primary);
    font-weight: 800;
    font-size: 1.6rem;
}
.person-detail-meta { flex: 1; min-width: 0; }
.person-detail-name {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--mst-text);
    margin: 0;
    line-height: 1.1;
}
.person-detail-relation {
    color: var(--mst-muted);
    font-style: italic;
    margin-top: 2px;
}
.person-detail-range {
    color: var(--mst-primary);
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    margin-top: 6px;
    letter-spacing: 0.04em;
}
.person-detail-places > div { margin-top: 4px; }
.person-detail-linked {
    background: rgba(34,139,34,0.10);
    color: #2a7a2a;
    border: 1px solid rgba(34,139,34,0.25);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-block;
}
.person-detail-actions { flex-shrink: 0; }
.person-detail-bio {
    background: rgba(160,110,60,0.06);
    border-left: 3px solid rgba(160,110,60,0.5);
    padding: 12px 16px;
    border-radius: 8px;
    line-height: 1.55;
}
[data-theme="dark"] .person-detail-bio { background: rgba(217,199,154,0.08); }
@media (max-width: 575px) {
    .media-tile-row { flex-direction: column; align-items: center; }
    .media-layout-panel { align-items: center; }
}

/* "Connect your memory to this story" — call-to-action that appears at
   the bottom of channel articles, inviting readers to write their own
   memory of the event. The new memory carries an "inspired by" chip
   linking back, and the source article surfaces a count of connected
   memories. Designed to feel like a quiet invitation, not a hard CTA —
   it's editorial, not marketing. */
.connect-memory-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px;
    border-top: 1px solid var(--mst-border);
    border-bottom: 1px solid var(--mst-border);
    background: rgba(160,110,60,0.05);
}
.connect-memory-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px dashed rgba(160,110,60,0.5);
    background: rgba(255,255,255,0.5);
    color: var(--mst-text);
    text-decoration: none;
    transition: background-color .15s, border-color .15s, transform .12s;
}
.connect-memory-btn:hover {
    background: rgba(255,255,255,0.85);
    border-color: var(--mst-accent);
    color: var(--mst-text);
    transform: translateY(-1px);
}
[data-theme="dark"] .connect-memory-btn {
    background: rgba(255,255,255,0.04);
    border-color: rgba(217,199,154,0.30);
}
[data-theme="dark"] .connect-memory-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--mst-accent);
}
.connect-memory-icon { font-size: 1.4rem; flex-shrink: 0; }
.connect-memory-label { display: flex; flex-direction: column; gap: 2px; }
.connect-memory-title { font-weight: 600; font-size: 0.98rem; }
.connect-memory-sub { font-size: 0.78rem; color: var(--mst-muted); }
.connect-memory-count {
    align-self: flex-end;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mst-primary);
    text-decoration: none;
}
.connect-memory-count:hover { text-decoration: underline; }

/* Inline chip on the home-feed channel card — quieter than the full
   "Connect your memory" CTA on the detail page, but still discoverable. */
.connect-memory-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(160,110,60,0.08);
    border: 1px solid rgba(160,110,60,0.30);
    color: var(--mst-primary);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}
.connect-memory-chip:hover {
    background: rgba(160,110,60,0.18);
    color: var(--mst-primary);
}
.connect-memory-chip-icon { opacity: 0.85; }

/* Flag-button language picker (Profile → Look & language). Two big
   tappable buttons, side by side, with the active one outlined. */
.lang-flag-picker {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.lang-flag-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 2px solid var(--mst-border);
    background: #fff;
    color: var(--mst-text);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    transition: border-color .12s, background-color .12s, transform .12s;
}
.lang-flag-btn:hover {
    border-color: var(--mst-primary);
    transform: translateY(-1px);
}
.lang-flag-btn.is-active {
    border-color: var(--mst-primary);
    background: rgba(160,110,60,0.08);
    color: var(--mst-primary);
}
.lang-flag-btn .lang-flag {
    /* legacy — flags removed; kept so any old markup still renders. */
    font-size: 1.4rem;
    line-height: 1;
}

/* ── Mobile side drawer ─────────────────────────────────────────────
   Replaces the bootstrap navbar collapse on phones. The hamburger
   slides this in from the right; backdrop catches taps outside. */
.kron-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1050;
    opacity: 0;
    transition: opacity .2s ease;
}
.kron-drawer-backdrop.is-open { opacity: 1; }
.kron-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 84%;
    max-width: 320px;
    background: #fff;
    box-shadow: -10px 0 28px rgba(0,0,0,0.18);
    z-index: 1051;
    transform: translateX(100%);
    transition: transform .25s ease-out;
    display: flex;
    flex-direction: column;
}
.kron-drawer.is-open { transform: translateX(0); }
[data-theme="dark"] .kron-drawer {
    background: #1d1b16;
    box-shadow: -10px 0 28px rgba(0,0,0,0.5);
}
.kron-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mst-border);
    background: var(--mst-primary);
    color: #fff;
}
.kron-drawer-title {
    font-weight: 800;
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}
.kron-drawer-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
}
.kron-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 18px 0;
}
.kron-drawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: var(--mst-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    font-size: 0.98rem;
    width: 100%;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.kron-drawer-link:hover,
.kron-drawer-link:active {
    background: rgba(160,110,60,0.08);
    color: var(--mst-primary);
}
[data-theme="dark"] .kron-drawer-link {
    border-bottom-color: rgba(255,255,255,0.06);
    color: var(--mst-text);
}
[data-theme="dark"] .kron-drawer-link:hover,
[data-theme="dark"] .kron-drawer-link:active {
    background: rgba(217,199,154,0.10);
    color: var(--mst-accent);
}
.kron-drawer-link svg { color: var(--mst-primary); flex-shrink: 0; }
[data-theme="dark"] .kron-drawer-link svg { color: var(--mst-accent); }
.kron-drawer-icon-emoji {
    width: 22px;
    text-align: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.kron-drawer-divider {
    margin: 8px 16px;
    border-color: var(--mst-border);
    opacity: 0.6;
}
.kron-drawer-logout-form { margin: 0; padding: 0; }
.kron-drawer-logout {
    color: #b34141 !important;
}
.kron-drawer-logout:hover {
    background: rgba(179,65,65,0.08) !important;
    color: #b34141 !important;
}
/* Lock body scroll while drawer is open so the page underneath
   doesn't scroll behind the panel. */
body.kron-drawer-open { overflow: hidden; }
@media (min-width: 768px) {
    /* Drawer is mobile-only — never shows on tablet/desktop. */
    .kron-drawer,
    .kron-drawer-backdrop { display: none !important; }
}

/* Translate button: standard blue globe everywhere it appears so the
   icon reads as "translate" without ambiguity. */
.translate-globe svg {
    color: #1e90ff;
    stroke: #1e90ff;
    fill: none;
}
.translate-globe:hover svg {
    color: #0d6efd;
    stroke: #0d6efd;
}
[data-theme="dark"] .lang-flag-btn {
    background: rgba(255,255,255,0.05);
    border-color: rgba(217,212,197,0.18);
    color: var(--mst-text);
}
[data-theme="dark"] .lang-flag-btn.is-active {
    background: rgba(217,199,154,0.14);
    border-color: var(--mst-accent);
    color: var(--mst-accent);
}
[data-theme="dark"] .connect-memory-chip {
    background: rgba(217,199,154,0.10);
    border-color: rgba(217,199,154,0.30);
    color: var(--mst-accent);
}

/* "Inspired by" chip on a post that's a memory of another story —
   sits in the post header next to the channel/bio strips. */
.memory-of-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(160,110,60,0.10);
    border: 1px solid rgba(160,110,60,0.30);
    color: inherit;
    font-size: 0.82rem;
}
.memory-of-chip:hover {
    background: rgba(160,110,60,0.18);
    color: inherit;
}
.memory-of-chip-icon { opacity: 0.8; }
.memory-of-chip-label { color: var(--mst-muted); }
.memory-of-chip-name { font-weight: 600; }

/* Banner shown at the top of the Create form when the writer arrived
   via "Connect your memory" — reminds them what they're responding to. */
.memory-of-banner {
    display: flex;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(160,110,60,0.08);
    border: 1px solid rgba(160,110,60,0.30);
}
.memory-of-banner .memory-of-icon { font-size: 1.6rem; }
.memory-of-banner .memory-of-text { flex: 1; min-width: 0; }
[data-theme="dark"] .memory-of-banner {
    background: rgba(217,199,154,0.08);
    border-color: rgba(217,199,154,0.25);
}

/* ── Direct messages ───────────────────────────────────────────────────
   Three goals for the chat surface:
   1. Reads instantly as "messages app" (header + scrolling thread + bottom
      composer + bubbles), not a generic card with a list.
   2. Bubbles align by author — me right, them left — with avatars only on
      the first row of a sender's run.
   3. Day dividers separate runs across days; consecutive same-day messages
      from the same sender stack tightly.                                */
.chat-card {
    display: flex;
    flex-direction: column;
    height: 78vh;
    min-height: 500px;
    background: #fff;
    border: 1px solid var(--mst-border);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    overflow: hidden;
}
[data-theme="dark"] .chat-card {
    background: #1d1b16;
    border-color: rgba(217,212,197,0.15);
}
.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mst-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
    flex-shrink: 0;
}
[data-theme="dark"] .chat-header {
    background: linear-gradient(180deg, rgba(34,31,23,0.95), rgba(34,31,23,0.8));
}
.chat-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--mst-light, #f5efe6);
    color: var(--mst-primary);
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background-color .12s;
}
.chat-back-btn:hover { background: rgba(160,110,60,0.20); color: var(--mst-primary); }
.chat-header-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-header-text { display: flex; flex-direction: column; min-width: 0; }
.chat-header-name {
    font-weight: 700;
    color: var(--mst-text);
    line-height: 1.2;
    font-size: 1rem;
}
.chat-header-name:hover { color: var(--mst-primary); }
.chat-header-username { color: var(--mst-muted); font-size: 0.78rem; }

/* The scrolling thread itself — slightly tinted background separates it
   visually from the header/composer surfaces. */
.chat-thread {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 18px 4px 18px;
    background: #f7f5ef;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(160,110,60,0.06) 1px, transparent 1px);
    background-size: 24px 24px;
}
[data-theme="dark"] .chat-thread {
    background: #14110d;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(217,199,154,0.05) 1px, transparent 1px);
}

/* Empty state in an open conversation */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--mst-muted);
    text-align: center;
    padding: 40px 20px;
}
.chat-empty-icon { font-size: 2.4rem; margin-bottom: 8px; opacity: 0.6; }
.chat-empty-title { font-weight: 600; color: var(--mst-text); margin-bottom: 4px; }
.chat-empty-sub { font-size: 0.88rem; }

/* Day divider — small chip in the centre of a thin line */
.chat-day-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 10px 0;
    color: var(--mst-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.chat-day-divider::before,
.chat-day-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--mst-border);
}
.chat-day-divider span { font-weight: 600; }

/* One message row — me on the right, them on the left.
   Continuation rows tighten the vertical spacing and skip the avatar. */
.chat-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}
.chat-row.is-continuation { margin-top: -8px; }
.chat-row.is-me {
    justify-content: flex-end;
}
.chat-row.is-them {
    justify-content: flex-start;
}
.chat-avatar-slot {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
}
.chat-avatar-fallback {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--mst-light, #f5efe6);
    color: var(--mst-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
}
.chat-bubble-group {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    min-width: 0;
}
.chat-row.is-me .chat-bubble-group { align-items: flex-end; }
.chat-row.is-them .chat-bubble-group { align-items: flex-start; }
.chat-bubble {
    padding: 9px 14px;
    border-radius: 18px;
    line-height: 1.45;
    font-size: 0.95rem;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.chat-row.is-me .chat-bubble {
    background: var(--mst-primary);
    color: #fff;
    border-radius: 18px 18px 4px 18px;
}
.chat-row.is-them .chat-bubble {
    background: #fff;
    color: var(--mst-text);
    border: 1px solid var(--mst-border);
    border-radius: 18px 18px 18px 4px;
}
[data-theme="dark"] .chat-row.is-them .chat-bubble {
    background: #2a2620;
    border-color: rgba(217,212,197,0.15);
    color: var(--mst-text);
}
.chat-row.is-continuation.is-me .chat-bubble { border-radius: 18px 4px 4px 18px; }
.chat-row.is-continuation.is-them .chat-bubble { border-radius: 4px 18px 18px 4px; }
.chat-time {
    font-size: 0.7rem;
    color: var(--mst-muted);
    margin-top: 3px;
    padding: 0 4px;
}
.chat-row.is-continuation .chat-time { display: none; }

/* Composer at the bottom: rounded textarea + circular send button */
.chat-composer {
    flex-shrink: 0;
    padding: 10px 12px 12px 12px;
    border-top: 1px solid var(--mst-border);
    background: #fff;
}
[data-theme="dark"] .chat-composer { background: #1d1b16; }
.chat-composer-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.chat-composer-input {
    flex: 1;
    resize: none;
    border-radius: 22px;
    padding: 10px 18px;
    min-height: 42px;
    max-height: 140px;
    overflow-y: auto;
    border: 1px solid var(--mst-border);
    background: var(--mst-light, #f5efe6);
    color: var(--mst-text);
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color .12s, background-color .12s;
}
.chat-composer-input:focus {
    outline: none;
    border-color: var(--mst-primary);
    background: #fff;
}
[data-theme="dark"] .chat-composer-input {
    background: #2a2620;
    border-color: rgba(217,212,197,0.15);
}
[data-theme="dark"] .chat-composer-input:focus {
    background: #322d24;
}
.chat-composer-send {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--mst-primary);
    color: #fff;
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .12s, transform .12s;
}
.chat-composer-send:hover:not(:disabled) {
    background: var(--mst-primary-2, var(--mst-secondary));
    transform: translateY(-1px);
}
.chat-composer-send:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-composer-error {
    color: #b34141;
    font-size: 0.78rem;
    margin-top: 4px;
    padding: 0 12px;
}

@media (max-width: 575px) {
    .chat-card { height: calc(100vh - 110px); border-radius: 0; }
    .chat-bubble-group { max-width: 82%; }
}

/* ── Inbox / messages list ────────────────────────────────────────────
   Replaces the row of tier-coloured circles + "list of names" with a
   stacked conversation list that reads as messages: avatar, name, last
   message preview, time, unread chip. */
.inbox-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.inbox-page-title {
    font-weight: 800;
    color: var(--mst-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
}
.inbox-page-title .inbox-icon { font-size: 1.3rem; }
.inbox-unread-pill {
    background: var(--mst-primary);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 700;
}
.inbox-new-btn {
    background: var(--mst-primary);
    color: #fff;
    border: none;
    border-radius: 22px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color .12s, transform .12s;
}
.inbox-new-btn:hover {
    background: var(--mst-primary-2, var(--mst-secondary));
    color: #fff;
    transform: translateY(-1px);
}

.inbox-search-row { margin-bottom: 14px; }
.inbox-search-row .form-control { border-radius: 22px; padding: 10px 18px; }

.inbox-conversations {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--mst-border);
    border-radius: 14px;
    overflow: hidden;
}
[data-theme="dark"] .inbox-conversations {
    background: #1d1b16;
    border-color: rgba(217,212,197,0.15);
}
.inbox-conversation {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--mst-border);
    transition: background-color .12s;
}
.inbox-conversation:last-child { border-bottom: none; }
.inbox-conversation:hover {
    background: rgba(160,110,60,0.06);
    color: inherit;
}
[data-theme="dark"] .inbox-conversation:hover { background: rgba(217,199,154,0.07); }
.inbox-conversation-avatar { flex-shrink: 0; }
.inbox-conversation-body { flex: 1 1 auto; min-width: 0; }
.inbox-conversation-row1 {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.inbox-conversation-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mst-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inbox-conversation.is-unread .inbox-conversation-name { font-weight: 800; color: var(--mst-primary); }
.inbox-conversation-time {
    color: var(--mst-muted);
    font-size: 0.74rem;
    flex-shrink: 0;
}
.inbox-conversation-preview {
    color: var(--mst-muted);
    font-size: 0.84rem;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inbox-conversation.is-unread .inbox-conversation-preview {
    color: var(--mst-text);
    font-weight: 600;
}
.inbox-conversation-unread {
    background: var(--mst-primary);
    color: #fff;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.74rem;
    font-weight: 700;
    flex-shrink: 0;
    align-self: center;
}

.inbox-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--mst-muted);
    background: #fff;
    border: 1px dashed var(--mst-border);
    border-radius: 14px;
}
[data-theme="dark"] .inbox-empty { background: #1d1b16; border-color: rgba(217,212,197,0.15); }
.inbox-empty-icon { font-size: 2.4rem; margin-bottom: 8px; opacity: 0.6; }
.inbox-empty-title { font-weight: 700; color: var(--mst-text); margin-bottom: 4px; font-size: 1.05rem; }
.inbox-empty-sub { font-size: 0.88rem; margin-bottom: 14px; }

/* Per-item mute list (Settings → Feed filters) — checkbox list of every
   channel and every biographical account. Compact and readable so a long
   list doesn't feel like a wall of checkboxes. */
.mute-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 4px 12px;
    margin-bottom: 6px;
}
.mute-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.10s;
}
.mute-item:hover { background: rgba(0,0,0,0.03); }
[data-theme="dark"] .mute-item:hover { background: rgba(255,255,255,0.04); }
.mute-item input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.mute-item-icon { font-size: 1rem; flex: 0 0 auto; }
.mute-item-body { flex: 1; min-width: 0; line-height: 1.2; font-size: 0.88rem; }
.mute-item-sub {
    display: block;
    color: var(--mst-muted);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Card-level skin for posts in newspaper / book mode — gives the wrapper
   card a distinct paper texture so the page stops looking like every
   other post card. The article-layout markup inside still controls the
   typography. */
.post-skin-newspaper {
    background: #fbfaf6 !important;
    border: 1px solid #d9d4c5 !important;
    border-top: 4px double #2a2520 !important;
}
.post-skin-newspaper .card-body { padding: 1.6rem 1.4rem; }
[data-theme="dark"] .post-skin-newspaper {
    background: #221f17 !important;
    border-color: rgba(217,212,197,0.18) !important;
    border-top: 4px double #d9d4c5 !important;
}
.post-skin-book {
    background: #fbf7ee !important;
    border: 1px solid #d9c79a !important;
    box-shadow: 0 8px 28px rgba(160,110,60,0.14) !important;
    border-radius: 6px !important;
}
.post-skin-book .card-body { padding: 1.8rem 2rem; }
[data-theme="dark"] .post-skin-book {
    background: #2a2418 !important;
    border-color: rgba(217,199,154,0.20) !important;
}

/* ── Newspaper / book article layout ─────────────────────────────────
   Used on the Detail page for channel posts (newspaper) and biographical
   posts (book chapter). Each post's images can be positioned around the
   body text via a 9-cell grid set on the Edit page. */
.article-layout {
    font-family: 'Georgia', 'Cormorant Garamond', serif;
    color: var(--mst-text);
}
.article-head {
    text-align: center;
    border-bottom: 1px solid var(--mst-border);
    padding-bottom: 14px;
    margin-bottom: 18px;
}
.article-headline {
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mst-text);
    margin: 0 0 6px 0;
    letter-spacing: -0.005em;
}
.article-byline {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--mst-muted);
}
.article-tagged {
    font-size: 0.85rem;
    color: var(--mst-muted);
    margin-top: 4px;
    font-style: italic;
}
.article-prose {
    line-height: 1.7;
    font-size: 1.02rem;
    color: var(--mst-text);
}
.article-prose > p {
    /* Each paragraph stands on its own — no top margin on the first so the
       drop-cap aligns with the column rule. break-inside avoids splitting a
       paragraph awkwardly across newspaper columns. */
    margin: 0 0 0.9em 0;
    break-inside: avoid-column;
}
.article-prose > p:last-child { margin-bottom: 0; }
.article-prose::after {
    /* Clear floats inside the body so the next sibling lays out cleanly. */
    content: ""; display: block; clear: both;
}

/* Newspaper — channel posts. The body is a real 2-column CSS grid (not
   multicol) so floats inside each journal column wrap text within that
   column instead of leaking across both. The 4×8 placement grid maps to
   journal columns: cols 0-1 → left col, cols 2-3 → right col. Heroes
   (width 3+) are siblings of the grid and span the article. */
.article-newspaper .article-headline {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-size: 2.4rem;
    font-weight: 800;
}
.article-newspaper .article-prose.article-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    text-align: justify;
    hyphens: auto;
    /* Override the generic column rules so we don't get a vertical bar
       between the cols by default — the gap alone reads as separation. */
    column-count: auto;
    column-rule: none;
}
.article-newspaper .article-news-col {
    min-width: 0;
    /* New block formatting context — contains floats. */
    overflow: hidden;
}
.article-newspaper .article-news-col-2 {
    /* Subtle vertical rule sitting at the start of the right column,
       inside the gap. */
    border-left: 1px solid var(--mst-border);
    padding-left: 16px;
    margin-left: -16px;
}
@media (max-width: 767.98px) {
    .article-newspaper .article-prose.article-news-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
        text-align: left;
    }
    .article-newspaper .article-news-col-2 {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        margin-top: 12px;
    }
}
/* Drop cap on the first paragraph of the left journal column. */
.article-newspaper .article-news-col-1 > p:first-of-type::first-letter {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 0.9;
    float: left;
    padding: 4px 8px 0 0;
    color: var(--mst-primary);
}
/* Image classes inside a journal column need to be sized to the column,
   not the full article — width 1 covers half the column, width 2+ fills it. */
.article-newspaper .article-news-col .article-image.art-img-w-1 {
    max-width: 50%;
    min-width: 0;
}
.article-newspaper .article-news-col .article-image.art-img-w-2,
.article-newspaper .article-news-col .article-image.art-img-fill {
    max-width: 100%;
    min-width: 0;
    float: none;
    display: block;
    margin: 12px 0;
}
.art-img-fill {
    display: block;
    width: 100%;
    margin: 12px 0;
    float: none;
}
.art-img-fill img { width: 100%; }

/* Book — biographical posts. Single wider column, more luxurious leading,
   chapter-page feel with a centered ornament between the byline and the
   first paragraph. */
.article-book {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 8px;
}
.article-book .article-head {
    border-bottom: none;
    padding-bottom: 28px;
    position: relative;
}
.article-book .article-head::after {
    /* Tiny dingbat between the byline and the body. */
    content: "❦";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.05rem;
    color: var(--mst-accent);
    opacity: 0.8;
}
.article-book .article-headline {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.95rem;
    font-weight: 600;
}
.article-book .article-byline {
    letter-spacing: 0.10em;
    margin-top: 6px;
}
.article-book .article-prose {
    font-size: 1.04rem;
    line-height: 1.85;
    text-align: justify;
    hyphens: auto;
    padding-top: 4px;
}
.article-book .article-prose > p:first-of-type::first-letter {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 0.95;
    float: left;
    padding: 4px 8px 0 0;
    color: var(--mst-accent);
}

/* Image positioning — same 9-cell grid as the picker.
   Vertical band controls insertion point (top, middle, bottom);
   horizontal axis controls float / centering. Sizes are constrained
   to keep the article readable. */
.article-image {
    margin: 0 0 14px 0;
}
.article-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}
.article-image figcaption {
    font-size: 0.78rem;
    color: var(--mst-muted);
    font-style: italic;
    text-align: center;
    margin-top: 6px;
}

/* Image placement on the 4×8 grid:
     col 0          → float left
     col + width = 4 (anchored right) → float right
     width 4 (full)  → block hero, breaks newspaper columns
     anything else   → block centered
   Width on the page = (LayoutWidth / 4) × column width, with a small min so
   single-cell images aren't a postage stamp. */
.art-img-left {
    float: left;
    margin: 4px 18px 10px 0;
}
.art-img-right {
    float: right;
    margin: 4px 0 10px 18px;
}
.art-img-center {
    display: block;
    margin: 12px auto;
}
.art-img-hero {
    display: block;
    margin: 18px 0 22px 0;
    width: 100%;
    column-span: all; /* breaks newspaper 2-col flow when supported */
}
.art-img-hero img { width: 100%; }

/* Width by span (n / 4 of the article column). Newspaper article = 2
   columns, so 4 grid cols span the entire spread; book = 1 column, so
   4 grid cols span the chapter width. */
.art-img-w-1 { max-width: 28%; min-width: 140px; }
.art-img-w-2 { max-width: 50%; min-width: 180px; }
.art-img-w-3 { max-width: 75%; }
.art-img-w-4 { max-width: 100%; }

/* Tall spans get an aspect-ratio so the float pushes against more lines
   of body text. */
.art-img-h-2 img { aspect-ratio: 4 / 3; object-fit: cover; }
.art-img-h-3 img { aspect-ratio: 3 / 4; object-fit: cover; }
.art-img-h-4 img,
.art-img-h-5 img { aspect-ratio: 2 / 3; object-fit: cover; }
.art-img-h-6 img,
.art-img-h-7 img,
.art-img-h-8 img { aspect-ratio: 9 / 16; object-fit: cover; }

/* Heroes use a wider aspect since they span the full article width. */
.art-img-hero.art-img-h-1 img { aspect-ratio: 21 / 9; }
.art-img-hero.art-img-h-2 img { aspect-ratio: 16 / 9; }
.art-img-hero.art-img-h-3 img { aspect-ratio: 4 / 3; }
.art-img-hero.art-img-h-4 img,
.art-img-hero.art-img-h-5 img,
.art-img-hero.art-img-h-6 img,
.art-img-hero.art-img-h-7 img,
.art-img-hero.art-img-h-8 img { aspect-ratio: 1 / 1; }

@media (max-width: 575px) {
    /* Tight phones: floats break — full-width all images. */
    .art-img-left, .art-img-right, .art-img-center, .art-img-hero,
    .art-img-w-1, .art-img-w-2, .art-img-w-3, .art-img-w-4 {
        float: none;
        max-width: 100%;
        margin: 12px 0;
    }
}

/* ── Home feed cards: newspaper / book skin ────────────────────────────
   Apply when the post's LayoutStyle (or its channel/bio fallback) puts it
   in article mode. Lighter than the Detail page treatment — title goes
   serif, the card gets a subtle paper background and a thin top rule. */
.feed-card-newspaper {
    background: #fbfaf6 !important;
    border: 1px solid #e2dcc7 !important;
    border-top: 3px double #2a2520 !important;
}
.feed-card-newspaper .post-title-headline {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--mst-text);
    line-height: 1.2;
    margin-bottom: 4px;
}
[data-theme="dark"] .feed-card-newspaper {
    background: #221f17 !important;
    border-color: rgba(217,212,197,0.20) !important;
    border-top: 3px double #d9d4c5 !important;
}
.feed-card-book {
    background: #fbf7ee !important;
    border: 1px solid #e6d6ab !important;
    border-radius: 6px !important;
}
.feed-card-book .post-title-headline {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--mst-primary);
    line-height: 1.2;
}
[data-theme="dark"] .feed-card-book {
    background: #2a2418 !important;
    border-color: rgba(230,214,171,0.20) !important;
}
[data-theme="dark"] .feed-card-book .post-title-headline { color: var(--mst-accent); }

/* Focal-point indicator dot — tells the writer where the cover-crop will
   center on this picture. Sits on top of the tile thumbnail; positioned
   via per-tile CSS variables so we don't have to re-render to move it. */
.media-focus-dot {
    position: absolute;
    width: 14px; height: 14px;
    margin-left: -7px; margin-top: -7px;
    left: var(--focus-x, 50%); top: var(--focus-y, 50%);
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.45);
    pointer-events: none;
    transition: left 0.15s, top 0.15s;
}

/* Site announcement banner — sits between the navbar and main content.
   Three severity flavors mapped to the existing palette. Dismissible
   per user; admin bumping the version re-shows it to everyone. */
.site-banner {
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 0.88rem;
}
.site-banner-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    flex-wrap: wrap;
}
.site-banner-text { line-height: 1.4; }
.site-banner-link {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.site-banner-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.site-banner-close:hover { opacity: 1; }
.site-banner-info {
    background: rgba(15,100,102,0.10);
    color: #0a4f51;
}
.site-banner-info .site-banner-link { color: var(--mst-primary); }
.site-banner-warning {
    background: rgba(240,192,64,0.20);
    color: #6b4e10;
}
.site-banner-warning .site-banner-link { color: #6b4e10; }
.site-banner-critical {
    background: rgba(220,53,69,0.16);
    color: #80212c;
}
.site-banner-critical .site-banner-link { color: #80212c; }
[data-theme="dark"] .site-banner-info    { background: rgba(120,200,200,0.16); color: #a7e0e0; }
[data-theme="dark"] .site-banner-warning { background: rgba(240,200,80,0.18); color: #f0c060; }
[data-theme="dark"] .site-banner-critical{ background: rgba(220,80,90,0.20); color: #ffaaa5; }

/* What's new modal — soft sepia memoir look so it reads as a release note,
   not a system alert. Body text preserves newlines with white-space:pre-line. */
.whats-new-modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.18);
    overflow: hidden;
}
.whats-new-head {
    background: linear-gradient(180deg, rgba(184,135,26,0.12), rgba(184,135,26,0.02));
    border-bottom: 1px solid rgba(184,135,26,0.25);
    align-items: center;
}
.whats-new-tag {
    background: var(--mst-accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 9px;
    border-radius: 999px;
}
.whats-new-modal-content .modal-title {
    font-family: 'Georgia', serif;
    color: var(--mst-primary);
}
.whats-new-body {
    white-space: pre-line;
    line-height: 1.55;
    font-size: 0.95rem;
}

/* Cookie consent banner — quiet inline notice, dismissible. Floats just
   above the bottom edge as a card so it doesn't feel like a system alert. */
.cookie-banner {
    position: fixed;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    max-width: min(640px, calc(100% - 24px));
    background: rgba(40,42,55,0.96);
    color: #fff;
    padding: 10px 14px;
    z-index: 1900;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.82rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.20);
    backdrop-filter: blur(6px);
}
.cookie-banner a { color: #f0c060; }
.cookie-banner button { flex-shrink: 0; }
@media (max-width: 600px) {
    .cookie-banner {
        bottom: 0; left: 0; right: 0;
        max-width: none;
        transform: none;
        border-radius: 0;
        text-align: left;
        gap: 10px;
    }
}

/* Footer columns */
.footer ul li a { color: var(--mst-primary); text-decoration: none; }
.footer ul li a:hover { text-decoration: underline; }
.reaction-opt {
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--mst-muted);
    transition: transform .1s ease, color .1s ease, background .1s ease;
}
.reaction-opt:hover { transform: scale(1.18); background: var(--mst-surface-2); }
.reaction-opt[data-reaction="0"]:hover { color: #ef4444; }
.reaction-opt[data-reaction="1"]:hover { color: #2563eb; }
.reaction-opt[data-reaction="2"]:hover { color: #f59e0b; }
.reaction-opt[data-reaction="3"]:hover { color: var(--mst-primary); }
.reaction-opt[data-reaction="4"]:hover { color: #6b7280; }
.reaction-opt svg { width: 18px; height: 18px; stroke: currentColor; fill: currentColor; }
.reaction-opt[data-reaction="3"] svg,
.reaction-opt[data-reaction="4"] svg { fill: none; }

/* Reacted-state colors per reaction type on the main button */
.icon-action.like-btn[data-reaction="0"].liked { color: #ef4444; }
.icon-action.like-btn[data-reaction="1"].liked { color: #2563eb; }
.icon-action.like-btn[data-reaction="2"].liked { color: #f59e0b; }
.icon-action.like-btn[data-reaction="3"].liked { color: var(--mst-primary); }
.icon-action.like-btn[data-reaction="4"].liked { color: #6b7280; }
.icon-action.like-btn .reaction-icon { display: inline-flex; align-items: center; }

/* Borderless icon actions on post cards (like, comment) */
.icon-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 6px;
    color: var(--mst-muted);
    font-size: 0.88rem;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    transition: color .1s ease, background-color .1s ease, transform .08s ease;
}
.icon-action svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-action:hover { color: var(--mst-ink); background: var(--mst-surface-2); }
.icon-action.like-btn.liked { color: #ef4444; }
.icon-action.like-btn.liked svg { fill: #ef4444; stroke: #ef4444; transform: scale(1.08); transition: transform .1s ease; }

/* Tag bubbles */
.tag-bubble {
    display: inline-flex;
    align-items: center;
    background: var(--mst-light);
    color: var(--mst-primary);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 3px 10px 3px 6px;
    font-size: 0.78rem;
    font-weight: 500;
}
.tag-bubble button {
    background: none;
    border: none;
    color: var(--mst-primary);
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px 0 6px;
    cursor: pointer;
    opacity: 0.7;
}
.tag-bubble button:hover { opacity: 1; }

/* ============================================
   Onboarding overlay (Get Started)
   ============================================ */
.kron-onboard-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 43, 28, 0.72);
    backdrop-filter: blur(3px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.kron-onboard-modal {
    background: #fffdf3;
    border: 2px solid var(--mst-gold);
    border-radius: 18px;
    max-width: 640px;
    width: 100%;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    overflow: hidden;
    position: relative;
}
.kron-onboard-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: var(--mst-muted);
    cursor: pointer;
    z-index: 5;
}
.kron-onboard-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 253, 243, 0.92);
    border: 1px solid var(--mst-gold);
    font-size: 1.6rem;
    color: var(--mst-primary);
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    transition: color 0.12s ease, transform 0.12s ease, background 0.12s ease;
}
.kron-onboard-arrow:hover {
    color: var(--mst-accent);
    background: #fff;
}
.kron-onboard-arrow.left  { left: 10px; }
.kron-onboard-arrow.right { right: 10px; }
.kron-onboard-arrow.left:hover  { transform: translateY(-50%) translateX(-2px); }
.kron-onboard-arrow.right:hover { transform: translateY(-50%) translateX(2px); }
.kron-onboard-slide {
    padding: 28px 28px 12px;
    text-align: center;
    display: none;
}
.kron-onboard-slide.active { display: block; }
.kron-onboard-illustration {
    width: 100%;
    aspect-ratio: 10 / 9;
    background: linear-gradient(135deg, var(--mst-light) 0%, #fff8df 100%);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--mst-gold);
    position: relative;
}
.kron-onboard-illustration img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.kron-onboard-illustration--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    border-style: dashed;
    aspect-ratio: 10 / 9;
}
.kron-onboard-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mst-primary);
    margin-bottom: 4px;
}
.kron-onboard-tagline {
    font-style: italic;
    color: var(--mst-accent);
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 6px;
}
.kron-onboard-body {
    color: var(--mst-text);
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 4px;
}
.kron-onboard-caption {
    margin-top: 10px;
    font-size: 0.72rem;
    color: #9a9788;
    font-style: italic;
    line-height: 1.3;
}
.kron-onboard-example {
    font-size: 0.82rem;
    color: var(--mst-muted);
    font-style: italic;
    margin-top: 10px;
    padding: 8px 12px;
    background: #fdfaea;
    border-left: 3px solid var(--mst-gold);
    text-align: left;
}
.kron-onboard-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 6px;
}
.kron-onboard-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d9d6c3;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.kron-onboard-dot.active { background: var(--mst-gold); }
.kron-onboard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px 20px;
    gap: 10px;
}
.kron-onboard-nav .dont-show {
    font-size: 0.78rem;
    color: var(--mst-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}