/* splitwithkids-v2 — preserves the V1 warm earth-tone RTL visual language,
   with a light cleanup: consistent spacing scale, cleaner cards, accessible
   focus states, and a tidier admin edit affordance. */

:root {
    --bg-primary: #FAF7F4;
    --bg-card: #FFFFFF;
    --text-primary: #2B2520;
    --text-secondary: #6B6460;
    --accent-warm: #C17A5E;
    --accent-warm-dark: #A5634A;
    --accent-soft: #E8D5C4;
    /* Very light tint of the accent, used for soft button/chip backgrounds.
       Derived from --accent-warm by the theme picker so it re-themes too. */
    --accent-tint: #FFF6EE;
    --border-subtle: #E5DDD5;
    --shadow-soft: rgba(43, 37, 32, 0.08);
    --shadow-med: rgba(43, 37, 32, 0.12);
    --pinned-from: #E8F4F8;
    --pinned-to: #F0F8FA;
    --pinned-border: #B8D4DE;
    --radius: 4px;
    --radius-sm: 3px;
    --gap: 1rem;
}

* { box-sizing: border-box; }

html { font-size: 16px; }
html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
    font-family: 'Noto Sans Hebrew', 'Rubik', system-ui, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .user-name, .profile-name, .badge, .brand {
    font-family: 'Rubik', 'Noto Sans Hebrew', sans-serif;
}

a { color: var(--accent-warm-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 2px;
}

/* ---------- layout ---------- */

.topbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 1px 4px var(--shadow-soft);
}
.topbar:has(.nav-item.is-open),
.topbar:has(nav.open) {
    box-shadow: 0 4px 14px var(--shadow-med);
}
.topbar-inner {
    max-width: 1120px; margin: 0 auto;
    display: flex; align-items: center; gap: 1rem;
    padding: 0.65rem 1.25rem;
}
.topbar-bar { display: contents; }
.brand {
    font-weight: 700; font-size: 1.15rem; color: var(--text-primary);
    flex: 0 0 auto;
}
.brand:hover { text-decoration: none; color: var(--accent-warm-dark); }

/* ---------- theme color picker (E1) ---------- */
.theme-swatch-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }
.theme-swatch {
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    border: 2px solid var(--bg-card); box-shadow: 0 0 0 1px var(--border-subtle);
    background: var(--accent-warm); cursor: pointer; padding: 0; flex: none;
    transition: transform 0.15s ease;
}
.theme-swatch:hover { transform: scale(1.12); }
.theme-popover {
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 40;
    display: flex; flex-direction: column; gap: 0.6rem;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius); box-shadow: 0 6px 24px var(--shadow-med);
    padding: 0.8rem; min-width: 200px;
}
.theme-popover[hidden] { display: none; }
.theme-popover-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.theme-presets {
    display: grid;
    grid-template-columns: repeat(5, 1.6rem);
    gap: 0.45rem;
}
.theme-preset {
    width: 1.6rem; height: 1.6rem; border-radius: 50%; cursor: pointer;
    background: var(--swatch); border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 1px var(--border-subtle); padding: 0;
    transition: transform 0.12s ease;
}
.theme-preset:hover { transform: scale(1.15); }
.theme-custom { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; color: var(--text-secondary); }
.theme-custom input[type="color"] {
    width: 2rem; height: 1.6rem; padding: 0; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); background: none; cursor: pointer;
}
.theme-reset {
    border: none; background: none; color: var(--accent-warm-dark);
    font-size: 0.78rem; cursor: pointer; text-align: start; padding: 0; font-family: inherit;
}
.theme-reset:hover { text-decoration: underline; }

.topbar nav {
    flex: 1 1 auto;
    display: flex; align-items: center; gap: 0.7rem;
}
.nav-links {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 0.15rem; flex-wrap: wrap;
    list-style: none; margin: 0; padding: 0;
}
.nav-item { position: relative; }
.nav-link {
    display: inline-flex; align-items: center; gap: 0.28rem;
    color: var(--text-secondary); font-size: 0.92rem;
    font-family: inherit; background: none; border: none;
    padding: 0.4rem 0.55rem; border-radius: var(--radius-sm);
    cursor: pointer; text-decoration: none; line-height: 1.3;
    white-space: nowrap;
}
.nav-item.is-open > .nav-link {
    color: var(--accent-warm-dark); text-decoration: none;
}
.nav-link.is-current,
.nav-item.is-current-section > .nav-link {
    color: var(--text-primary); font-weight: 600;
}
.nav-caret {
    width: 0.42rem; height: 0.42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); translate: 0 -0.12rem;
    transition: transform 0.18s ease;
}
.nav-item.is-open > .nav-link .nav-caret {
    transform: rotate(-135deg); translate: 0 0.08rem;
}
.nav-account {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 0.6rem;
}
.topbar nav a { color: var(--text-secondary); font-size: 0.92rem; }
.topbar nav a:hover { color: var(--accent-warm-dark); }
.user-chip { font-size: 0.82rem; color: var(--text-secondary); }

/* mega menu — desktop panel under the sticky topbar */
.nav-mega {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 25;
    background: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow:
        inset 0 10px 16px -12px var(--shadow-med),
        0 12px 28px var(--shadow-med);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-item.has-mega { position: static; }
.nav-item.is-open > .nav-mega {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.nav-mega-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.35rem 1.25rem 1.55rem;
}
.nav-mega-kicker {
    font-family: 'Rubik', 'Noto Sans Hebrew', sans-serif;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
    color: var(--accent-warm-dark); margin: 0 0 1.05rem;
}
.nav-mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.75rem, 1fr));
    gap: 1.15rem 1.8rem;
    align-items: start;
}
.nav-mega-card {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.2rem 0;
    border: 0; background: none;
    color: var(--text-primary);
    text-decoration: none;
    min-width: 0;
}
.nav-mega-card:hover { text-decoration: none; color: var(--text-primary); }
.nav-mega-card.is-current .nav-mega-copy strong { color: var(--accent-warm-dark); }
.nav-mega-card.is-soon { opacity: 0.55; pointer-events: none; }
.nav-soon-badge {
    display: inline-block;
    font-family: 'Rubik', sans-serif;
    font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent-warm-dark);
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft);
    border-radius: 999px;
    padding: 0.02rem 0.5rem;
    margin-inline-start: 0.35rem;
    vertical-align: 0.1em;
}
.nav-mega-icon {
    flex: 0 0 auto;
    width: 2.55rem; height: 2.55rem; border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--icon-from, #C17A5E), var(--icon-to, #A5634A));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--icon-from, #C17A5E) 36%, transparent);
    transition: transform 0.16s ease;
}
.nav-mega-icon svg { width: 1.15rem; height: 1.15rem; display: block; }
.nav-mega-card[data-tone="1"]  { --icon-from: #C17A5E; --icon-to: #A5634A; }
.nav-mega-card[data-tone="2"]  { --icon-from: #5E86C1; --icon-to: #3F5F96; }
.nav-mega-card[data-tone="3"]  { --icon-from: #5EA177; --icon-to: #3E7A58; }
.nav-mega-card[data-tone="4"]  { --icon-from: #A15E9E; --icon-to: #7A3F78; }
.nav-mega-card[data-tone="5"]  { --icon-from: #C1A05E; --icon-to: #9A7C3E; }
.nav-mega-card[data-tone="6"]  { --icon-from: #3F8E8A; --icon-to: #2A6A67; }
.nav-mega-card[data-tone="7"]  { --icon-from: #C15E6E; --icon-to: #9A3E4E; }
.nav-mega-card[data-tone="8"]  { --icon-from: #5EA1C1; --icon-to: #3E7A96; }
.nav-mega-card[data-tone="9"]  { --icon-from: #6B5EC1; --icon-to: #4A3F96; }
.nav-mega-card[data-tone="10"] { --icon-from: #C15E9A; --icon-to: #9A3E76; }
.nav-mega-card[data-tone="11"] { --icon-from: #8A9E5E; --icon-to: #6A7A3E; }
.nav-mega-card[data-tone="12"] { --icon-from: #C17645; --icon-to: #9A542E; }
.nav-mega-copy {
    display: flex; flex-direction: column; gap: 0.12rem;
    min-width: 0;
}
.nav-mega-copy strong {
    font-family: 'Rubik', 'Noto Sans Hebrew', sans-serif;
    font-size: 0.95rem; font-weight: 700; line-height: 1.3;
}
.nav-mega-copy span {
    font-size: 0.8rem; line-height: 1.4;
    color: var(--text-secondary);
}

/* mobile hamburger toggle */
.nav-toggle,
.nav-mega-toggle {
    touch-action: manipulation;
}
.nav-toggle {
    display: none;
    flex: 0 0 auto;
    margin-inline-start: auto;
    flex-direction: column; justify-content: center; gap: 4px;
    width: 38px; height: 34px; padding: 6px;
    background: transparent; border: 1px solid var(--border-subtle);
    border-radius: 8px; cursor: pointer;
}
.nav-toggle span {
    display: block; height: 2px; width: 100%;
    background: var(--text-primary); border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (hover: hover) and (pointer: fine) {
    .nav-link:hover { color: var(--accent-warm-dark); text-decoration: none; }
    .nav-mega-card:hover .nav-mega-copy strong { color: var(--accent-warm-dark); }
    .nav-mega-card:hover .nav-mega-icon { transform: scale(1.06); }
}

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .topbar {
        border-bottom: none;
        box-shadow: none;
    }
    .topbar-inner {
        flex-wrap: wrap;
        padding-block: 0;
        row-gap: 0; /* בלי זה נשאר פס ריק מתחת לשורת התפריט כשהמגירה סגורה */
    }
    .topbar-bar {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex: 1 1 100%;
        position: relative;
        z-index: 3;
        margin-inline: -1.25rem;
        padding: 0.65rem 1.25rem;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border-subtle);
        box-shadow: 0 1px 4px var(--shadow-soft);
    }
    .topbar:has(nav.open) .topbar-bar {
        box-shadow: 0 8px 20px rgba(43, 37, 32, 0.18);
    }
    .topbar nav {
        flex-basis: 100%;
        order: 3;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        pointer-events: none;
        /* נמתח לשולי המסך כמו .topbar-bar, כדי שהרקע לא ייראה כמו בלוק צף על לבן */
        margin-inline: -1.25rem;
        padding-inline: 1.25rem;
        transition: max-height 0.28s ease, visibility 0.28s, box-shadow 0.2s ease;
    }
    .topbar nav.open {
        max-height: min(80vh, 42rem);
        overflow-y: auto;
        visibility: visible;
        pointer-events: auto;
        padding-top: 0.45rem;
        padding-bottom: 0.9rem;
        border-bottom: 1px solid var(--border-subtle);
        box-shadow: 0 8px 18px var(--shadow-soft);
        background: var(--bg-primary);
    }
    .nav-links {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
    }
    .nav-item.has-mega { position: relative; }
    .nav-link {
        width: 100%;
        justify-content: flex-start;
        gap: 0.45rem;
        padding: 0.7rem 0.35rem;
        border-bottom: 1px solid var(--border-subtle);
        white-space: normal;
        border-radius: 0;
    }
    .nav-edit-toggle {
        padding: 0.55rem 0.4rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .nav-mega {
        position: static;
        inset: auto;
        visibility: visible;
        opacity: 1;
        pointer-events: none;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.28s ease;
    }
    .nav-item.is-open > .nav-mega {
        pointer-events: auto;
        grid-template-rows: 1fr;
    }
    .nav-mega-inner {
        overflow: hidden;
        min-height: 0;
        padding: 0; /* padding כאן מדליף גובה גם כשהפאנל סגור (0fr); הריווח עבר ל-grid */
    }
    .nav-mega-kicker { display: none; }
    .nav-mega-grid { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.2rem 0 0.45rem; }
    .nav-mega-card { padding: 0.5rem 0.1rem; }
    .nav-mega-icon { width: 2.25rem; height: 2.25rem; }
    .nav-account {
        justify-content: space-between;
        padding-top: 0.5rem;
    }
}

/* always-visible edit-mode toggle in the nav */
.nav-edit-toggle {
    font-size: 0.82rem; padding: 0.2rem 0.6rem; border-radius: 999px;
    border: 1px solid var(--accent-soft); color: var(--accent-warm-dark);
    background: transparent; cursor: pointer; font-family: inherit; line-height: 1.4;
}
.nav-edit-toggle:hover { background: var(--accent-soft); text-decoration: none; }
.nav-edit-toggle.on { background: #2B2520; color: #fff; border-color: #2B2520; }
.edit-mode-strip {
    background: #2B2520; color: #fff; text-align: center; font-size: 0.82rem;
    padding: 0.35rem 1rem;
}

/* per-post pencil deep-link into edit mode */
.post-card { position: relative; }
.post-edit-pencil {
    position: absolute; top: 0.6rem; inset-inline-start: 0.6rem;
    z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem; line-height: 1; font-size: 0.9rem;
    border-radius: 999px; text-decoration: none;
    color: var(--accent-warm-dark);
    background: var(--bg-card);
    border: 1px solid var(--accent-soft);
    opacity: 0.55; transition: opacity 0.15s ease, background 0.15s ease;
}
.post-card:hover .post-edit-pencil { opacity: 1; }
.post-edit-pencil:hover { background: var(--accent-soft); text-decoration: none; }

/* ---------- inline editing (?edit=1) ---------- */
.inline-editable {
    outline: 1px dashed transparent;
    border-radius: 6px;
    transition: outline-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    cursor: text;
    min-width: 1.5rem; min-height: 1em;
    padding: 0 0.15rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
span.inline-editable { display: inline-block; vertical-align: baseline; }
.inline-editable:hover { outline-color: var(--accent-soft); background: rgba(0,0,0,0.02); }
.inline-editable:focus {
    outline: 2px solid var(--accent-warm-dark);
    background: var(--bg-card);
    box-shadow: 0 1px 6px var(--shadow-soft);
}
/* raw-markup source areas (post body, bio, comment) shown as monospace-ish block */
.inline-edit-source {
    white-space: pre-wrap;
    font-family: inherit;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.inline-editable.saving { outline-color: var(--accent-warm-dark); opacity: 0.7; }
.inline-editable.saved { outline: 2px solid #2e7d32; }
.inline-editable.save-failed { outline: 2px solid #c62828; }

/* clickable flag pills */
.pill-clickable { cursor: pointer; user-select: none; }
.pill-clickable:hover { filter: brightness(0.95); }
.pill-clickable.saving { opacity: 0.6; }
.pill-clickable.saved { box-shadow: 0 0 0 2px #2e7d32; }
.pill-clickable.save-failed { box-shadow: 0 0 0 2px #c62828; }

/* author quick-pick */
.author-editable { cursor: pointer; position: relative; }
.author-editable.user-name:hover,
.author-editable.comment-author:hover { text-decoration: underline; }
.author-editable.saved { box-shadow: 0 0 0 2px #2e7d32; border-radius: 6px; }
.author-editable.save-failed { box-shadow: 0 0 0 2px #c62828; border-radius: 6px; }

.char-picker {
    position: absolute; z-index: 50; top: 100%; inset-inline-start: 0;
    margin-top: 0.25rem; width: 240px; max-width: 80vw;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 10px; box-shadow: 0 6px 20px var(--shadow-soft);
    padding: 0.4rem; text-align: start;
}
.char-picker-item { overflow-wrap: anywhere; }
.char-picker-search {
    width: 100%; box-sizing: border-box; padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-subtle); border-radius: 8px;
    font-size: 0.85rem; margin-bottom: 0.35rem;
}
.char-picker-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.char-picker-item {
    text-align: start; background: transparent; border: none;
    padding: 0.4rem 0.5rem; border-radius: 6px; cursor: pointer;
    font-size: 0.85rem; color: var(--text-primary);
}
.char-picker-item:hover { background: var(--accent-soft); }
.char-picker-item.current { font-weight: 600; color: var(--accent-warm-dark); }

.container {
    max-width: 720px; margin: 0 auto; padding: 0.4rem;
}
.container.container-wide { max-width: 1200px; }

/* ---------- page header (directory) ---------- */
.page-header { margin: 0.5rem 0 1rem; }
.page-title { font-size: 2rem; font-weight: 700; margin: 0 0 0.4rem; }
.page-subtitle { color: var(--text-secondary); font-size: 0.95rem; max-width: 60ch; }

/* ---------- truncation / show more ---------- */
/* Clean multi-line clamp: the text stops on a whole line and ends with an
   ellipsis, with the toggle directly below. No white fade overlay. */
.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp-lines, 4);
    line-clamp: var(--clamp-lines, 4);
    overflow: hidden;
}
.show-more-toggle {
    display: inline-block; font-size: 0.82rem;
    border: none; background: none; cursor: pointer;
    color: var(--accent-warm-dark);
}
.show-more-toggle:hover { text-decoration: underline; }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: 1px solid var(--border-subtle); background: var(--bg-card);
    color: var(--text-primary); border-radius: var(--radius-sm);
    padding: 0.4rem 0.8rem; font-size: 0.9rem; cursor: pointer;
    font-family: inherit;
}
.btn:hover { border-color: var(--accent-soft); text-decoration: none; }
.btn-icon { display: inline-flex; align-items: center; gap: 0.4rem; }
.btn .chat-icon-svg, .btn-icon .action-icon-svg { width: 1.05em; height: 1.05em; flex: none; }
.btn-primary {
    background: var(--accent-warm); border-color: var(--accent-warm);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-warm-dark); border-color: var(--accent-warm-dark); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-danger { color: #9b3030; border-color: #e6c4c4; }
.btn-sm { padding: 0.25rem 0.55rem; font-size: 0.8rem; }
.inline-form { display: inline; }

/* ---------- flashes ---------- */

.flash {
    background: var(--accent-tint); border: 1px solid var(--accent-soft);
    border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

/* ---------- post card ---------- */

.post-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px var(--shadow-soft);
    padding: 0.75rem 0.8rem 0.6rem 0.8rem;
    margin-bottom: 0.6rem;
}
.post-card.pinned {
    background: linear-gradient(135deg, var(--pinned-from) 0%, var(--pinned-to) 100%);
    border: 1.5px solid var(--pinned-border);
}
.post-card.candidate { border-style: dashed; opacity: 0.96; }

.post-header { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.15rem; }
.user-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid var(--accent-soft); object-fit: cover; flex: none;
}
.user-info { flex: 1 1 auto; min-width: 0; }
.user-name { font-weight: 600; display: block; line-height: 0.9; padding-bottom: 0.1rem; color: var(--text-primary); }
.user-role { color: var(--text-secondary); font-size: 0.82rem; }
/* Match the comment timestamp style: time and date on one inline line. */
.post-time {
    display: inline-flex; flex-direction: column; align-items: end; gap: 0.05rem;
    flex: 0 0 auto; align-self: flex-start;
    padding: 0.18rem 0.5rem;
    border: 0px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    /* background: var(--bg-primary); */
    text-align: center; font-size: 0.68rem; line-height: 1.25;
    color: var(--text-secondary);
    opacity: 0.88;
    white-space: nowrap;
}
.post-time:hover { opacity: 1; text-decoration: none; border-color: var(--accent-soft); }
.post-date { order: 1; }
.post-time-value { order: 2; color: var(--text-secondary); }
.post-time-sep { display: none; }
/* Admin edit-mode only: the post's real DB creation time, on its own line
   below the demo time. */
.post-created-at {
    flex-basis: 100%; text-align: end; font-size: 0.7rem;
    color: var(--text-secondary); opacity: 0.7;
}

.post-content {
    font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap;
    word-break: break-word; margin-bottom: 0rem;
}
.post-content a { text-decoration: underline; }

.post-actions {
    display: flex; gap: 0.5rem; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--border-subtle); padding-top: 0.25rem; margin-top: 0.25rem;
}
.post-actions-group { display: flex; gap: 0.5rem; }
.post-card.pinned .post-actions { justify-content: flex-start; flex-wrap: wrap; border-top: none; padding-top: 0; }
.action-btn {
    display: flex; align-items: center; gap: 0.25rem;
    background: transparent; border: none; color: var(--text-secondary);
    font-size: 0.75rem; font-weight: 500; cursor: pointer; padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm); font-family: inherit;
    transition: all 0.2s ease; text-decoration: none;
}
.action-btn:hover { color: var(--accent-warm); background: var(--accent-soft); text-decoration: none; }
.post-card.pinned .action-btn {
    background: rgba(255,255,255,0.7); border: 1px solid var(--pinned-border);
    color: #2C5F7A;
}

.action-icon-svg {
    width: 1.1rem; height: 1.1rem; flex-shrink: 0;
    color: inherit; transition: all 0.2s ease;
}
.action-btn:hover .action-icon-svg { transform: scale(1.1); }

/* Like button animation + persistent liked state (B1) */
.like-btn.liked,
.like-btn.is-active { color: var(--accent-warm); }
/* When the current user has liked, the heart stays filled. */
.like-btn.is-active .like-icon-svg {
    fill: var(--accent-warm); stroke: var(--accent-warm);
}
.like-icon-svg.heart-animate {
    animation: heartBeat 0.6s ease-in-out;
    fill: var(--accent-warm); stroke: var(--accent-warm);
}
@keyframes heartBeat {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.3); }
    50%  { transform: scale(1.1); }
    75%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.like-count { transition: all 0.3s ease; }
.like-btn.liked .like-count,
.like-btn.is-active .like-count { font-weight: 700; color: var(--accent-warm); }

/* ---------- comments ---------- */

.comments, .comments-section { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid var(--border-subtle); }
.comments-count { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.comment {
    display: flex; gap: 0.4rem; padding: 0.32rem 0.4rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.22rem;
}
.comment-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.comment-body { flex: 1 1 auto; min-width: 0; }
.comment-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.comment-author { font-weight: 600; font-size: 0.82rem; color: var(--text-primary); line-height: 1.2; }
a.comment-author:hover { color: var(--accent-warm-dark); text-decoration: none; }
.comment-time {
    display: inline-flex; flex-direction: column; align-items: end; gap: 0.04rem;
    font-size: 0.68rem; line-height: 1.2;
    color: var(--text-secondary); white-space: nowrap; margin-inline-start: auto;
}
.comment-date, .comment-time-value { display: block; }
/* J1: character description under the name in comments, matching the post
   author's .user-role styling. */
.comment-role { color: var(--text-secondary); font-size: 0.72rem; margin-top: 0; line-height: 1.25; }
.comment-text { margin: 0.12rem 0 0; font-size: 0.84rem; line-height: 1.42; word-break: break-word; }

/* I1: edit-mode "open character in new window" link icon. */
.char-open-link {
    display: inline-flex; align-items: center; color: var(--accent-warm-dark);
    opacity: 0.75;
}
.char-open-link:hover { opacity: 1; text-decoration: none; }
.char-open-link .action-icon-svg { width: 15px; height: 15px; }
.user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; }
.comment-reply {
    margin-inline-start: 1.35rem;
    border-inline-start: 2px solid var(--accent-soft);
    background: rgba(255,255,255,0.55);
}

/* ---------- character directory (V1 visual language) ---------- */

.profiles-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.profile-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: linear-gradient(135deg, #FAF7F4 0%, #FFFFFF 100%);
    border: 2px solid var(--accent-soft); border-radius: var(--radius);
    padding: 1.25rem; box-shadow: 0 2px 6px var(--shadow-soft);
    color: var(--text-primary); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-card:hover {
    box-shadow: 0 8px 24px var(--shadow-med); transform: translateY(-3px);
    border-color: var(--accent-warm); text-decoration: none; color: inherit;
}
.profile-card.candidate { border-style: dashed; }
.profile-card-avatar {
    width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
    border: 2.5px solid var(--accent-warm); margin-bottom: 0.75rem;
    box-shadow: 0 2px 4px var(--shadow-soft);
}
.profile-card-name { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.4rem; }
.profile-card-badge {
    display: inline-block; padding: 0.25rem 0.6rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; margin-bottom: 0.6rem;
}
.profile-card-stats {
    display: flex; justify-content: center; gap: 1.2rem; width: 100%;
    margin: 0.4rem 0 0.75rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.stat-number { font-size: 1.2rem; font-weight: 700; color: var(--accent-warm); }
.stat-label { font-size: 0.7rem; color: var(--text-secondary); }
.profile-card-bio { font-size: 0.85rem; line-height: 1.6; text-align: start; width: 100%; color: var(--text-primary); }

@media (max-width: 992px) { .profiles-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (max-width: 768px) { .profiles-grid { grid-template-columns: 1fr; gap: 0.9rem; } }

/* ---------- profile header ---------- */

.profile-header {
    background: linear-gradient(135deg, #FAF7F4 0%, #FFFFFF 100%);
    border: 2px solid var(--accent-soft); border-radius: var(--radius);
    padding: 1.25rem; margin-bottom: 1rem;
    display: flex; gap: 1rem; align-items: flex-start;
}
.profile-avatar { width: 84px; height: 84px; border-radius: 50%; border: 2.5px solid var(--accent-warm); object-fit: cover; flex: none; }
.profile-name { margin: 0; font-size: 1.4rem; }
.profile-role { color: var(--text-secondary); margin: 0.15rem 0 0.5rem; }
.profile-bio { font-size: 0.92rem; }
.profile-persona {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border, rgba(0,0,0,.12));
}
.posts-title { font-size: 1.1rem; margin: 1rem 0 0.6rem; }
.posts-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.post-order { display: flex; align-items: center; gap: .4rem; margin: 0; }
.post-filter { gap: .25rem; margin-inline-start: .55rem; }
.post-filter-select { width: auto; padding-inline: .35rem; }
.post-order-label { font-size: .82rem; color: var(--text-secondary); }
.post-order-select {
    font-size: .85rem; padding: .3rem .5rem; border: 1px solid var(--border, #d6cdec);
    border-radius: 8px; background: #fff; font-family: inherit; cursor: pointer;
}

/* ---------- badges ---------- */

.badge {
    display: inline-block; font-size: 0.75rem; font-weight: 600;
    padding: 0.18rem 0.6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-warm-dark);
}
.badge-researcher { background: #E8F4F8; color: #2C5F7A; }
.badge-parent     { background: #F5E8F4; color: #6B3A6B; }
.badge-lawyer     { background: #FFF4E8; color: #8B5A2B; }
.badge-child      { background: #E8F8E8; color: #2A6B2A; }
.badge-admin      { background: #FFE8D9; color: #8B4513; }
.badge-couple     { background: #FFF0F5; color: #8B3A62; }
.badge-teen       { background: #E8F0FF; color: #3A5F8B; }

/* ---------- inline edit affordances ---------- */

.edit-banner {
    background: #2B2520; color: #fff; border-radius: var(--radius-sm);
    padding: 0.5rem 0.85rem; margin-bottom: 0.85rem; font-size: 0.85rem;
    display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.edit-banner a { color: var(--accent-soft); }
.edit-controls {
    margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px dashed var(--border-subtle);
    display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center;
}
.edit-controls .pill {
    font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 999px;
    background: var(--bg-primary); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.edit-controls .pill.on { background: #E8F8E8; color: #2A6B2A; border-color: #bfe3bf; }
.edit-controls .pill.off { background: #FBE9E9; color: #9b3030; border-color: #e6c4c4; }

details.edit-form { margin-top: 0.5rem; }
details.edit-form > summary { cursor: pointer; font-size: 0.82rem; color: var(--accent-warm-dark); }
.field { display: block; margin-bottom: 0.5rem; }
.field label { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.15rem; }
.field input[type=text], .field input[type=number], .field textarea, .field select {
    width: 100%; padding: 0.4rem 0.55rem; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); font-family: inherit; font-size: 0.88rem;
}
.field textarea { min-height: 5rem; resize: vertical; }
.field-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 8rem; }
.checks { display: flex; gap: 0.85rem; flex-wrap: wrap; font-size: 0.82rem; }
.checks label { display: inline-flex; gap: 0.3rem; align-items: center; }

/* ---------- chat ---------- */

/* ---------- chat thread screen (K1) ---------- */
/* A self-contained card: fixed character header, internally-scrolling message
   window, and a composer pinned to the bottom. The whole screen fits the
   viewport so only the messages scroll. */
.chat-screen {
    display: flex; flex-direction: column;
    height: calc(100vh - 140px); min-height: 420px;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius); box-shadow: 0 2px 10px var(--shadow-soft);
    overflow: hidden;
}
.chat-topbar {
    display: flex; align-items: center; gap: 0.5rem; flex: none;
    padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-primary);
}
.chat-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%; color: var(--text-secondary); flex: none;
}
.chat-back:hover { background: var(--accent-soft); color: var(--accent-warm-dark); text-decoration: none; }
.chat-character { display: flex; align-items: center; gap: 0.55rem; min-width: 0; color: inherit; }
.chat-character:hover { text-decoration: none; }
.chat-character .comment-avatar { width: 40px; height: 40px; }
.chat-character-info { display: flex; flex-direction: column; min-width: 0; }
.chat-character-name { font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 1rem; color: var(--text-primary); }
.chat-character-role { font-size: 0.78rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-window {
    flex: 1 1 auto; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 1rem; background: var(--bg-primary);
}
.msg { max-width: 78%; padding: 0.55rem 0.8rem; border-radius: 14px; font-size: 0.92rem; white-space: pre-wrap; word-break: break-word; line-height: 1.5; box-shadow: 0 1px 2px var(--shadow-soft); }
.msg.user { align-self: flex-start; background: var(--accent-warm); color: #fff; border-bottom-inline-start-radius: 3px; }
.msg.assistant { align-self: flex-end; background: var(--bg-card); border: 1px solid var(--border-subtle); border-bottom-inline-end-radius: 3px; }
.msg.error { background: #FBE9E9; color: #9b3030; border-color: #e6c4c4; }
.pending-banner { align-self: flex-end; font-size: 0.82rem; color: var(--text-secondary); font-style: italic; padding: 0.2rem 0.4rem; }

.suggested-questions {
    display: flex; gap: 0.4rem; flex-wrap: wrap; flex: none;
    padding: 0.6rem 0.7rem 0; background: var(--bg-card);
}
.suggested-chip {
    background: var(--bg-primary); border: 1px solid var(--border-subtle);
    color: var(--accent-warm-dark); font-family: inherit; font-size: 0.82rem;
    padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer;
    transition: all 0.18s ease;
}
.suggested-chip:hover {
    border-color: var(--accent-warm); background: var(--accent-soft);
}

.composer {
    display: flex; align-items: flex-end; gap: 0.5rem; flex: none;
    padding: 0.6rem 0.7rem; border-top: 1px solid var(--border-subtle);
    background: var(--bg-card);
}
.composer textarea {
    flex: 1 1 auto; min-height: 2.5rem; max-height: 140px;
    padding: 0.55rem 0.8rem; border: 1px solid var(--border-subtle);
    border-radius: 18px; font-family: inherit; font-size: 0.92rem;
    resize: none; line-height: 1.4; background: var(--bg-primary);
}
.composer textarea:focus { outline: none; border-color: var(--accent-warm); background: var(--bg-card); }
.composer-send {
    flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    border: none; background: var(--accent-warm); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
}
.composer-send:hover { background: var(--accent-warm-dark); }
.composer-send:active { transform: scale(0.94); }
.composer-send svg { width: 1.15rem; height: 1.15rem; transform: scaleX(-1); }

.thread-item { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); margin-bottom: 0.5rem; color: inherit; }
.thread-item:hover { box-shadow: 0 2px 8px var(--shadow-soft); text-decoration: none; }
.thread-item .comment-avatar { width: 44px; height: 44px; }
.thread-body { flex: 1 1 auto; min-width: 0; }
.thread-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.thread-top .user-name { font-weight: 600; color: var(--text-primary); }
.thread-date { font-size: 0.75rem; color: var(--text-secondary); flex: none; }
.thread-bio { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin: 0.15rem 0 0.35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thread-meta { display: flex; gap: 0.9rem; font-size: 0.75rem; color: var(--text-secondary); }

/* D2: stretched link makes the whole row clickable while quick-reply buttons
   stay independently interactive. */
.thread-item { position: relative; }
.thread-link::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
}
.thread-link { color: var(--text-primary); }
.thread-link:hover { text-decoration: none; color: var(--accent-warm-dark); }
/* Anything that should sit above the stretched link gets a higher stack level. */
.thread-quick, .thread-preview, .thread-status { position: relative; z-index: 1; }

/* D2: inviting last-message preview. */
.thread-preview {
    display: flex; align-items: baseline; gap: 0.4rem;
    font-size: 0.82rem; line-height: 1.5; margin: 0.1rem 0 0.3rem;
}
.thread-preview-text {
    color: var(--text-secondary); flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-preview-time {
    flex: none; font-size: 0.68rem; color: var(--text-secondary);
    opacity: 0.65; white-space: nowrap; letter-spacing: 0.01em;
}

/* D2: "awaiting reply" status with a soft pulsing dot. */
.thread-status.awaiting-reply { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--accent-warm-dark); margin-bottom: 0.3rem; }
.awaiting-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--accent-warm);
    flex: none; animation: awaitPulse 1.4s ease-in-out infinite;
}
@keyframes awaitPulse { 0%,100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }

/* D2: per-thread quick-reply chips. */
.thread-quick { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.thread-quick-form { margin: 0; }
.thread-quick-chip {
    border: 1px solid var(--accent-soft); background: var(--accent-tint);
    color: var(--accent-warm-dark); border-radius: 999px;
    padding: 0.2rem 0.7rem; font-size: 0.76rem; cursor: pointer; font-family: inherit;
    line-height: 1.4;
}
.thread-quick-chip:hover { background: var(--accent-soft); }

.empty-state { text-align: center; color: var(--text-secondary); padding: 2.5rem 1rem; }

/* ---------- inbox preferences toggle ---------- */
.inbox-pref-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin: 0.75rem 0 1.25rem;
}
.inbox-pref { margin: 0; }

/* D3: "get messages" button + 5→1 countdown ring. */
.initiate-wrap { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; }
.initiate-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.initiate-timer { position: relative; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; }
.initiate-timer[hidden] { display: none; }
.initiate-ring { width: 2.4rem; height: 2.4rem; transform: rotate(-90deg); }
.initiate-ring-bg { fill: none; stroke: var(--accent-soft); stroke-width: 3; }
.initiate-ring-fg { fill: none; stroke: var(--accent-warm); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }
.initiate-num { position: absolute; font-weight: 700; font-size: 0.9rem; color: var(--accent-warm-dark); }

/* D3: unread thread emphasis — green frame + green dot on the avatar. */
.thread-item.unread { border-color: #3Fae6a; box-shadow: 0 0 0 1px #3Fae6a inset; padding-bottom: 2.2rem; }
.thread-avatar-wrap { position: relative; flex: none; }
.unread-dot {
    position: absolute; top: -2px; inset-inline-end: -2px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #2fbe5e; border: 2px solid var(--bg-card);
}
.thread-item.unread .user-name, .thread-item.unread .thread-link { font-weight: 700; }

/* Small "mark as read" button, pinned to the bottom-left corner of an unread row. */
.mark-read-form { position: absolute; bottom: 0.5rem; left: 0.6rem; margin: 0; z-index: 2; }
.mark-read-btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    border: 1px solid var(--border-subtle); background: var(--bg-card);
    color: var(--text-secondary); border-radius: 999px;
    padding: 0.12rem 0.55rem; font-size: 0.7rem; cursor: pointer; font-family: inherit;
    line-height: 1.4;
}
.mark-read-btn:hover { border-color: #3Fae6a; color: #2f9e52; background: #f1faf3; }
.mark-read-btn svg { width: 0.85rem; height: 0.85rem; }
.inbox-section-title { font-size: 1.05rem; margin: 1.5rem 0 0.6rem; }
.toggle { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
    flex: none; width: 44px; height: 24px; border-radius: 999px;
    background: var(--border-subtle); position: relative; transition: background 0.2s ease;
}
.toggle-thumb {
    position: absolute; top: 2px; inset-inline-start: 2px;
    width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px var(--shadow-med); transition: inset-inline-start 0.2s ease;
}
.toggle input:checked + .toggle-track { background: var(--accent-warm); }
/* Move the thumb to the far end on "on"; using a logical inset keeps it correct
   in both LTR and RTL (track 44px - thumb 20px - 2px padding = 22px). */
.toggle input:checked + .toggle-track .toggle-thumb { inset-inline-start: 22px; }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--accent-warm); outline-offset: 2px; }
.toggle-label { font-size: 0.9rem; color: var(--text-primary); }
.toggle-label small { display: block; font-size: 0.76rem; color: var(--text-secondary); font-weight: 400; }

/* ---------- inbox question cards ---------- */
.question-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
.question-card { margin: 0; }
.question-card-btn {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem;
    padding: 0.9rem 0.7rem; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius); font-family: inherit; transition: all 0.18s ease;
}
.question-card-btn:hover { border-color: var(--accent-soft); box-shadow: 0 2px 8px var(--shadow-soft); transform: translateY(-1px); }
.question-card-name { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.question-card-q { font-size: 0.8rem; color: var(--accent-warm-dark); line-height: 1.45; }

/* ---------- AI generation studio ---------- */

.studio-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.panel { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 1rem; }
.panel h2 { margin-top: 0; font-size: 1.05rem; }
.candidate-list { margin-top: 0.5rem; }

/* ---------- responsive ---------- */

@media (max-width: 600px) {
    .profile-header { flex-direction: column; align-items: center; text-align: center; }
    .char-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .msg { max-width: 92%; }
    .chat-screen { height: calc(100vh - 110px); border-radius: 0; }
}

/* Comment / info modal */
.modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(43, 37, 32, 0.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.modal-overlay[hidden] { display: none; }
.modal-card:focus { outline: none; }
.modal-card {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 12px 40px var(--shadow-med);
    max-width: 28rem; width: 100%;
    padding: 1.6rem 1.5rem 1.4rem;
    animation: modalIn 0.18s ease-out;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.modal-close {
    position: absolute; top: 0.5rem; inset-inline-end: 0.7rem;
    background: none; border: none; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: var(--text-secondary);
}
.modal-close:hover { color: var(--text-primary); }
.modal-title {
    font-family: 'Rubik', sans-serif; font-size: 1.25rem; font-weight: 700;
    color: var(--text-primary); margin: 0 0 0.8rem;
}
.modal-text {
    font-size: 0.92rem; line-height: 1.7; color: var(--text-secondary);
    margin: 0 0 0.7rem;
}
.modal-actions {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.1rem;
}

/* Hero / feed intro */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background:
        /* radial-gradient(ellipse 120% 80% at 100% 0%, rgba(193,122,94,0.18) 0%, transparent 60%), */
        /* radial-gradient(ellipse 90% 90% at 0% 100%, rgba(232,213,196,0.25) 0%, transparent 55%), */
        linear-gradient(170deg, #2B2520 0%, #3D332C 45%, #4A3D34 100%);
    z-index: 0;
}
.hero-content {
    position: relative;
    z-index: 1;
    padding: 2.8rem 1.8rem 2.2rem;
}
.hero-label {
    font-family: 'Rubik', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent-warm);
    margin: 0 0 0.85rem;
}
.hero-title {
    font-family: 'Rubik', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    color: #FAF7F4;
    margin: 0 0 0.7rem;
}
.hero-subtitle {
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(250,247,244,0.65);
    margin: 0;
    max-width: 34rem;
}
.hero-divider {
    width: 5rem;
    height: 3px;
    background: var(--accent-warm);
    border-radius: 2px;
    margin: 1.5rem 0;
}
.hero-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 38rem;
}
.hero-body p {
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-size: 0.9rem;
    line-height: 1.8;
    color: rgba(250,247,244,0.72);
    margin: 0;
}
@media (max-width: 640px) {
    .hero-content { padding: 2rem 1.2rem 1.6rem; }
    .hero-title { font-size: 1.55rem; }
    .hero-subtitle { font-size: 0.92rem; }
}

/* ---------- content pages ----------
   One editorial list language for every content page:
   no white boxes, no numbered circles. Numbered items open
   with a 01 marker and a title; unnumbered items sit on a rail. */
.home-list {
    margin: 0.35rem 0 0;
    padding: 0;
    padding-inline-start: 1.2rem;
    list-style: none;
    border-inline-start: 2px solid var(--accent-warm);
}
.home-list li {
    position: relative;
    padding: 0 0 1.35rem;
    line-height: 1.8;
    text-wrap: pretty;
}
.home-list li:last-child { padding-bottom: 0; }
.home-list li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    inset-inline-start: calc(-1.2rem - 4px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-warm);
}
.home-list b,
.home-list strong {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
}
/* קישורים פנימיים בתוך טקסט רץ — אותה שפה חזותית כמו .v3-more:
   טקסט כהה, קו תחתון בצבע ההדגשה, בלי קו נוסף בריחוף. */
.v2-prose a,
.v2-disclaimer a,
.home-list a,
.v2-principles li > a:not(.v3-more) {
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 1px solid var(--accent-warm);
}
.v2-prose a:hover,
.v2-disclaimer a:hover,
.home-list a:hover,
.v2-principles li > a:not(.v3-more):hover {
    color: var(--accent-warm-dark);
    text-decoration: none;
}
/* שורת "להמשך קריאה" בסוף עמודי תוכן: v3-links בתוך v2-section */
.v2-section .v3-links { margin-top: 1.4rem; }

/* ---------- home v2 draft ---------- */
.v2-section { margin: 0 0 2.8rem; scroll-margin-top: 5rem; }
.v2-title {
    font-family: 'Rubik', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.85rem;
    text-wrap: balance;
}
.v2-sub {
    font-family: 'Rubik', sans-serif;
    font-size: 1.02rem; font-weight: 700; margin: 2rem 0 0.75rem;
}
#history { scroll-margin-top: 5rem; }
.v2-prose { max-width: 42rem; }
.v2-prose p { margin: 0 0 0.75rem; line-height: 1.85; text-wrap: pretty; }
/* טקסט רץ שמופיע מיד אחרי רשימה (home-list / v2-principles) נצמד אליה
   בלי רווח; מוסיפים הפרדה כדי שהפסקה לא תיקרא כחלק מהפריט האחרון. */
.home-list + .v2-prose,
.v2-principles + .v2-prose { margin-top: 1.15rem; }
.v2-principles {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: v2p;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.v2-principles li {
    counter-increment: v2p;
    padding: 1.15rem 0 1.65rem;
    border-top: 2px solid var(--accent-warm);
    line-height: 1.8;
    text-wrap: pretty;
}
.v2-principles li:last-child { padding-bottom: 0.2rem; }
.v2-principles li::before {
    content: counter(v2p, decimal-leading-zero);
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 0.45rem;
    border-radius: 0;
    background: none;
    color: var(--accent-warm-dark);
    font-family: 'Rubik', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}
.v2-principles strong,
.v2-principles h3 {
    display: block;
    font-family: 'Rubik', sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
}
.v2-quotes {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem;
}
@media (max-width: 640px) {
    .v2-quotes { grid-template-columns: 1fr; }
}
.v2-quote {
    margin: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-inline-start: 3px solid var(--accent-warm);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
}
.v2-quote p { margin: 0 0 0.5rem; line-height: 1.7; font-size: 0.92rem; }
.v2-quote footer { color: var(--text-secondary); font-size: 0.8rem; }
.v2-disclaimer {
    margin: 0.9rem 0 0; color: var(--text-secondary); font-size: 0.82rem;
}
.v2-cta { padding-bottom: 1rem; }

/* ---------- v3 home: chaptered editorial ----------
   One consistent system: every chapter opens with the same head (large
   outlined number + title + one-line lede). Chapter bodies alternate
   between plain, tinted and dark full-bleed bands. No card boxes. */
.container.v3-container { max-width: none; padding: 0; }
.v3 { --v3-w: 900px; --v3-rule: 1px solid var(--border-subtle); }
.v3-inner { max-width: var(--v3-w); margin: 0 auto; padding: 0 1.25rem; }
.v3 :where(p) { margin: 0; text-wrap: pretty; }
.v3 :where(h1, h2, h3) { text-wrap: balance; }

/* hero */
.v3-hero {
    padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(3.2rem, 8vw, 5.5rem);
    background: var(--bg-card);
    border-bottom: 3px solid var(--accent-warm);
}
.v3-hero-photo {
    background-color: var(--bg-card);
    background-image:
        linear-gradient(to left, rgba(250, 247, 244, 0.9) 0%, rgba(250, 247, 244, 0.62) 46%, rgba(250, 247, 244, 0.34) 100%),
        var(--v3-photo);
    background-size: cover;
    background-position: center;
}
.v3-hero + .v3-ch { padding-top: clamp(3.2rem, 8vw, 5.5rem); }
.v3-kicker {
    font-family: 'Rubik', sans-serif; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.3em; color: var(--accent-warm-dark); margin-bottom: 1.4rem;
}
.v3-h1 {
    font-family: 'Rubik', sans-serif;
    font-size: clamp(2rem, 5.6vw, 3.6rem);
    font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
    margin: 0 0 1.3rem; max-width: 20ch;
}
.v3-hero-sub {
    font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.8;
    font-weight: 500;
    color: var(--text-primary); max-width: 40rem;
}
/* הפניה אל עמוד הרעיון מתוך ההירו, באותה שפה חזותית של קישורי v3 */
.v3-hero-links { margin-top: 1.6rem; }
.v3-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
.v3-hero-copy .v3-h1 { max-width: 16ch; }

/* media placeholders — swap .v3-ph for an <img> when the file is ready */
.v3-media { margin: 0; min-width: 0; }
.v3-media img {
    width: 100%; height: auto; display: block;
}
.v3-ph {
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(155deg, var(--accent-tint) 0%, var(--accent-soft) 55%, #E4D0BE 100%);
    display: grid; place-items: center;
    color: var(--accent-warm-dark);
    font-family: 'Rubik', sans-serif; font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.1em; text-align: center; padding: 1rem;
}
.v3-ph-on-dark {
    background: linear-gradient(155deg, #4A3D34 0%, #5C4A3E 50%, #3D332C 100%);
    color: var(--accent-soft);
}
.v3-media-hero .v3-ph { aspect-ratio: 3 / 4; min-height: 16rem; }
.v3-media-tall .v3-ph { aspect-ratio: 4 / 5; min-height: 14rem; }

.v3-split-media { display: flex; flex-direction: column; gap: clamp(1.6rem, 4vw, 2.4rem); }
/* תמונת "הבעיה" כפס רוחבי נמוך, חיתוך ממורכז על הידיים */
.v3-media-banner img {
    height: clamp(11rem, 26vw, 16rem);
    object-fit: cover;
    object-position: 50% 45%;
    border-radius: var(--radius);
}
.v3-split-media .v3-media .v3-ph { aspect-ratio: 16 / 9; }

.v3-proposal {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
.v3-proposal .v3-ch-head { margin-bottom: 1.4rem; }

/* chapter shell */
.v3-ch { padding: clamp(2.8rem, 6vw, 4.5rem) 0; scroll-margin-top: 4.5rem; }
.v3-tint { background: var(--accent-tint); }
.v3-dark {
    background: linear-gradient(165deg, #2B2520 0%, #3D332C 55%, #4A3D34 100%);
    color: #FAF7F4;
}
.v3-has-photo {
    display: flex;
    align-items: center;
    min-height: min(72vh, 38rem);
    background-color: #2B2520;
    /* כהה בצד הטקסט, מתבהר בעדינות לכיוון הצד ללא הטקסט */
    background-image:
        linear-gradient(to left, rgba(43,37,32,0.9) 0%, rgba(43,37,32,0.82) 30%, rgba(43,37,32,0.55) 88%, rgba(43,37,32,0.34) 100%),
        var(--v3-photo);
    background-size: cover;
    background-position: center;
}
.v3-has-photo .v3-inner { width: 100%; }
.v3-ch-head {
    display: grid; grid-template-columns: auto 1fr; gap: 1.1rem 1.4rem;
    align-items: start; margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.v3-ch-num {
    font-family: 'Rubik', sans-serif; font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 700;
    line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--accent-warm);
    padding-top: 0.1em; user-select: none;
}
.v3-dark .v3-ch-num { -webkit-text-stroke-color: var(--accent-soft); }
.v3-h2 {
    font-family: 'Rubik', sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    font-weight: 700; line-height: 1.25; margin: 0 0 0.5rem;
}
.v3-lede {
    font-size: clamp(1.02rem, 1.7vw, 1.2rem); line-height: 1.65;
    color: var(--text-secondary); max-width: 34rem;
}
.v3-lede-wide { max-width: 42rem; }
.v3-dark .v3-lede { color: rgba(250,247,244,0.86); }

/* 01 two sides */
.v3-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.v3-side + .v3-side { border-inline-start: var(--v3-rule); padding-inline-start: 3rem; margin-inline-start: -1.5rem; }
.v3-side-tag {
    font-family: 'Rubik', sans-serif; font-weight: 700; color: var(--accent-warm-dark);
    margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.6rem;
}
.v3-side-tag::before {
    content: "";
    width: 1.55rem;
    height: 0.7rem;
    border: none;
    background-color: var(--accent-warm);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 14'%3E%3Cpath fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M2 4.2h20.5M2 9.8h20.5M19.2 1.6L29.2 7 19.2 12.4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 14'%3E%3Cpath fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M2 4.2h20.5M2 9.8h20.5M19.2 1.6L29.2 7 19.2 12.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.v3-side:first-child .v3-side-tag::before { transform: scaleX(-1); }
.v3-side p:not(.v3-side-tag) { font-size: 1.05rem; line-height: 1.9; }

/* 04 proposal */
.v3-statement {
    font-family: 'Rubik', sans-serif; font-weight: 700;
    font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.25;
    max-width: 14ch; margin: 0;
}
.v3-statement-sm {
    font-size: clamp(1.25rem, 2.8vw, 1.7rem); max-width: 28ch; font-weight: 500;
    margin-bottom: 1.8rem; color: rgba(250,247,244,0.9);
}
.v3-proposal-body {
    max-width: 34rem;
    margin-top: 1.6rem;
    font-size: clamp(1.02rem, 1.6vw, 1.12rem);
    line-height: 1.85;
    color: rgba(250,247,244,0.97);
}
.v3-proposal-body p { margin: 0 0 1rem; }
.v3-proposal-body p:last-child { margin-bottom: 0; }
.v3-proposal-body + .v3-links { margin-top: 1.8rem; }
.v3-close {
    max-width: 42rem;
    margin: 2rem 0 0;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-primary);
}
.v3-split-media .v3-close { margin: 0; }

/* 04 principles: three columns */
.v3-principles {
    list-style: none; margin: 0; padding: 0; counter-reset: v3p;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem;
}
.v3-principles li { counter-increment: v3p; padding-top: 1.2rem; border-top: 2px solid var(--accent-warm); position: relative; }
.v3-principles li::before {
    content: counter(v3p, decimal-leading-zero);
    font-family: 'Rubik', sans-serif; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.15em; color: var(--accent-warm-dark);
    display: block; margin-bottom: 0.7rem;
}
.v3-principles h3 {
    font-family: 'Rubik', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.35;
    margin: 0 0 0.7rem;
}
.v3-principles p { color: var(--text-secondary); line-height: 1.85; font-size: 0.98rem; }
.v3-more {
    display: flex; width: fit-content; align-items: center; gap: 0.35rem;
    margin-top: 0.9rem;
    font-family: 'Rubik', sans-serif; font-size: 0.92rem; font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--accent-warm);
}
.v3-more span { color: var(--accent-warm); font-weight: 400; }
.v3-more:hover { color: var(--accent-warm-dark); text-decoration: none; }

/* 04a agreement page table of contents (עמוד "הסכם לדוגמה") */
.agr-toc {
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1.15rem 0.2rem 1.25rem;
}
.agr-toc-label {
    font-family: 'Rubik', sans-serif;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-warm-dark);
    margin: 0 0 0.7rem;
}
.agr-toc ol {
    list-style: none; margin: 0; padding: 0;
    columns: 2; column-gap: 3.2rem;
    counter-reset: agr-toc;
}
.agr-toc li {
    counter-increment: agr-toc;
    break-inside: avoid;
}
.agr-toc li a {
    display: flex; align-items: baseline; gap: 0.7rem;
    padding: 0.3rem 0;
    color: var(--text-primary);
    font-weight: 600; font-size: 0.97rem;
}
.agr-toc li a::before {
    content: counter(agr-toc);
    font-family: 'Rubik', sans-serif;
    font-size: 0.78rem; font-weight: 700;
    color: var(--accent-warm-dark);
    min-width: 1.1rem;
}
.agr-toc li a:hover {
    color: var(--accent-warm-dark);
    text-decoration: none;
}
@media (max-width: 720px) {
    .agr-toc ol { columns: 1; }
}

/* 04a2 agreement nested options list (תצורות מגורים בתוך סעיף ממוספר) */
.v2-principles .agr-sublist {
    margin: 0.7rem 0 0;
    padding: 0;
    padding-inline-start: 1.2rem;
    list-style: none;
    border-inline-start: 2px solid var(--accent-soft);
}
.v2-principles .agr-sublist li {
    counter-increment: none;
    border-top: 0;
    position: relative;
    padding: 0 0 0.95rem;
    font-size: 0.98rem;
}
.v2-principles .agr-sublist li:last-child { padding-bottom: 0; }
.v2-principles .agr-sublist li::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.6em;
    inset-inline-start: calc(-1.2rem - 4px);
    width: 6px; height: 6px;
    margin: 0;
    border-radius: 50%;
    background: var(--accent-warm);
}
.v2-principles .agr-sublist b {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
}

/* 04a3 professionals catalog (עמוד "אנשי מקצוע") */
.pros-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.pro-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #FAF7F4 0%, #FFFFFF 100%);
    border: 2px solid var(--accent-soft);
    border-radius: var(--radius);
    padding: 1.4rem 1rem 1.2rem;
    box-shadow: 0 2px 6px var(--shadow-soft);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pro-card:hover {
    box-shadow: 0 8px 24px var(--shadow-med);
    transform: translateY(-3px);
    border-color: var(--accent-warm);
}
.pro-photo {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--accent-warm);
    box-shadow: 0 2px 4px var(--shadow-soft);
    margin-bottom: 0.9rem;
}
.pro-card h3 {
    font-family: 'Rubik', sans-serif;
    font-size: 1.08rem; font-weight: 700;
    margin: 0 0 0.25rem;
}
.pro-role {
    font-family: 'Rubik', sans-serif;
    font-size: 0.84rem; font-weight: 600;
    color: var(--accent-warm-dark);
    margin: 0 0 0.7rem;
}
.pro-bio {
    color: var(--text-secondary);
    font-size: 0.93rem; line-height: 1.7;
    margin: 0 0 0.9rem;
}
.pro-link {
    margin-top: auto;
    font-size: 0.9rem; font-weight: 600;
    border-bottom: 1px solid var(--accent-soft);
}
/* מלבן "דמות מההדמיה" בפינה השמאלית העליונה של כרטיסי הדמויות */
.pro-sim-tag {
    position: absolute; top: 0; left: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent-warm-dark);
    background: var(--accent-tint);
    border-right: 1px solid var(--accent-soft);
    border-bottom: 1px solid var(--accent-soft);
    padding: 0.22rem 0.6rem;
}
.pro-link:hover { color: var(--text-primary); text-decoration: none; }
/* הכרטיס הפנוי: הזמנה לאנשי מקצוע להצטרף */
.pro-card.pro-open {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}
.pro-photo-empty {
    width: 96px; height: 96px;
    border-radius: 50%;
    border: 2px dashed var(--accent-soft);
    display: grid; place-items: center;
    color: var(--accent-warm);
    margin-bottom: 0.9rem;
}
@media (max-width: 720px) {
    .pros-grid { grid-template-columns: 1fr; }
}

/* 04b stages axis (עמוד "איפה אתם על הציר") */
.stages-axis { list-style: none; margin: 0; padding: 0; }
.stages-axis h3 {
    font-family: 'Rubik', sans-serif; font-size: 1.02rem; font-weight: 700;
    line-height: 1.35; margin: 0 0 0.4rem;
}
.stages-axis p {
    color: var(--text-secondary); line-height: 1.7; font-size: 0.92rem; margin: 0;
}
/* דסקטופ: ציר אלכסוני. כל תחנה בשורה משלה, מוזחת שמאלה ביחס לקודמת,
   וקו אלכסוני מחבר כל נקודה לנקודה הבאה.
   הגיאומטריה קשיחה, מכוילת לשמונה תחנות בקונטיינר של 720px:
   צעד אופקי 2.8rem, גובה שורה 6.4rem.
   אורך הקו המחבר = sqrt(2.8^2 + 6.4^2) = 6.99rem, זווית = atan(6.4/2.8) = 66.4 מעלות.
   שינוי של אחד הערכים מחייב חישוב מחדש של השניים האחרים. */
@media (min-width: 721px) {
    .stages-axis {
        --sa-dx: 2.8rem;
        --sa-row: 6.4rem;
    }
    .stages-axis li {
        position: relative;
        height: var(--sa-row);
        max-width: 22rem;
        padding-inline-start: 1.6rem;
    }
    .stages-axis li:nth-child(2)  { margin-inline-start: calc(1 * var(--sa-dx)); }
    .stages-axis li:nth-child(3)  { margin-inline-start: calc(2 * var(--sa-dx)); }
    .stages-axis li:nth-child(4)  { margin-inline-start: calc(3 * var(--sa-dx)); }
    .stages-axis li:nth-child(5)  { margin-inline-start: calc(4 * var(--sa-dx)); }
    .stages-axis li:nth-child(6)  { margin-inline-start: calc(5 * var(--sa-dx)); }
    .stages-axis li:nth-child(7)  { margin-inline-start: calc(6 * var(--sa-dx)); }
    .stages-axis li:nth-child(8)  { margin-inline-start: calc(7 * var(--sa-dx)); }
    .stages-axis li:nth-child(9)  { margin-inline-start: calc(8 * var(--sa-dx)); }
    .stages-axis li:nth-child(10) { margin-inline-start: calc(9 * var(--sa-dx)); }
    .stages-axis li::before {
        content: "";
        position: absolute; top: 0.4rem; inset-inline-start: 0;
        width: 12px; height: 12px; border-radius: 50%;
        background: var(--accent-warm); z-index: 1;
    }
    .stages-axis li:not(:last-child)::after {
        content: "";
        position: absolute;
        top: calc(0.4rem + 5px);
        inset-inline-start: 6px;
        width: 6.99rem; height: 2px;
        background: var(--accent-soft);
        transform-origin: 100% 50%;
        transform: rotate(-66.4deg);
    }
    /* התיאור מוזח פנימה כדי שהקו האלכסוני היורד לא יחתוך את הטקסט */
    .stages-axis li p { padding-inline-start: 1.9rem; }
}
/* מובייל: ציר אנכי */
@media (max-width: 720px) {
    .stages-axis {
        border-inline-start: 2px solid var(--accent-soft);
    }
    .stages-axis li {
        position: relative;
        padding: 0 0 1.5rem;
        padding-inline-start: 1.4rem;
    }
    .stages-axis li:last-child { padding-bottom: 0; }
    .stages-axis li::before {
        content: "";
        position: absolute; top: 0.3em; inset-inline-start: -7px;
        width: 12px; height: 12px; border-radius: 50%;
        background: var(--accent-warm);
        border: 2px solid var(--bg-primary);
    }
}

/* 05 historical timeline */
.v3-tl-key {
    font-family: 'Rubik', sans-serif; font-weight: 700;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.45;
    max-width: 28ch; margin: 0 0 1.2rem;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--accent-warm);
}
.v3-tl-scope {
    color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7;
    max-width: 40rem; margin: 0 0 2rem;
}
.v3-timeline {
    list-style: none; margin: 0; padding: 0;
    border-inline-start: 2px solid var(--accent-warm);
}
.v3-timeline > li {
    position: relative;
    padding: 0 0 2.1rem;
    padding-inline-start: 1.55rem;
}
.v3-timeline > li:last-child { padding-bottom: 0; }
.v3-timeline > li::before {
    content: "";
    position: absolute; top: 0.45em; inset-inline-start: -5px;
    width: 8px; height: 8px; background: var(--accent-warm);
}
.v3-tl-era {
    font-family: 'Rubik', sans-serif; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.08em; color: var(--accent-warm-dark); margin-bottom: 0.35rem;
}
.v3-timeline h3, .v3-tl-block > h3 {
    font-family: 'Rubik', sans-serif; font-size: 1.18rem; font-weight: 700;
    line-height: 1.35; margin: 0 0 0.55rem;
}
.v3-timeline p { color: var(--text-secondary); line-height: 1.8; font-size: 0.98rem; }
.v3-tl-src { margin-top: 0.45rem !important; font-size: 0.8rem; }
.v3-tl-src a {
    color: var(--accent-warm-dark);
    border-bottom: 1px solid var(--accent-soft);
}
.v3-tl-src a:hover { color: var(--text-primary); text-decoration: none; }
.v3-tl-block {
    margin-top: 2.6rem; padding-top: 1.8rem;
    border-top: var(--v3-rule);
}
.v3-tl-side {
    list-style: none; margin: 1.2rem 0 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.2rem;
}
.v3-tl-side h4 {
    font-family: 'Rubik', sans-serif; font-size: 1.02rem; font-weight: 700;
    margin: 0 0 0.4rem;
}
.v3-tl-side p { color: var(--text-secondary); line-height: 1.75; font-size: 0.95rem; }
.v3-tl-block > p { color: var(--text-secondary); line-height: 1.85; font-size: 1.02rem; max-width: 44rem; }

/* 07 quotes */
.v3-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 3rem; }
.v3-quote { margin: 0; position: relative; padding-top: 1.6rem; }
.v3-quote::before {
    content: "״"; position: absolute; top: -0.2rem; inset-inline-start: -0.15rem;
    font-family: 'Rubik', sans-serif; font-size: 3rem; line-height: 1; color: var(--accent-warm); opacity: 0.7;
}
.v3-quote p { font-family: 'Rubik', sans-serif; font-weight: 500; font-size: 1.12rem; line-height: 1.65; margin-bottom: 0.8rem; }
.v3-quote footer { font-size: 0.85rem; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 0.4rem; }
.v3-quote footer a {
    color: var(--text-primary); font-weight: 600;
    border-bottom: 1px solid var(--accent-warm);
}
.v3-quote footer a:hover { color: var(--accent-warm-dark); text-decoration: none; }
.v3-voices-links { margin-top: 2.8rem; }
.v3-fineprint {
    margin-top: 2rem; padding-top: 1rem; border-top: var(--v3-rule);
    font-size: 0.82rem; color: var(--text-secondary); max-width: 40rem;
}

.v3-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2.5rem; }
.v3-links a {
    font-family: 'Rubik', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--text-primary);
    padding-bottom: 0.3rem; border-bottom: 2px solid var(--accent-warm);
    display: inline-flex; gap: 0.4rem; transition: gap 0.15s ease, color 0.15s ease;
}
.v3-links a span { color: var(--accent-warm); font-weight: 400; }
.v3-links a:hover { color: var(--accent-warm-dark); gap: 0.8rem; text-decoration: none; }
.v3-links-start { justify-content: flex-start; }
.v3-dark .v3-links a { color: #FAF7F4; }
.v3-dark .v3-links a:hover { color: var(--accent-soft); }

/* site footer */
.site-footer {
    background: #2B2520;
    color: #FAF7F4;
    padding: clamp(2.4rem, 5vw, 3.6rem) 0 1.8rem;
    margin-top: 0;
}
.site-footer-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.site-footer-brand {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0 0 0.45rem;
}
.site-footer-brand a { color: #FAF7F4; }
.site-footer-brand a:hover { color: var(--accent-soft); text-decoration: none; }
.site-footer-tag {
    color: rgba(250,247,244,0.68);
    line-height: 1.7;
    max-width: 38rem;
    margin: 0 0 2rem;
    text-wrap: pretty;
}
.site-footer-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem 2rem;
}
.site-footer-cols h2 {
    font-family: 'Rubik', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-soft);
    margin: 0 0 0.75rem;
}
.site-footer-cols h2.site-footer-sub { margin-top: 1.35rem; }
.site-footer-cols a {
    display: block;
    color: #FAF7F4;
    padding: 0.22rem 0;
    line-height: 1.5;
}
.site-footer-cols a:hover { color: var(--accent-soft); text-decoration: none; }
.site-footer-note {
    margin-top: 2.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(250,247,244,0.14);
    font-size: 0.82rem;
    line-height: 1.7;
    color: rgba(250,247,244,0.62);
}
.site-footer-note p { margin: 0 0 0.55rem; text-wrap: pretty; }
.site-footer-note a { color: var(--accent-soft); }
.site-footer-note a:hover { color: #FAF7F4; }
.site-footer-copy { margin-top: 0.9rem !important; color: rgba(250,247,244,0.45); }
@media (max-width: 640px) {
    .site-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* interview page */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.v3-dashlist {
    list-style: none; margin: 0; padding: 0; max-width: 38rem;
}
.v3-dashlist li {
    padding: 0.85rem 0; display: flex; gap: 0.8rem; align-items: baseline;
    font-size: 1.05rem; line-height: 1.7;
}
.v3-dashlist li + li { border-top: var(--v3-rule); }
.v3-dashlist li::before { content: "·"; color: var(--accent-warm); font-weight: 700; flex: none; }

.iv-topic { margin-bottom: 2.4rem; }
.iv-topic-title {
    font-family: 'Rubik', sans-serif; font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.18em; color: var(--accent-warm-dark); margin: 0 0 0.9rem;
}
.iv-prompts { list-style: none; margin: 0; padding: 0; }
.iv-prompts li { border-top: var(--v3-rule); }
.iv-prompts li:last-child { border-bottom: var(--v3-rule); }
.iv-prompts button, .iv-prompts a {
    display: block; width: 100%; text-align: start; background: none; border: 0;
    font: inherit; font-family: 'Rubik', sans-serif; font-size: 1.12rem; font-weight: 500;
    line-height: 1.5; color: var(--text-primary); padding: 1rem 0;
    cursor: pointer; text-decoration: none;
}
.iv-prompts button:hover, .iv-prompts a:hover { color: var(--accent-warm-dark); }

.iv-free { margin-top: 2.8rem; padding-top: 1.6rem; border-top: 2px solid var(--accent-warm); }
.iv-free-form {
    display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center;
}
.iv-free-form input[type="text"] {
    flex: 1 1 16rem; min-width: 0; font: inherit; font-size: 1.05rem;
    padding: 0.6rem 0; border: 0; border-bottom: 1px solid var(--border-subtle);
    background: transparent; color: var(--text-primary);
}
.iv-free-form input[type="text"]:focus { outline: none; border-bottom-color: var(--accent-warm); }
.v3-text-link {
    font-family: 'Rubik', sans-serif; font-size: 1.05rem; font-weight: 700;
    color: var(--text-primary); background: none; border: 0; padding: 0.4rem 0;
    border-bottom: 2px solid var(--accent-warm); cursor: pointer;
    display: inline-flex; gap: 0.4rem;
}
.v3-text-link:hover { color: var(--accent-warm-dark); }
.iv-skip { margin-top: 2rem; }
.iv-skip button {
    background: none; border: 0; padding: 0; font: inherit; font-size: 0.92rem;
    color: var(--text-secondary); cursor: pointer; text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* responsive */
@media (max-width: 800px) {
    .v3-principles { grid-template-columns: 1fr; gap: 2rem; }
    .v3-quotes { grid-template-columns: 1fr; gap: 2rem; }
    .v3-tl-side { grid-template-columns: 1fr; gap: 1.6rem; }
    .v3-hero-grid, .v3-proposal { grid-template-columns: 1fr; }
    .v3-hero-photo {
        background-image:
            linear-gradient(180deg, rgba(250, 247, 244, 0.82) 0%, rgba(250, 247, 244, 0.52) 100%),
            var(--v3-photo);
    }
    /* במובייל הטקסט תופס את כל הרוחב, אז הגרדיאנט האופקי משאיר אותו על
       החלק הבהיר. עוברים לגרדיאנט אנכי: כהה על הטקסט, נפתח מעט בתחתית. */
    .v3-has-photo {
        background-image:
            linear-gradient(180deg, rgba(43,37,32,0.92) 0%, rgba(43,37,32,0.86) 70%, rgba(43,37,32,0.52) 100%),
            var(--v3-photo);
    }
    .v3-media-hero .v3-ph, .v3-media-tall .v3-ph { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 640px) {
    .v3-sides { grid-template-columns: 1fr; gap: 1.6rem; }
    .v3-side + .v3-side { border-inline-start: none; padding-inline-start: 0; margin-inline-start: 0; border-top: var(--v3-rule); padding-top: 1.6rem; }
    .v3-ch-head { grid-template-columns: 1fr; gap: 0.6rem; }
    .v3-ch-num { font-size: 2.2rem; }
    .iv-free-form { flex-direction: column; align-items: stretch; }
}

/* ---------- character image viewer (G1) ---------- */
.profile-avatar-link { display: inline-block; cursor: zoom-in; }
.profile-avatar-link .profile-avatar { transition: filter 0.2s ease, transform 0.2s ease; }
.profile-avatar-link:hover .profile-avatar { filter: brightness(0.95); transform: scale(1.02); }

.image-viewer {
    display: flex; flex-direction: column; align-items: center;
    gap: 1rem; padding: 1rem 0 2rem;
}
.image-viewer-figure {
    margin: 0; display: flex; flex-direction: column; align-items: center;
    gap: 0.85rem; max-width: 100%;
}
.image-viewer-img {
    max-width: min(720px, 92vw); max-height: 78vh; width: auto; height: auto;
    object-fit: contain; border-radius: var(--radius);
    box-shadow: 0 6px 28px var(--shadow-med); background: var(--bg-card);
}
.image-viewer-caption {
    text-align: center; max-width: 46ch; display: flex; flex-direction: column; gap: 0.3rem;
}
.image-viewer-name { font-family: 'Rubik', sans-serif; font-size: 1.05rem; }
.image-viewer-disclaimer { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; }

/* Inline AI preset actions (admin edit mode) */
.ai-actions { position: relative; display: inline-block; }
/* An open popover establishes its own stacking context (z-index set inline by
   JS, incrementing per open) so the most recently opened popover sits on top.
   We deliberately DON'T lift the whole post card over its neighbors — only the
   .ai-actions box and its absolutely-positioned menu rise, so other cards (and
   their own open popovers) keep their content and stay interactive. */
.ai-actions.open { position: relative; }
.ai-actions-toggle { background: #efe6ff; border: 1px solid #c9b3f0; color: #5b3ea8; }
.ai-actions-menu {
    position: absolute; inset-inline-start: 0; top: calc(100% + 4px);
    width: 30rem; max-width: 92vw; background: #fff; border: 1px solid #ddd;
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: .75rem;
    display: flex; flex-direction: column; gap: .6rem;
    max-height: 80vh; overflow-y: auto;
}
.ai-actions-menu[hidden] { display: none; }

/* Preset tabs (pills) at the top of a multi-preset popover. */
.ai-tabs {
    display: flex; flex-wrap: wrap; gap: .3rem; padding-bottom: .55rem;
    border-bottom: 1px solid #ece6f7;
}
.ai-tab {
    font-size: .8rem; font-family: inherit; cursor: pointer;
    padding: .25rem .65rem; border-radius: 999px;
    border: 1px solid #d6cdec; background: #fff; color: #5b3ea8;
}
.ai-tab:hover { background: #f3ecff; }
.ai-tab.is-active { background: #5b3ea8; border-color: #5b3ea8; color: #fff; }
.ai-preset-form[hidden] { display: none; }
.ai-preset-status[hidden] { display: none; }
.ai-preset-form {
    border: 1px solid #ece6f7; background: #faf8ff; border-radius: 10px;
    padding: .7rem .75rem; display: flex; flex-direction: column; gap: .5rem;
}
.ai-preset-head { display: flex; flex-direction: column; gap: .15rem; }
.ai-preset-name { font-size: .98rem; font-weight: 600; color: #4a2f8f; }
.ai-preset-desc { font-size: .82rem; color: #777; line-height: 1.35; }
.ai-preset-field { display: flex; flex-direction: column; gap: .25rem; }
.ai-preset-label { font-size: .82rem; color: #555; font-weight: 500; }
.ai-preset-direction {
    width: 100%; font-size: .9rem; line-height: 1.45; padding: .5rem .6rem;
    border: 1px solid #d6cdec; border-radius: 8px; resize: vertical;
    min-height: 4.5rem; font-family: inherit;
}
.ai-preset-direction:focus { outline: none; border-color: #9a7fd6; box-shadow: 0 0 0 3px rgba(154,127,214,.18); }
.ai-preset-actions { display: flex; align-items: center; gap: .6rem; }
.ai-preset-count-wrap { display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: #555; }
.ai-preset-count { width: 3.4rem; }
.ai-preset-actions .btn { margin-inline-start: auto; }
.ai-preset-status { font-size: .82rem; color: #666; }

/* Ranked character-match results (match_characters flow), shown inline. */
.ai-match-results { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ai-match-results[hidden] { display: none; }
.ai-match-item { border: 1px solid #ece6f7; background: #fff; border-radius: 8px; padding: .45rem .6rem; }
.ai-match-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ai-match-name { font-size: .88rem; font-weight: 600; color: #5b3fa6; text-decoration: none; }
.ai-match-name:hover { text-decoration: underline; }
.ai-match-score { font-size: .78rem; font-weight: 700; color: #fff; background: #9a7fd6; border-radius: 999px; padding: .1rem .5rem; white-space: nowrap; }
.ai-match-why { margin: .25rem 0 0; font-size: .82rem; line-height: 1.45; color: #555; }
.ai-match-assign { font-size: .76rem; padding: .15rem .55rem; white-space: nowrap; }
.ai-match-assign:disabled { opacity: .65; cursor: default; }

/* ---------- admin character table ---------- */
body:has(.character-admin-table) .container {
    max-width: min(98vw, 108rem);
}
body:has(.character-admin-table) .adm {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 1rem;
}
.character-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: 0 1px 3px var(--shadow-soft);
}
.character-admin-table {
    width: 100%;
    min-width: 88rem;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--bg-card);
    border: none;
    font-size: 0.82rem;
}
.character-admin-table .col-name { width: 8.5rem; }
.character-admin-table .col-handle { width: 8.5rem; }
.character-admin-table .col-badge { width: 6.5rem; }
.character-admin-table .col-order { width: 4.2rem; }
.character-admin-table .col-description { width: 13rem; }
.character-admin-table .col-bio { width: 20rem; }
.character-admin-table .col-public { width: 5.5rem; }
.character-admin-table .col-stores { width: 7.5rem; }
.character-admin-table .col-chat { width: 5.2rem; }
.character-admin-table .col-count { width: 5rem; }
.character-admin-table .col-links { width: 10.5rem; }
.character-admin-table .col-dates { width: 10.5rem; }
.character-admin-table th,
.character-admin-table td {
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.38rem 0.42rem;
    vertical-align: top;
    overflow: visible;
}
.character-admin-table th {
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-align: start;
    white-space: nowrap;
}
.character-admin-table .sort-th {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-align: start;
}
.character-admin-table .col-public-head-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.character-admin-table .public-filter-head {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 1;
}
.character-admin-table .public-filter-head input {
    margin: 0;
    cursor: pointer;
}
.character-admin-table .sort-th:hover { color: var(--accent-warm-dark); }
.character-admin-table .sort-th.is-sorted-desc::after { content: " ↓"; }
.character-admin-table .sort-th.is-sorted-asc::after { content: " ↑"; }
.character-admin-table tr:last-child td { border-bottom: none; }
.character-admin-table .adm-editable {
    display: inline-block;
    min-width: 3rem;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.18rem;
    cursor: text;
    overflow-wrap: anywhere;
}
.character-admin-table .adm-editable:hover {
    background: rgba(0,0,0,0.03);
    outline: 1px dashed var(--accent-soft);
}
.character-admin-table .adm-editable:focus,
.character-admin-table input:focus {
    outline: 2px solid var(--accent-warm);
    background: #fff;
}
.character-admin-table .code-ish {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    direction: ltr;
    text-align: start;
}
.character-admin-table .bio-cell { min-width: 0; }
.character-admin-table .adm-bio-edit {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 4.6rem;
    overflow: hidden;
    white-space: pre-wrap;
    line-height: 1.45;
}
.character-admin-table .adm-bio-edit:focus {
    max-height: 18rem;
    overflow: auto;
}
.character-admin-table .adm-inline-number {
    width: 100%;
    padding: 0.2rem 0.3rem;
    font-size: 0.82rem;
}
.character-admin-table .mini-check {
    margin: 0;
    gap: 0.25rem;
    white-space: nowrap;
    font-size: 0.78rem;
}
.character-admin-table .vector-picker { position: relative; min-width: 7rem; }
.character-admin-table .vector-picker summary {
    cursor: pointer;
    list-style: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.45rem;
    background: var(--bg-primary);
    white-space: nowrap;
}
.character-admin-table .vector-picker summary::-webkit-details-marker { display: none; }
.character-admin-table .vector-picker-menu {
    position: absolute;
    z-index: 30;
    inset-inline-start: 0;
    top: calc(100% + 0.25rem);
    min-width: 14rem;
    max-height: 18rem;
    overflow: auto;
    padding: 0.45rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px var(--shadow-med);
}
.character-admin-table .vector-picker-menu label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.2rem;
    cursor: pointer;
}
.character-admin-table .vector-picker-menu small {
    margin-inline-start: auto;
    color: var(--text-secondary);
    font-size: 0.68rem;
}
.character-admin-table .character-links {
    white-space: nowrap;
}
.character-admin-table .character-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.12rem 0.34rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--accent-warm-dark);
    font-size: 0.68rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    margin-inline-end: 0.18rem;
}
.character-admin-table .character-links a:hover {
    background: var(--accent-tint);
    border-color: var(--accent-soft);
    text-decoration: none;
}
.character-admin-table .character-dates {
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.35;
    white-space: nowrap;
}
.character-admin-table .character-dates span {
    display: block;
}
.character-admin-table .row-error {
    margin-top: 0.25rem;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-sm);
    background: #FBE9E9;
    color: #9b3030;
    font-size: 0.72rem;
    line-height: 1.35;
}
.character-admin-table .row-error[hidden] { display: none; }
.character-admin-table .saving { opacity: 0.65; }
.character-admin-table .saved {
    outline: 2px solid #2e7d32;
    outline-offset: 1px;
}
.character-admin-table .save-failed {
    outline: 2px solid #c62828;
    outline-offset: 1px;
}

/* 404 */
.err-pages {
    list-style: none;
    margin: 0;
    padding: 0;
}
.err-pages li {
    padding: 1.05rem 0;
    border-top: 1px solid var(--border-subtle);
}
.err-pages li:last-child {
    border-bottom: 1px solid var(--border-subtle);
}
.err-pages a {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--accent-warm);
}
.err-pages a:hover {
    color: var(--accent-warm-dark);
    text-decoration: none;
}
.err-pages p {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 38rem;
    text-wrap: pretty;
}