/* Modal system primitives. Variants override custom properties instead of duplicating layout. */
.modal {
    --modal-z: 110;
    --modal-padding: var(--dialog-shell-gap);
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--modal-padding);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: var(--modal-z);
}

.modal.policy-modal {
    --modal-z: 120;
}

.modal.policy-accept-modal {
    --modal-z: 110;
}

.modal.modal-overlay {
    --modal-z: 130;
}

.modal.is-open {
    display: flex;
}

body.rant-view .rant-page-shell {
    position: static;
    inset: auto;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: calc(100dvh - 8rem);
    padding: 0;
    overflow: visible;
    z-index: auto;
}

body.rant-view .rant-page-shell .modal-card {
    --modal-card-width: 100%;
    --modal-card-min-height: 0;
    display: flex;
    flex: 1 1 100%;
    width: var(--modal-card-width) !important;
    max-width: 100% !important;
    min-width: 0;
    max-height: none !important;
    min-height: var(--modal-card-min-height) !important;
}

body.rant-view .rant-page-shell .modal-body-scroll {
    max-height: none !important;
    overflow: visible;
}

body.rant-view .rant-feed:not(.admin-feed):not(.policy-feed) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible;
}

body.rant-view .rant-feed:not(.admin-feed):not(.policy-feed)::before {
    display: none !important;
}

body.rant-view.modal-open {
    overflow: auto;
}

.modal-card {
    --modal-card-width: var(--dialog-shell-width);
    --modal-card-padding: var(--dialog-shell-padding);
    --modal-card-gap: 0.68rem;
    --modal-card-min-height: 0;
    position: relative;
    background: var(--panel-sheen), var(--panel-ember-wash), var(--card);
    border-radius: var(--dialog-shell-radius);
    border: 1px solid var(--panel-border);
    box-shadow: var(--dialog-shell-shadow);
    width: var(--modal-card-width);
    max-height: calc(100vh - (2 * var(--modal-padding)));
    max-height: calc(100dvh - (2 * var(--modal-padding)));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--modal-card-gap);
    padding: var(--modal-card-padding);
    margin-top: 0;
    min-height: var(--modal-card-min-height);
}

/* Content modal: full-height workspace for profile/rant/thread/policy views. */
.modal-card-content,
.modal-card-full {
    --modal-card-min-height: calc(100dvh - (2 * var(--modal-padding)));
}

/* Dialog modal: concise prompts/alerts/forms that should not force full height. */
.modal-card-dialog,
.modal-card-compact {
    --modal-card-width: min(560px, 95vw);
    --modal-card-padding: 0.8rem;
    --modal-card-gap: 0.66rem;
}

.modal-close {
    position: static;
    cursor: pointer;
}

.modal-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.62rem;
    padding-right: 0;
}

.modal-header-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    margin-left: auto;
    flex-wrap: nowrap;
    justify-self: end;
    white-space: nowrap;
}

.modal-header-actions > * {
    align-self: center;
}

.modal-note {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--accent-deep);
}

.modal-note.is-error {
    color: #b91c1c;
}

/* Optional composition helpers for modal internals. */
.modal-body {
    --modal-body-gap: 0.75rem;
    display: grid;
    gap: var(--modal-body-gap);
}

.modal-body-scroll {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.modal-menu {
    position: relative;
}

.menu-trigger {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
    font-size: 1.08rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 0.32rem);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.78rem;
    padding: 0.28rem;
    min-width: 160px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 10;
}

.modal-menu.is-open .menu-pop {
    display: flex;
}

.menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: none;
    background: transparent;
    padding: 0.55rem 0.7rem;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
    border-radius: 0.7rem;
    cursor: pointer;
}

.menu-item-icon {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1rem;
}

.menu-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-item:hover {
    background: var(--surface-soft);
}

.menu-item.is-danger {
    color: #b91c1c;
}

.rant-editor {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1.2rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    margin-bottom: 1.2rem;
}

.rant-editor label {
    display: grid;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--ink);
}

.rant-editor input,
.rant-editor textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--card);
    color: var(--ink);
}

.rant-editor-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rant-editor-note {
    font-size: 0.85rem;
    color: #b91c1c;
}

.modal.is-editing .rant-modal-text,
.modal.is-editing .comment-section {
    display: none;
}

.modal.is-editing .rant-editor {
    display: grid;
}

.modal-title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.modal-subtitle {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.modal-tabs {
    display: flex;
    gap: 0.52rem;
}

/* Shared action-row alignment for compact utility dialogs. */
.modal-footer.modal-actions {
    justify-content: flex-end;
    gap: 0.42rem;
}

.report-body {
    --modal-body-gap: 0.45rem;
    display: grid;
    gap: var(--modal-body-gap);
}

.report-body label {
    font-weight: 700;
    font-size: 0.9rem;
}

.report-body textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0.78rem;
    padding: 0.62rem 0.72rem;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    min-height: 90px;
}

.report-body select {
    width: 100%;
}

.thread-list {
    --modal-body-gap: 0.62rem;
    display: grid;
    gap: var(--modal-body-gap);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.thread-comment {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.52rem 0.68rem 0.58rem;
    padding-left: calc(0.68rem + (var(--depth, 0) * 0.5rem));
    background: var(--card);
    display: grid;
    gap: 0.34rem;
    position: relative;
}

.thread-comment::before {
    content: "";
    position: absolute;
    left: calc(0.4rem + (var(--depth, 0) * 0.2rem));
    top: 0.52rem;
    bottom: 0.52rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 138, 0, 0.4), rgba(255, 138, 0, 0.08));
    opacity: calc(0.15 + (var(--depth, 0) * 0.18));
}

.thread-meta {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    font-size: 0.76rem;
    color: var(--muted);
}

.thread-author {
    font-weight: 700;
    color: var(--ink);
}

.thread-time {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.thread-edited {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #a16207;
}

.thread-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: #ffe9cc;
    color: #7a2b00;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.thread-body {
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.5;
}

.modal-tab {
    border: none;
    background: #f3f4f6;
    color: var(--muted);
    border-radius: 999px;
    padding: 0.34rem 0.86rem;
    font-weight: 700;
    cursor: pointer;
}

.modal-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-tab.is-active {
    background: #ffe3bf;
    color: #7a2b00;
}

.modal-panel {
    display: none;
}

.modal-panel.is-active {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.modal-list {
    display: grid;
    gap: 1rem;
}

.profile-badges {
    margin-top: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    border-radius: 999px;
    padding: 0.2rem 0.52rem;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.1;
    white-space: nowrap;
}

.profile-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.profile-badge-icon.has-image {
    border-color: rgba(255, 255, 255, 0.36);
    background: color-mix(in srgb, var(--surface-soft) 65%, var(--card));
    box-shadow: 0 3px 8px rgba(11, 18, 29, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.profile-badge-icon .badge-image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 999px;
    object-fit: contain;
}

.profile-badge-icon .ui-icon {
    width: 0.56rem;
    height: 0.56rem;
    stroke-width: 2.2;
}

.profile-badge--founding {
    border-color: rgba(59, 130, 246, 0.42);
    color: #1d4e89;
    background: color-mix(in srgb, #8fb8e8 16%, var(--surface-soft));
}

.profile-badge--firestarter {
    border-color: rgba(201, 106, 38, 0.44);
    color: var(--accent-deep);
    background: color-mix(in srgb, var(--fire-grad-mid) 14%, var(--surface-soft));
}

.profile-badge--custom {
    border-color: rgba(124, 142, 168, 0.45);
    color: var(--ink);
    background: color-mix(in srgb, var(--surface-soft) 85%, var(--card));
}

.modal-item {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 1rem;
    background: var(--card);
    display: grid;
    gap: 0.4rem;
}

.modal-item-meta {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.modal-item-excerpt {
    color: #2a3142;
    font-size: 0.92rem;
    line-height: 1.4;
}

.modal-rant-link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    text-align: left;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
}

.modal-rant-link:hover {
    color: #c2410c;
}

.modal-empty {
    color: var(--muted);
    text-align: center;
    padding: 0.85rem;
}

.rant-modal-body {
    --modal-body-gap: 0.85rem;
    overflow-y: auto;
    display: grid;
    gap: var(--modal-body-gap);
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    padding-bottom: 1.2rem;
}

.rant-modal-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "heat heat heat"
        "fuel comments share"
        "note note note";
    align-items: center;
    gap: 0.46rem 0.42rem;
    padding: 0.46rem 0.58rem;
}

.rant-modal-actions .fuel-form {
    grid-area: fuel;
}

.rant-modal-comment-count {
    grid-area: comments;
}

.rant-modal-actions .rant-share-btn {
    grid-area: share;
}

.rant-modal-actions .fuel-note {
    grid-area: note;
    margin-left: 0;
    text-align: right;
    font-size: 0.72rem;
}

.rant-modal-mini-meter {
    grid-area: heat;
    margin-top: 0;
    --meter-height: 18px;
    --heat-pill-slot: clamp(132px, 27%, 170px);
    --meter-start: #cedbeb;
    --meter-mid: #afc4db;
    --meter-end: #8ea8c5;
    --meter-glow: rgba(126, 157, 194, 0.22);
    --meter-track-bg: linear-gradient(180deg, #eef3fa 0%, #e1eaf6 100%);
    --meter-track-border: rgba(147, 167, 192, 0.72);
    --badge-ink: #34485f;
    --badge-bg: linear-gradient(125deg, #eaf0f8 0%, #d4dfec 55%, #c4d4e6 100%);
    --badge-border: rgba(111, 132, 157, 0.44);
    --badge-halo: rgba(120, 152, 191, 0.12);
    --badge-ice-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
    gap: 0.38rem;
}

.rant-modal-mini-meter[data-heat-band="cold"] {
    --badge-ice-overlay:
        radial-gradient(84% 94% at 12% 2%, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(72% 88% at 88% 2%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, rgba(247, 250, 255, 0.68) 0%, rgba(234, 241, 249, 0.34) 26%, rgba(221, 232, 246, 0.06) 52%, rgba(218, 230, 244, 0) 68%);
}

.rant-modal-mini-meter[data-heat-band="warm"] {
    --meter-start: #f8d8a8;
    --meter-mid: #f27225;
    --meter-end: #d83a1f;
    --meter-glow: rgba(217, 94, 42, 0.34);
    --meter-track-border: rgba(202, 131, 74, 0.7);
    --badge-bg: linear-gradient(125deg, #f6d6a9 0%, #eb7630 58%, #d53d21 100%);
    --badge-border: rgba(200, 92, 39, 0.58);
    --badge-ink: #392313;
    --badge-halo: rgba(222, 102, 43, 0.22);
}

.rant-modal-mini-meter[data-heat-band="hot"] {
    --meter-start: #f8c78d;
    --meter-mid: #eb5e22;
    --meter-end: #bf2618;
    --meter-glow: rgba(221, 86, 35, 0.46);
    --meter-track-border: rgba(214, 98, 47, 0.74);
    --badge-bg: linear-gradient(125deg, #f7cb92 0%, #e55d25 52%, #be2617 100%);
    --badge-border: rgba(191, 72, 30, 0.67);
    --badge-ink: #2f190d;
    --badge-halo: rgba(225, 88, 34, 0.29);
}

.rant-modal-mini-meter[data-heat-band="burning"] {
    --meter-start: #f8b972;
    --meter-mid: #de4f1d;
    --meter-end: #a31b12;
    --meter-glow: rgba(235, 91, 33, 0.56);
    --meter-track-border: rgba(224, 90, 40, 0.78);
    --badge-bg: linear-gradient(125deg, #f7be76 0%, #db4d1d 52%, #a31c13 100%);
    --badge-border: rgba(178, 58, 27, 0.76);
    --badge-ink: #271208;
    --badge-halo: rgba(229, 84, 31, 0.34);
}

.rant-modal-mini-meter[data-heat-band="inferno"] {
    --meter-start: #f5ab63;
    --meter-mid: #cf4218;
    --meter-end: #85170f;
    --meter-glow: rgba(229, 74, 27, 0.64);
    --meter-track-border: rgba(228, 74, 32, 0.84);
    --badge-bg: linear-gradient(125deg, #f5b169 0%, #ca4319 48%, #85170f 100%);
    --badge-border: rgba(162, 44, 18, 0.82);
    --badge-ink: #1f0c05;
    --badge-halo: rgba(235, 76, 26, 0.42);
}

.rant-modal-mini-meter .meter-row {
    min-height: 1.18rem;
    position: relative;
    padding-left: calc(var(--heat-pill-slot) - 7px);
    width: 100%;
    align-items: flex-start;
}

.rant-modal-mini-meter .meter-row .heat-badge {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    width: var(--heat-pill-slot);
    justify-content: center;
    pointer-events: none;
}

.rant-modal-mini-meter .meter {
    margin-top: 0;
    background: var(--meter-track-bg);
    border-color: var(--meter-track-border);
    border-radius: 0 4px 4px 0;
}

.rant-modal-mini-meter .meter-fill {
    background: linear-gradient(90deg, var(--meter-start) 0%, var(--meter-mid) 56%, var(--meter-end) 100%);
    border-radius: 0 2px 2px 0;
}

.rant-modal-mini-meter .meter-fill::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, rgba(255, 242, 205, 0) 0%, rgba(255, 242, 205, 0.86) 100%);
    opacity: 0.9;
    pointer-events: none;
}

.rant-modal-mini-meter .heat-meta {
    font-size: 0.72rem;
    gap: 0.35rem;
    justify-content: flex-end;
    opacity: 0.72;
    line-height: 1;
}

.rant-modal-mini-meter .heat-flame {
    display: none;
}

.rant-modal-mini-meter .heat-peak {
    font-size: 0;
    letter-spacing: 0;
    opacity: 0.8;
}

.rant-modal-mini-meter .heat-peak::after {
    content: "MAX " attr(data-peak-value) "\00B0";
    font-size: 0.7rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--muted) 94%, var(--ink));
    letter-spacing: 0.07em;
}

.rant-modal-mini-meter.is-fuel-burst .meter-fill {
    animation: modalMeterBurst 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fuel-btn.fuel-btn-compact {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    min-width: 108px;
}

.rant-modal-comment-count {
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
}

.rant-modal-comment-count .comment-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}