/*
 * Tela Network v2 — reusable UI components.
 */

/* Evidence tags — outline only */

.v2-evidence-tag {
    align-items: center;
    border: 1px solid;
    display: inline-flex;
    flex-shrink: 0;
    padding: 3px 6px;
}

.v2-evidence-tag--settled {
    border-color: color-mix(in oklch, var(--v2-settled) 35%, transparent);
    color: var(--v2-settled);
}

.v2-evidence-tag--confirmed {
    border-color: color-mix(in oklch, var(--v2-confirmed) 35%, transparent);
    color: var(--v2-confirmed);
}

.v2-evidence-tag--claimed {
    border-color: color-mix(in oklch, var(--v2-claimed) 30%, transparent);
    color: var(--v2-claimed);
}

.v2-evidence-tag--disputed {
    border-color: color-mix(in oklch, var(--v2-disputed) 40%, transparent);
    color: var(--v2-disputed);
}


/* Example-data honesty banner (Explore, Network, Events) */

.v2-example-banner {
    border: 1px solid var(--v2-border);
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
}


/* Dropdown caret — reusable disclosure chevron */

.v2-dropdown-caret {
    display: inline-block;
    flex-shrink: 0;
    height: 0.275rem;
    margin-inline-start: 0.1rem;
    transition: transform 0.15s ease;
    vertical-align: 0;
    width: 0.425rem;
}

[aria-expanded="true"] > .v2-dropdown-caret {
    transform: rotate(180deg);
}


/* Buttons — Framer hierarchy */

.v2-btn {
    border-radius: var(--v2-radius);
    cursor: pointer;
    display: inline-block;
    font-family: var(--v2-font-sans);
    font-size: var(--v2-text-sm);
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1.2;
    padding: 0.75rem 1rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.v2-btn-record {
    background-color: var(--v2-btn-record-fill);
    border: 1px solid var(--v2-btn-record-fill);
    color: var(--v2-btn-on-fill);
}

.v2-btn-record:hover {
    opacity: 0.88;
}

/* Form / prerequisite gate — not “feature unready” (slash overlay). */
.v2-btn:disabled:not(.v2-btn--unready),
.v2-btn:disabled:not(.v2-btn--unready):hover {
    cursor: not-allowed;
    opacity: 0.45;
}

.v2-btn--unready {
    cursor: default;
    pointer-events: none;
}

.v2-btn-record.v2-btn--unready {
    overflow: hidden;
    position: relative;
}

.v2-btn-record.v2-btn--unready::after {
    background-color: color-mix(in oklch, var(--v2-btn-on-fill) 50%, transparent);
    content: "";
    height: 5px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 200%;
}

.v2-btn-record.v2-btn--unready:hover {
    opacity: 1;
}

.v2-btn-outline.v2-btn--unready {
    overflow: hidden;
    position: relative;
}

.v2-btn-outline.v2-btn--unready::after {
    background-color: color-mix(in oklch, var(--v2-foreground) 50%, transparent);
    content: "";
    height: 5px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 200%;
}

.v2-btn-outline.v2-btn--unready:hover {
    background-color: transparent;
}

.v2-btn-explore {
    background-color: var(--v2-btn-explore-fill);
    border: 1px solid var(--v2-btn-explore-fill);
    color: var(--v2-btn-on-fill);
}

.v2-btn-explore:hover {
    opacity: 0.88;
}

.v2-btn-explore.v2-btn--unready {
    overflow: hidden;
    position: relative;
}

.v2-btn-explore.v2-btn--unready::after {
    background-color: color-mix(in oklch, var(--v2-btn-on-fill) 50%, transparent);
    content: "";
    height: 5px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 200%;
}

.v2-btn-explore.v2-btn--unready:hover {
    opacity: 1;
}

.v2-btn-outline {
    background-color: transparent;
    border: 1px solid var(--v2-foreground);
    color: var(--v2-foreground);
}

.v2-btn-outline:hover {
    background-color: var(--v2-secondary);
}


/* Unready inputs */

.v2-input-wrap--unready {
    cursor: default;
    overflow: hidden;
    pointer-events: none;
    position: relative;
}

.v2-input-wrap--unready::after {
    background-color: color-mix(in oklch, var(--v2-foreground) 50%, transparent);
    content: "";
    height: 5px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 120%;
    z-index: 1;
}


/* Links */

.v2-link-accent {
    color: var(--v2-accent);
    text-decoration: underline;
    text-decoration-color: var(--v2-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.v2-link-accent:hover {
    opacity: 0.88;
}

.v2-link-secondary {
    color: var(--v2-muted-foreground);
    font-size: var(--v2-text-base);
    text-decoration: none;
}

.v2-link-secondary:hover {
    color: var(--v2-foreground);
    text-decoration: underline;
    text-decoration-color: var(--v2-foreground);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}


.v2-author-profile-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}


/* Section heading */

.v2-section-heading {
    align-items: baseline;
    border-bottom: 1px solid color-mix(in oklch, var(--v2-foreground) 80%, transparent);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-bottom: 0.5rem;
}

.v2-section-heading-link {
    text-decoration: none;
    transition: color 0.15s ease;
}

.v2-section-heading-link:hover {
    color: var(--v2-foreground);
}


/* Flash messages */

.v2-messages {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block: 1rem 1.25rem;
}

.v2-message {
    border: 1px solid var(--v2-border);
    font-size: var(--v2-text-base);
    line-height: 1.5;
    margin: 0;
    padding: 0.75rem 1rem;
}

.v2-message--error {
    border-color: color-mix(in oklch, var(--v2-disputed) 40%, var(--v2-border));
}

.v2-message--success {
    border-color: color-mix(in oklch, var(--v2-confirmed) 40%, var(--v2-border));
}

.v2-message--info,
.v2-message--warning {
    border-color: var(--v2-border);
}


/* Click-to-copy control (includes/copy_button.html) */

.copy-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    margin: 0 0 0 0.25rem;
    opacity: 0.7;
    padding: 0.15rem;
    position: relative;
    vertical-align: middle;
}

.copy-button:hover,
.copy-button:focus-visible {
    opacity: 1;
    outline: none;
}

.copy-button:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in oklch, currentColor 35%, transparent);
}

.copy-button-icon {
    display: block;
}

.copy-button-icon--done {
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.7);
}

.copy-button.is-copied .copy-button-icon--copy {
    opacity: 0;
    transform: scale(0.7);
}

.copy-button.is-copied .copy-button-icon--done {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.copy-button-icon--copy,
.copy-button.is-copied .copy-button-icon--done {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.copy-button.is-copied {
    animation: copy-button-pulse 0.35s ease;
}

@keyframes copy-button-pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}


/* Page size chips (search Results per page / log Items per page) */

.v2-page-size {
    margin-top: 1rem;
}

.v2-page-size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.v2-page-size-form {
    margin: 0;
}

.v2-page-size-btn {
    background: none;
    border: 1px solid var(--v2-border);
    color: var(--v2-muted-foreground);
    cursor: pointer;
    font-family: var(--v2-font-mono);
    font-size: var(--v2-text-sm);
    padding: 0.25rem 0.5rem;
}

.v2-page-size-btn--active {
    background-color: var(--v2-secondary);
    border-color: var(--v2-foreground);
    color: var(--v2-foreground);
}


/* Post stack share session — inline panel above posts */

.v2-post-stack-share-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-inline: auto;
    max-width: 42rem;
    overflow-anchor: none;
    width: 100%;
}

.v2-post-stack-share-panel {
    background: var(--v2-background);
    border: var(--v2-share-context-outline-width, 1px) solid var(--v2-rule);
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    gap: 0;
    padding-block: 1rem 0;
    padding-inline: 1rem;
    width: 100%;
}

.v2-post-stack-share-panel:not([hidden]) {
    display: flex;
}

.v2-post-stack-share-panel-body {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.75rem;
    min-height: calc(
        (var(--v2-text-base) * 1.2 * 2)
        + ((var(--v2-text-base) * 2.4 + 0.25rem) * 2)
        + (var(--v2-text-base) * 4.8)
        + (var(--v2-text-base) * 2.4)
        + (var(--v2-text-base) * 1.2)
        + (0.75rem * 7)
    );
}

.v2-post-stack-share-panel-footer {
    flex-shrink: 0;
    padding-block: 0 1rem;
}

.v2-post-stack-share-url + .v2-post-stack-share-count {
    margin-top: -0.375rem;
}

.v2-post-stack-share-shell--enabled.v2-post-stack-share-shell--open .v2-post-stack-share-main {
    --v2-share-context-outline-width: 1px;
    --v2-share-highlight-outline-width: 2px;
    --v2-share-outline-offset: 8px;
    --v2-share-panel-inset: calc(
        var(--v2-share-stack-inset)
        - var(--v2-share-outline-offset)
        - var(--v2-share-context-outline-width)
    );
    --v2-share-stack-inset: 1rem;
}

@media (min-width: 768px) {
    .v2-post-stack-share-shell--enabled.v2-post-stack-share-shell--open .v2-post-stack-share-main {
        --v2-share-stack-inset: 1.25rem;
    }
}

.v2-post-stack-share-shell--enabled.v2-post-stack-share-shell--open .v2-post-stack-share-panel:not([hidden]) {
    box-sizing: border-box;
    margin-inline: var(--v2-share-panel-inset);
    width: calc(100% - 2 * var(--v2-share-panel-inset));
}

.v2-post-stack-share-panel-header {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    margin-bottom: 0;
}

.v2-post-stack-share-done,
.v2-post-stack-share-action {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: var(--v2-text-base);
    padding: 0;
}

.v2-post-stack-share-done:hover,
.v2-post-stack-share-action:hover {
    color: var(--v2-accent);
}

.v2-post-stack-share-action:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.v2-post-stack-share-action:disabled:hover {
    color: inherit;
}

.v2-post-stack-share-guidance {
    flex-shrink: 0;
    font-size: var(--v2-text-base);
    line-height: 1.2;
    margin: 0;
}

.v2-post-stack-share-hint {
    flex-shrink: 0;
    font-size: var(--v2-text-base);
    height: calc(var(--v2-text-base) * 1.2);
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    visibility: hidden;
}

.v2-post-stack-share-hint--visible {
    visibility: visible;
}

.v2-post-stack-share-row {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.25rem;
    height: calc(var(--v2-text-base) * 2.4 + 0.25rem);
    overflow: hidden;
}

.v2-post-stack-share-row-summary {
    align-items: baseline;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-height: calc(var(--v2-text-base) * 1.2);
}

.v2-post-stack-share-label {
    flex-shrink: 0;
    font-size: var(--v2-text-base);
    font-weight: 600;
}

.v2-post-stack-share-value {
    font-size: var(--v2-text-base);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-post-stack-share-row-actions {
    flex-shrink: 0;
    font-size: var(--v2-text-base);
    white-space: nowrap;
}

.v2-post-stack-share-link-types {
    border: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.35rem;
    height: calc(var(--v2-text-base) * 4.8);
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.v2-post-stack-share-legend {
    font-size: var(--v2-text-base);
    font-weight: 600;
    margin-bottom: 0.25rem;
    padding: 0;
}

.v2-post-stack-share-radio {
    align-items: center;
    display: flex;
    font-size: var(--v2-text-base);
    gap: 0.35rem;
}

.v2-post-stack-share-url {
    flex-shrink: 0;
    font-family: var(--v2-font-mono);
    font-size: var(--v2-text-base);
    height: calc(var(--v2-text-base) * 2.4);
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    word-break: break-all;
}

.v2-post-stack-share-count {
    flex-shrink: 0;
    font-size: var(--v2-text-base);
    line-height: 1.2;
    margin: 0;
    min-height: calc(var(--v2-text-base) * 1.2);
}

.v2-post-stack-share-copy {
    align-self: flex-start;
    margin: 0;
}

.v2-post-stack-share-radio input:disabled + *,
.v2-post-stack-share-radio--disabled,
.v2-post-stack-share-radio:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
}


/* Toast (utils.js — copy feedback on share session) */

.toast-notification {
    background: var(--v2-foreground);
    border-radius: var(--v2-radius);
    bottom: 1.25rem;
    color: var(--v2-background);
    font-size: var(--v2-text-sm);
    opacity: 0;
    padding: 0.65rem 1rem;
    pointer-events: none;
    position: fixed;
    right: 1.25rem;
    transition: opacity 0.2s ease;
    z-index: 50;
}

.toast-notification.toast-visible {
    opacity: 1;
    pointer-events: auto;
}