/* Verdict — frontend styles v1.1.0
 * Two thumbs, inline counter, slate-blue by default.
 * No frameworks. CSS custom properties so presets can override.
 */

.verdict-widget {
    --verdict-radius: 12px;
    --verdict-radius-btn: 10px;
    --verdict-padding: 1.25em;
    --verdict-gap: .75em;

    --verdict-fg-muted: color-mix(in oklab, currentColor 60%, transparent);
    --verdict-border: color-mix(in oklab, currentColor 12%, transparent);

    /* Slate — default preset, neutral, works on almost any theme */
    --verdict-up-bg:        #F1F5F9;
    --verdict-up-bg-hover:  #E2E8F0;
    --verdict-up-fg:        #475569;
    --verdict-up-accent:    #475569;

    --verdict-down-bg:      #F1F5F9;
    --verdict-down-bg-hover:#E2E8F0;
    --verdict-down-fg:      #64748B;
    --verdict-down-accent:  #64748B;

    box-sizing: border-box;
    margin: 2em 0;
    padding: var(--verdict-padding);
    border: 1px solid var(--verdict-border);
    border-radius: var(--verdict-radius);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.4;
}

.verdict-widget *,
.verdict-widget *::before,
.verdict-widget *::after { box-sizing: border-box; }

.verdict-header { text-align: center; margin-bottom: 1em; }

.verdict-question {
    font-size: 1.05em;
    font-weight: 600;
    margin: 0;
    letter-spacing: -.005em;
}

.verdict-subtitle {
    margin: .25em 0 0;
    font-size: .88em;
    color: var(--verdict-fg-muted);
}

/* Buttons container — horizontal or vertical */
.verdict-buttons {
    display: grid;
    gap: var(--verdict-gap);
    margin: 0;
}
.verdict-layout-horizontal .verdict-buttons {
    grid-template-columns: 1fr 1fr;
}
.verdict-layout-vertical .verdict-buttons {
    grid-template-columns: 1fr;
}

.verdict-btn {
    appearance: none;
    border: 1px solid transparent;
    font: inherit;
    padding: .75em 1em;
    border-radius: var(--verdict-radius-btn);
    cursor: pointer;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 44px;
    transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}

/* Coloured from the start. Hover only changes background, never text. */
.verdict-up,
.verdict-up:hover,
.verdict-up:focus,
.verdict-up:active     { background: var(--verdict-up-bg);   color: var(--verdict-up-fg); }
.verdict-down,
.verdict-down:hover,
.verdict-down:focus,
.verdict-down:active   { background: var(--verdict-down-bg); color: var(--verdict-down-fg); }

.verdict-up:hover   { background: var(--verdict-up-bg-hover); }
.verdict-down:hover { background: var(--verdict-down-bg-hover); }

.verdict-widget[data-animation="1"] .verdict-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .25);
}
.verdict-widget[data-animation="1"] .verdict-btn:active {
    transform: translateY(0) scale(.98);
}

.verdict-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Selected after vote: full accent fill, white text */
.verdict-btn.is-selected {
    color: #fff !important;
    transform: none !important;
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .35);
}
.verdict-up.is-selected,
.verdict-up.is-selected:hover     { background: var(--verdict-up-accent);   color: #fff; }
.verdict-down.is-selected,
.verdict-down.is-selected:hover   { background: var(--verdict-down-accent); color: #fff; }

.verdict-btn.is-selected .verdict-count { color: rgba(255, 255, 255, .92); }

.verdict-btn.is-disabled { cursor: not-allowed; }
.verdict-btn.is-disabled:not(.is-selected) { opacity: .55; }

.verdict-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.verdict-icon svg { width: 100%; height: 100%; display: block; }

.verdict-label {
    font-weight: 600;
    font-size: .95em;
    letter-spacing: -.005em;
}

.verdict-count {
    font-size: .85em;
    font-weight: 500;
    opacity: .8;
    font-variant-numeric: tabular-nums;
    margin-left: .15em;
}

.verdict-bottom {
    margin: 1em 0 0;
    text-align: center;
    font-size: .85em;
    color: var(--verdict-fg-muted);
    font-variant-numeric: tabular-nums;
}

.verdict-thanks {
    margin-top: 1em;
    text-align: center;
    font-size: .9em;
    font-weight: 600;
    padding: .55em 1em;
    border-radius: var(--verdict-radius-btn);
    background: color-mix(in oklab, currentColor 6%, transparent);
}

/* Sizes */
.verdict-size-small  .verdict-btn   { padding: .5em .75em; min-height: 36px; }
.verdict-size-small  .verdict-icon  { width: 18px; height: 18px; }
.verdict-size-small  .verdict-label { font-size: .85em; }
.verdict-size-small  .verdict-count { font-size: .8em; }

.verdict-size-large  .verdict-btn   { padding: 1em 1.25em; min-height: 52px; }
.verdict-size-large  .verdict-icon  { width: 26px; height: 26px; }
.verdict-size-large  .verdict-label { font-size: 1.05em; }
.verdict-size-large  .verdict-count { font-size: .95em; }

/* ============ PRESETS ============ */

/* Slate is the default — defined in the base rules above. */

.verdict-preset-mint_coral {
    --verdict-up-bg: #ECFDF5;   --verdict-up-bg-hover: #D1FAE5;
    --verdict-up-fg: #047857;   --verdict-up-accent: #10B981;
    --verdict-down-bg: #FFF7ED; --verdict-down-bg-hover: #FFEDD5;
    --verdict-down-fg: #C2410C; --verdict-down-accent: #F97316;
}

.verdict-preset-ink {
    --verdict-up-bg: #F1F5F9;   --verdict-up-bg-hover: #E2E8F0;
    --verdict-up-fg: #0F172A;   --verdict-up-accent: #0F172A;
    --verdict-down-bg: #F8FAFC; --verdict-down-bg-hover: #F1F5F9;
    --verdict-down-fg: #475569; --verdict-down-accent: #94A3B8;
}

.verdict-preset-inherit {
    --verdict-up-bg:   color-mix(in oklab, currentColor 6%, transparent);
    --verdict-up-bg-hover: color-mix(in oklab, currentColor 12%, transparent);
    --verdict-up-fg:   inherit;     --verdict-up-accent: currentColor;
    --verdict-down-bg: color-mix(in oklab, currentColor 6%, transparent);
    --verdict-down-bg-hover: color-mix(in oklab, currentColor 12%, transparent);
    --verdict-down-fg: inherit;     --verdict-down-accent: currentColor;
}

.verdict-preset-high_contrast {
    --verdict-up-bg: #DCFCE7;   --verdict-up-bg-hover: #BBF7D0;
    --verdict-up-fg: #14532D;   --verdict-up-accent: #16A34A;
    --verdict-down-bg: #FEE2E2; --verdict-down-bg-hover: #FECACA;
    --verdict-down-fg: #7F1D1D; --verdict-down-accent: #DC2626;
}

/* Dark mode adapt for slate (the default) */
@media (prefers-color-scheme: dark) {
    .verdict-widget.verdict-preset-slate,
    .verdict-widget:not([class*="verdict-preset-"]) {
        --verdict-up-bg: rgba(148, 163, 184, .12);
        --verdict-up-bg-hover: rgba(148, 163, 184, .2);
        --verdict-up-fg: #CBD5E1;
        --verdict-up-accent: #94A3B8;
        --verdict-down-bg: rgba(148, 163, 184, .12);
        --verdict-down-bg-hover: rgba(148, 163, 184, .2);
        --verdict-down-fg: #94A3B8;
        --verdict-down-accent: #64748B;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .verdict-widget    { padding: 1em; }
    .verdict-question  { font-size: 1em; }
    .verdict-btn       { padding: .65em .75em; }
    .verdict-icon      { width: 20px; height: 20px; }
    .verdict-label     { font-size: .9em; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .verdict-btn,
    .verdict-widget[data-animation="1"] .verdict-btn:hover,
    .verdict-widget[data-animation="1"] .verdict-btn:active {
        transform: none !important;
        transition: background-color .12s ease;
    }
}