@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
    --bg: 220 30% 98%;
    --text: 222 28% 15%;
    --muted: 222 12% 42%;
    --primary: 222 80% 54%;
    --primary-strong: 222 80% 48%;
    --success: 152 60% 40%;
    --danger: 356 76% 48%;

    --glass-bg: 0 0% 100% / 0.55;
    --glass-stroke: 0 0% 100% / 0.35;
    --glass-inner: 0 0% 100% / 0.65;
    --blur: 18px;
    --radius: 16px;
    --radius-sm: 12px;
    --radius-lg: 22px;

    --shadow-1: 0 6px 20px hsl(220 40% 20% / 0.08), 0 2px 6px hsl(220 40% 20% / 0.06);
    --shadow-2: 0 14px 40px hsl(220 40% 20% / 0.10), 0 6px 16px hsl(220 40% 20% / 0.08);

    --space-1: 6px;
    --space-2: 10px;
    --space-3: 14px;
    --space-4: 18px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --ring: 0 0% 100% / 0.75;
    --ring-strong: var(--primary);
    --line-strong: 220 18% 80%;

    --glass-alpha-1: 0.55;
    --glass-alpha-2: 0.50;
    --glass-alpha-3: 0.45;
    --glass-alpha-4: 0.40;
    --pre-alpha: 0.50;
    --input-alpha: 0.62;

    --mist-1: 210 25% 92%;
    --mist-2: 210 30% 86%;
    --mist-border: 210 20% 72%;
}

/* Base reset-ish */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: hsl(var(--text));
    /* Calming, fresh gradient background */
    background:
        radial-gradient(900px 600px at 10% -10%, hsl(190 100% 88% / 0.22), transparent 60%),
        radial-gradient(900px 600px at 95% 0%, hsl(160 100% 90% / 0.18), transparent 60%),
        linear-gradient(135deg, hsl(200 60% 98%), hsl(160 60% 98%));
    background-attachment: fixed, fixed, fixed, fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* avoid page-level horizontal scroll */
}

/* Subtle noise overlay to add tactility on glass */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0.015 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.25;
}

/* Layout */
header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    backdrop-filter: blur(var(--blur)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(125%);
    background: linear-gradient(to bottom,
            hsl(var(--glass-inner)),
            hsl(var(--glass-bg)));
    border-bottom: 1px solid hsl(var(--glass-stroke));
}

header strong {
    font-weight: 700;
    letter-spacing: 0.2px;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6);
}

p {
    color: hsl(var(--muted));
    line-height: 1.5;
}

code {
    background: hsl(0 0% 100% / 0.5);
    padding: 2px 6px;
    border-radius: 6px;
}

.row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--space-3);
    align-items: center;
    margin: var(--space-4) 0;
}

#tokenRow {
    grid-template-columns: auto minmax(240px, 1fr) auto;
}

#tokenRow[hidden] {
    display: none;
}

/* Responsive row collapse */
@media (max-width: 820px) {
    .row {
        grid-template-columns: 1fr;
    }

    #tokenRow {
        grid-template-columns: 1fr;
    }
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    /* stack sections vertically */
    gap: var(--space-6);
    align-items: start;
}

.grid>section {
    position: relative;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--blur)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(130%);
    background: linear-gradient(180deg,
            hsl(0 0% 100% / calc(var(--glass-alpha-1) + 0.08)),
            hsl(0 0% 100% / var(--glass-alpha-1)));
    border: 1px solid hsl(var(--glass-stroke));
    box-shadow: var(--shadow-1);
    overflow: clip;
}

/* Layering hint: floating highlight behind each panel */
.grid>section::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(120% 100% at 10% 0%, hsl(0 0% 100% / 0.35), transparent 50%),
        radial-gradient(120% 100% at 100% 10%, hsl(0 0% 100% / 0.18), transparent 50%);
    pointer-events: none;
    mix-blend-mode: soft-light;
}

/* Slight overlap to imply stacking on larger screens */
/* Remove baseline overlaps; keep clean vertical flow */
.grid>section:nth-child(2),
.grid>section:nth-child(3) {
    transform: none;
    grid-column: auto;
}

.grid>section:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(2px);
    transition: box-shadow 220ms ease, transform 220ms ease;
}

section h3 {
    margin: 0 0 var(--space-3);
    letter-spacing: 0.2px;
}

/* Inputs & Controls (glass) */
input[type="text"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid hsl(var(--line-strong));
    background: hsl(0 0% 100% / var(--input-alpha));
    color: hsl(var(--text));
    backdrop-filter: blur(calc(var(--blur) * 0.8));
    -webkit-backdrop-filter: blur(calc(var(--blur) * 0.8));
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.6);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

input::placeholder,
textarea::placeholder {
    color: hsl(var(--muted));
}

textarea {
    min-height: 96px;
    resize: vertical;
}

button {
    appearance: none;
    border: 1px solid hsl(var(--mist-border));
    padding: var(--space-3) var(--space-5);
    border-radius: calc(var(--radius) - 2px);
    color: hsl(var(--text));
    background: linear-gradient(180deg, hsl(var(--mist-1) / 0.8), hsl(var(--mist-2) / 0.8));
    box-shadow: 0 8px 20px hsl(210 30% 40% / 0.12), inset 0 1px 0 hsl(0 0% 100% / 0.55);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, background-color 160ms ease;
    cursor: pointer;
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px hsl(210 30% 40% / 0.16), inset 0 1px 0 hsl(0 0% 100% / 0.6);
}

button:active {
    transform: translateY(0);
    filter: saturate(110%);
}

/* Secondary/ghost button variant (for toolbar) */
#detailsControls button {
    color: hsl(var(--text));
    background: linear-gradient(180deg, hsl(var(--mist-1) / 0.8), hsl(var(--mist-2) / 0.8));
    border: 1px solid hsl(var(--mist-border));
    box-shadow: 0 6px 16px hsl(210 30% 40% / 0.10), inset 0 1px 0 hsl(0 0% 100% / 0.55);
}

#detailsControls button:hover {
    box-shadow: 0 10px 24px hsl(210 30% 40% / 0.14), inset 0 1px 0 hsl(0 0% 100% / 0.6);
}

/* Focus ring across controls */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: 2px solid hsl(var(--primary) / 0.6);
    outline-offset: 2px;
}

/* Field grouping for labels */
.q-field {
    display: grid;
    gap: 8px;
}

.q-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: hsl(var(--text));
}

/* Explanatory description above rating */
.q-field--desc .q-desc {
    color: hsl(var(--text) / 0.9);
    line-height: 1.4;
    background: hsl(0 0% 100% / 0.35);
    border: 1px solid hsl(var(--glass-stroke));
    border-radius: 10px;
    padding: 10px 12px;
    backdrop-filter: blur(calc(var(--blur) * 0.5));
    -webkit-backdrop-filter: blur(calc(var(--blur) * 0.5));
}

/* Evidence preview block */
.q-field--evprev .q-evidence-preview {
    color: hsl(var(--text));
    line-height: 1.45;
    background: hsl(0 0% 100% / 0.35);
    border: 1px solid hsl(var(--glass-stroke));
    border-radius: 10px;
    padding: 10px 12px;
    backdrop-filter: blur(calc(var(--blur) * 0.5));
    -webkit-backdrop-filter: blur(calc(var(--blur) * 0.5));
    white-space: pre-wrap;
    word-break: break-word;
}

.q-evidence-preview a {
    color: hsl(222 80% 45%);
    text-decoration: underline;
}

.q-evidence-preview a:hover {
    text-decoration-thickness: 2px;
}

/* Badges and status */
.muted {
    color: hsl(var(--muted));
}

.small {
    font-size: 12px;
}

.badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: hsl(0 0% 100% / 0.5);
    border: 1px solid hsl(var(--glass-stroke));
    backdrop-filter: blur(8px);
}

.badge.ok {
    color: hsl(var(--success));
    border-color: hsl(var(--success) / 0.4);
}

.badge.err {
    color: hsl(var(--danger));
    border-color: hsl(var(--danger) / 0.4);
}

.status {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}

/* Panels and PRE blocks (log/json) */
pre {
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius);
    background: hsl(0 0% 100% / var(--pre-alpha));
    border: 1px solid hsl(var(--glass-stroke));
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.6);
    max-height: 420px;
    overflow: auto;
    line-height: 1.45;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    white-space: pre-wrap;
    /* wrap long lines to avoid horizontal scroll */
    word-break: break-word;
    overflow-wrap: anywhere;
}

#summary>div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius);
    background: hsl(0 0% 100% / 0.45);
    border: 1px solid hsl(var(--glass-stroke));
}

/* Details tree (questions) */
.panel {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: hsl(0 0% 100% / var(--glass-alpha-2));
    border: 1px solid hsl(var(--glass-stroke));
    backdrop-filter: blur(var(--blur));
}

#details {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

#verdictSection .verdict-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

#verdictSection .verdict-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.verdict-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.verdict-toggle {
    appearance: none;
    border: 1px solid hsl(var(--mist-border));
    border-radius: 999px;
    padding: 8px 16px;
    background: hsl(0 0% 100% / 0.85);
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--text));
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.verdict-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px hsl(210 30% 40% / 0.12), inset 0 1px 0 hsl(0 0% 100% / 0.6);
}

.verdict-toggle:focus {
    outline: 2px solid hsl(var(--primary) / 0.6);
    outline-offset: 2px;
}

.link-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid hsl(var(--mist-border));
    background: linear-gradient(180deg, hsl(var(--mist-1) / 0.85), hsl(var(--mist-2) / 0.85));
    color: hsl(var(--text));
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 16px hsl(210 30% 40% / 0.10), inset 0 1px 0 hsl(0 0% 100% / 0.55);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.link-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px hsl(210 30% 40% / 0.14), inset 0 1px 0 hsl(0 0% 100% / 0.6);
}

.link-button:focus {
    outline: 2px solid hsl(var(--primary) / 0.6);
    outline-offset: 2px;
}

.verdict-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.verdict-block h4 {
    margin: 0;
    font-size: 18px;
    letter-spacing: 0.2px;
}

.verdict-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.verdict-card {
    border: 1px solid hsl(var(--glass-stroke));
    border-radius: var(--radius);
    background: hsl(0 0% 100% / 0.62);
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.6);
}

.verdict-card__summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
}

.verdict-card__summary:hover {
    background: hsl(0 0% 100% / 0.5);
}

.verdict-card__title {
    font-weight: 600;
    letter-spacing: 0.2px;
    word-break: break-word;
}

.verdict-card__body {
    padding: 0 var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.verdict-sources__list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: var(--space-2);
}

.verdict-sources__list li {
    line-height: 1.5;
}

.verdict-sources__list a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
}

.verdict-coverage {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: hsl(210 60% 96% / 0.6);
}

.verdict-coverage__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: hsl(var(--muted));
}

.verdict-coverage__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.verdict-coverage__item strong {
    font-size: 13px;
}

.verdict-gaps {
    background: hsl(0 0% 100% / 0.45);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    border: 1px dashed hsl(var(--glass-stroke));
}

.verdict-gaps strong {
    font-weight: 600;
}


#details .details-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.details-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.details-empty {
    align-self: center;
    font-size: 14px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border: 1px dashed hsl(var(--glass-stroke));
    background: hsl(0 0% 100% / 0.45);
}

.details-empty[hidden] {
    display: none !important;
}

.details-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid hsl(var(--glass-stroke));
    background: hsl(0 0% 100% / 0.6);
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.6);
}

.details-toolbar__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 220px;
    min-width: 0;
}

.details-toolbar__group--search {
    flex: 2 1 280px;
}

.details-toolbar__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: hsl(var(--muted));
    font-weight: 600;
}

.details-toolbar__group input[type="search"] {
    width: 100%;
}

.details-toolbar__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.details-toolbar__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
    margin-left: auto;
    flex: 1 1 200px;
    min-width: 0;
}

.details-toolbar__counter {
    font-size: 13px;
    color: hsl(var(--muted));
}

.details-toolbar__counter strong {
    color: hsl(var(--text));
}

.filter-chip {
    appearance: none;
    border: 1px solid hsl(var(--mist-border));
    background: hsl(0 0% 100% / 0.75);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.filter-chip:hover {
    transform: translateY(-1px);
}

.filter-chip[data-active="false"] {
    opacity: 0.55;
}

.filter-chip[data-active="true"] {
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.6);
    transform: translateY(-1px);
}

.filter-chip.tone-pass[data-active="true"] {
    background: hsl(var(--success) / 0.18);
    border-color: hsl(var(--success) / 0.55);
    color: hsl(var(--success));
}

.filter-chip.tone-partial[data-active="true"] {
    background: hsl(35 100% 60% / 0.18);
    border-color: hsl(35 100% 60% / 0.5);
    color: hsl(35 75% 38%);
}

.filter-chip.tone-fail[data-active="true"] {
    background: hsl(var(--danger) / 0.18);
    border-color: hsl(var(--danger) / 0.5);
    color: hsl(var(--danger));
}

.filter-chip.tone-unknown[data-active="true"] {
    background: hsl(var(--mist-1) / 0.7);
    border-color: hsl(var(--mist-border));
    color: hsl(var(--muted));
}

.filter-chip.tone-manual[data-active="true"] {
    background: hsl(210 60% 94%);
    border-color: hsl(210 60% 80%);
    color: hsl(210 60% 30%);
}

.filter-chip.tone-heuristic[data-active="true"] {
    background: hsl(150 60% 90%);
    border-color: hsl(150 60% 70%);
    color: hsl(150 60% 30%);
}

.filter-reset {
    appearance: none;
    border: 1px solid hsl(var(--mist-border));
    border-radius: 999px;
    padding: 6px 14px;
    background: transparent;
    color: hsl(var(--muted));
    cursor: pointer;
    font-size: 13px;
    transition: color 140ms ease, border-color 140ms ease;
}

.filter-reset:hover {
    color: hsl(var(--text));
    border-color: hsl(var(--text) / 0.25);
}

@media (max-width: 720px) {
    .details-toolbar {
        flex-direction: column;
    }

    .details-toolbar__meta {
        width: 100%;
        align-items: stretch;
    }

    .details-toolbar__meta .filter-reset {
        align-self: flex-end;
    }
}

details.qd {
    margin: var(--space-3) 0;
    border-radius: var(--radius);
    background: hsl(0 0% 100% / var(--glass-alpha-3));
    border: 1px solid hsl(var(--line-strong));
    overflow: clip;
}

/* Section-level details slightly more opaque than question rows */
details.qd.sd {
    background: hsl(0 0% 100% / var(--glass-alpha-2));
}

details.qd>summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
}

.details-section {
    background: hsl(0 0% 100% / 0.62);
    border: 1px solid hsl(var(--glass-stroke));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.details-section>summary.section-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4);
}

.section-summary>* {
    min-width: 0;
}

.section-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    letter-spacing: 0.2px;
    min-width: 0;
}

.section-title strong {
    font-weight: 600;
    word-break: break-word;
}

.section-spacer {
    flex: 1 0 24px;
    min-width: 24px;
}

.section-metrics,
.section-evaluation {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.section-metric,
.section-eval {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid hsl(var(--glass-stroke));
    background: hsl(0 0% 100% / 0.55);
    font-size: 12px;
    color: hsl(var(--muted));
}

.section-metric__count {
    font-weight: 600;
    color: hsl(var(--text));
}

.section-eval.metric-manual {
    background: hsl(210 60% 96%);
    border-color: hsl(210 60% 86%);
    color: hsl(210 60% 32%);
}

.section-eval.metric-heuristic {
    background: hsl(150 60% 95%);
    border-color: hsl(150 60% 82%);
    color: hsl(150 60% 32%);
}

.section-counter {
    font-size: 12px;
    font-weight: 600;
    color: hsl(var(--muted));
}

.section-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
}

.section-empty {
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px dashed hsl(var(--glass-stroke));
    font-style: italic;
    text-align: center;
}

.section-empty[hidden] {
    display: none !important;
}

.details-section.is-empty>summary.section-summary {
    opacity: 0.65;
}

details.qd>summary::-webkit-details-marker {
    display: none;
}

.caret {
    display: inline-block;
    width: 1em;
    text-align: center;
    color: hsl(var(--muted));
    transition: transform 160ms ease;
}

details[open]>summary .caret {
    transform: rotate(90deg) translateX(-1px);
}

.q-badge {
    margin-left: auto;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: hsl(210 100% 50% / 0.12);
    color: hsl(210 60% 35%);
    border: 1px solid hsl(210 100% 50% / 0.25);
}

.q-badge.heur.yes {
    background: hsl(150 100% 40% / 0.12);
    color: hsl(150 60% 30%);
    border-color: hsl(150 100% 40% / 0.25);
}

.q-badge.heur.no {
    background: hsl(35 100% 50% / 0.12);
    color: hsl(35 70% 28%);
    border-color: hsl(35 100% 50% / 0.25);
}

.q-help {
    margin-left: 4px;
    color: hsl(var(--muted));
}

/* Structured summary row for aligned columns */
details.qd>summary.q-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    max-width: 100%;
}

.q-summary>* {
    min-width: 0;
}

.q-summary .muted.small {
    color: hsl(var(--muted));
    min-width: 6.5ch;
}

.q-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 240px;
}

.q-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}

/* Rating badge colors */
.badge.mid {
    color: hsl(35 80% 40%);
    border-color: hsl(35 90% 50% / 0.45);
    background: hsl(35 100% 50% / 0.12);
}

.q-rating.badge {
    margin-left: auto;
}

.q-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid hsl(var(--glass-stroke));
    background: hsl(0 0% 100% / 0.55);
    font-size: 12px;
    color: hsl(var(--muted));
}

.q-pill.pill-note {
    color: hsl(210 65% 35%);
    border-color: hsl(210 65% 35% / 0.35);
    background: hsl(210 65% 85% / 0.4);
}

.q-pill.pill-evidence {
    color: hsl(150 60% 30%);
    border-color: hsl(150 60% 30% / 0.35);
    background: hsl(150 60% 85% / 0.4);
}

.q-pill[hidden] {
    display: none !important;
}

/* Tooltip on q-help: custom glass tooltip with wrapping and keyboard support */
.q-help {
    position: relative;
    cursor: help;
}

.q-help::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    max-width: min(72ch, 80vw);
    padding: 10px 12px;
    border-radius: 10px;
    background: hsl(0 0% 100% / 0.6);
    border: 1px solid hsl(var(--glass-stroke));
    box-shadow: var(--shadow-1);
    color: hsl(var(--text));
    line-height: 1.4;
    white-space: normal;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
    backdrop-filter: blur(calc(var(--blur) * 0.5));
    -webkit-backdrop-filter: blur(calc(var(--blur) * 0.5));
}

.q-help:hover::after,
.q-help:focus::after {
    opacity: 1;
}

.q-help[data-tip=""]::after {
    display: none;
}

.q-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid hsl(var(--line-strong));
    background: hsl(0 0% 100% / var(--glass-alpha-4));
    align-items: start;
}

.q-item[hidden] {
    display: none !important;
}

.q-evidence-preview.is-empty {
    font-style: italic;
    color: hsl(var(--muted));
}

@media (max-width: 980px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* Toolbar row inside details */
#detailsControls {
    margin-bottom: var(--space-3);
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto;
    /* expand, collapse, spacer, recalc, json, pdf */
    gap: var(--space-3);
    align-items: center;
}

#detailsControls .muted {
    margin: 0 var(--space-2);
}

@media (max-width: 560px) {
    #detailsControls {
        grid-template-columns: 1fr 1fr;
        /* wrap on very small screens */
    }

    #detailsControls .muted {
        display: none;
    }
}

/* Subtle separators for sections */
section+section {
    border-top: none;
}

/* Smooth transitions */
* {
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}