/* Qnews guide blocks. Colours come from the global --qnews-* tokens (theme), with light fallbacks. */

.qnews-callout,
.qnews-code-block,
.qnews-table-wrap,
.qnews-steps,
.qnews-bullets,
.qnews-pullquote,
.qnews-checklist,
.qnews-lifecycle {
    --qg-fg: var(--qnews-fg, #12161d);
    --qg-muted: var(--qnews-muted, #5b6472);
    --qg-brand: var(--qnews-brand, #3d7bff);
    --qg-border: var(--qnews-border, rgba(0, 0, 0, 0.1));
    --qg-card: var(--qnews-card, #ffffff);
    --qg-secondary: var(--qnews-secondary, #e7ebf1);
    --qg-danger: var(--qnews-destructive, #d4183d);
    --qg-signal: var(--qnews-signal, #17c964);
    --qg-warning: var(--qnews-warning, #fe9a00);
    --qg-warning-fg: var(--qnews-warning-fg, #e17100);
    --qg-code-bg: var(--qnews-code-bg, #0f1117);
    --qg-code-fg: var(--qnews-code-fg, #a8b5cc);
    --qg-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --qg-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    margin-top: 24px;
    margin-bottom: 0;
    font-family: var(--qg-sans);
    color: var(--qg-fg);
}

.qnews-guide-icon,
.qnews-callout__icon,
.qnews-lifecycle__arrow,
.qnews-checklist__box {
    display: inline-block;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--qg-icon) center / contain no-repeat;
    mask: var(--qg-icon) center / contain no-repeat;
}

/* Callout */
.qnews-callout {
    --qg-tone: var(--qg-brand);
    --qg-tone-fg: var(--qg-tone);
    position: relative;
    overflow: hidden;
    padding: 16px 20px;
    border: 1px solid color-mix(in srgb, var(--qg-tone) 40%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--qg-tone) 5%, var(--qnews-bg, #f4f6f9));
}

.qnews-callout--warning { --qg-tone: var(--qg-warning); --qg-tone-fg: var(--qg-warning-fg); }
.qnews-callout--danger { --qg-tone: var(--qg-danger); }
.qnews-callout--success { --qg-tone: var(--qg-signal); }

.qnews-callout__bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--qg-tone);
}

.qnews-callout__title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--qg-tone-fg);
    font: 600 12px/18px var(--qg-mono);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.qnews-callout__icon {
    --qg-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>');
    width: 14px;
    height: 14px;
}

.qnews-callout--danger .qnews-callout__icon { --qg-icon: url('../images/guide/callout-danger.svg'); }
.qnews-callout--warning .qnews-callout__icon { --qg-icon: url('../images/guide/callout-warning.svg'); }
.qnews-callout--success .qnews-callout__icon {
    --qg-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>');
}

.qnews-callout__text,
.qnews-callout__items dd {
    margin: 0;
    color: var(--qg-muted);
    font-size: 14px;
    line-height: 22.75px;
}

.qnews-callout__text { margin-top: 12px; }

.qnews-callout__items {
    margin: 12px 0 0;
}

.qnews-callout__items > div + div { margin-top: 10px; }

.qnews-callout__items dt {
    color: var(--qg-fg);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.qnews-callout__items dd { margin-top: 2px; }

/* Code */
.qnews-code-block {
    overflow: hidden;
    border-radius: 10px;
    background: var(--qg-code-bg);
}

.qnews-code-block__header {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font: 400 11px/16.5px var(--qg-mono);
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.qnews-code-block__pre,
.qnews-steps__code {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    background: var(--qg-code-bg);
    color: var(--qg-code-fg);
    font: 400 11.9px/20.4px var(--qg-mono);
    white-space: pre;
}

.qnews-code-block__pre code,
.qnews-steps__code code {
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
}

.qnews-code-block__caption {
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 19.5px;
}

/* Table */
.qnews-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--qg-border);
    border-radius: 10px;
}

.qnews-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 19.25px;
}

.qnews-table th,
.qnews-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--qg-border);
    text-align: left;
    vertical-align: middle;
}

.qnews-table th {
    background: var(--qg-secondary);
    color: var(--qg-muted);
    font: 700 11px/15.714px var(--qg-mono);
    letter-spacing: 0.55px;
    text-transform: uppercase;
    white-space: nowrap;
}

.qnews-table tbody tr:nth-child(odd) td { background: var(--qg-card); }
.qnews-table tbody tr:last-child td { border-bottom: 0; }

.qnews-table td.is-danger,
.qnews-table td.is-signal {
    font: 400 11px/15.125px var(--qg-mono);
}

.qnews-table td.is-danger { color: var(--qg-danger); }
.qnews-table td.is-signal { color: var(--qg-signal); }

/* Steps */
.qnews-steps {
    margin-left: 0;
    padding: 0;
    list-style: none;
}

.qnews-steps__item {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 32px;
}

.qnews-steps__item:last-child { padding-bottom: 0; }

.qnews-steps__item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 21.5px;
    width: 1px;
    background: var(--qg-border);
}

.qnews-steps__bubble {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--qg-brand);
    border-radius: 50%;
    background: var(--qg-card);
    color: var(--qg-brand);
    font: 700 11px/1 var(--qg-mono);
}

.qnews-steps__content {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

.qnews-steps__title {
    margin: 0;
    color: var(--qg-fg);
    font: 600 16px/24px var(--qg-sans);
    letter-spacing: -0.2px;
}

.qnews-steps__body {
    margin: 4px 0 0;
    color: var(--qg-muted);
    font-size: 14px;
    line-height: 22.75px;
}

.qnews-steps__code {
    margin-top: 12px;
    border-radius: 10px;
}

/* Bullets */
.qnews-bullets {
    margin-left: 0;
    padding: 0;
    list-style: none;
}

.qnews-bullets__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 22.75px;
}

.qnews-bullets__item + .qnews-bullets__item { margin-top: 12px; }

.qnews-bullets__marker {
    flex: 0 0 auto;
    min-width: 8px;
    padding-top: 2px;
    color: var(--qg-brand);
    font: 400 13px/19.5px var(--qg-mono);
}

.qnews-bullets__text strong { font-weight: 600; }

/* Pull quote */
.qnews-pullquote {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    padding: 28px 0 4px 24px;
    border-left: 4px solid var(--qg-brand);
}

.qnews-pullquote__mark {
    position: absolute;
    top: 0;
    left: 22px;
    color: color-mix(in srgb, var(--qg-brand) 30%, transparent);
    font: 400 48px/40px var(--qg-mono);
    pointer-events: none;
}

.qnews-pullquote p {
    position: relative;
    margin: 0;
    color: var(--qg-fg);
    font-size: 18.4px;
    font-weight: 500;
    line-height: 25.3px;
    letter-spacing: -0.46px;
}

/* Checklist */
.qnews-checklist {
    overflow: hidden;
    border: 1px solid var(--qg-border);
    border-radius: 10px;
    background: var(--qg-card);
}

.qnews-checklist__header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--qg-border);
    background: var(--qg-secondary);
}

.qnews-checklist__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: 400 11px/16.5px var(--qg-mono);
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.qnews-checklist__title { color: var(--qg-muted); }
.qnews-checklist__progress { color: var(--qg-brand); white-space: nowrap; }

.qnews-checklist__bar {
    height: 6px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--qg-border);
}

.qnews-checklist__fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--qg-brand);
    transition: width 0.2s ease;
}

.qnews-checklist__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.qnews-checklist__item + .qnews-checklist__item { border-top: 1px solid var(--qg-border); }

.qnews-checklist__toggle {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    background: transparent;
    color: var(--qg-fg);
    font: 400 14px/22.75px var(--qg-sans);
    text-align: left;
    cursor: pointer;
}

.qnews-checklist__toggle:hover { background: color-mix(in srgb, var(--qg-secondary) 40%, transparent); }

.qnews-checklist__box {
    --qg-icon: url('../images/guide/checklist-icon.svg');
    width: 16px;
    height: 16px;
    color: var(--qg-muted);
}

.qnews-checklist__num {
    flex: 0 0 auto;
    color: var(--qg-brand);
    font: 400 11px/16.5px var(--qg-mono);
}

.qnews-checklist__item.is-checked .qnews-checklist__box {
    --qg-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="black" fill-rule="evenodd" d="M3.333 2h9.334C13.403 2 14 2.597 14 3.333v9.334c0 .736-.597 1.333-1.333 1.333H3.333A1.333 1.333 0 0 1 2 12.667V3.333C2 2.597 2.597 2 3.333 2Zm8.138 3.862a.667.667 0 0 0-.942-.943L6.667 8.78 5.47 7.586a.667.667 0 1 0-.942.943l1.666 1.666c.26.26.683.26.943 0l4.334-4.333Z"/></svg>');
    color: var(--qg-brand);
}

.qnews-checklist__item.is-checked .qnews-checklist__text {
    color: var(--qg-muted);
    text-decoration: line-through;
}

/* Lifecycle */
.qnews-lifecycle {
    overflow: hidden;
    border: 1px solid var(--qg-border);
    border-radius: 10px;
    background: var(--qg-card);
}

.qnews-lifecycle__content { padding: 20px; }

.qnews-lifecycle__row + .qnews-lifecycle__row { margin-top: 20px; }

.qnews-lifecycle__row-label {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--qg-danger);
    font: 400 11px/16.5px var(--qg-mono);
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.qnews-lifecycle__row--hash .qnews-lifecycle__row-label { color: var(--qg-signal); }

.qnews-lifecycle__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.qnews-lifecycle__track {
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;
    align-items: center;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.qnews-lifecycle__step {
    display: flex;
    align-items: center;
}

.qnews-lifecycle__arrow {
    --qg-icon: url('../images/guide/chevron-right.svg');
    width: 16px;
    height: 16px;
    margin: 0 4px;
    color: var(--qg-muted);
}

.qnews-lifecycle__arrow.is-danger {
    --qg-icon: url('../images/guide/chevron-right-danger.svg');
    color: var(--qg-danger);
}

.qnews-lifecycle__node {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 130px;
    max-width: 130px;
    padding: 8px 12px;
    border: 1px solid var(--qg-border);
    border-radius: 4px;
    background: var(--qg-card);
    color: var(--qg-fg);
    font-size: 12px;
    line-height: 16.5px;
    text-align: center;
}

.qnews-lifecycle__row--hash .qnews-lifecycle__node { width: 120px; max-width: 120px; }

.qnews-lifecycle__node--muted { background: var(--qg-secondary); }

.qnews-lifecycle__node--signal {
    border-color: color-mix(in srgb, var(--qg-signal) 50%, transparent);
    background: color-mix(in srgb, var(--qg-signal) 5%, var(--qg-card));
    color: var(--qg-signal);
}

.qnews-lifecycle__node--danger-soft {
    border-color: color-mix(in srgb, var(--qg-danger) 30%, transparent);
    background: color-mix(in srgb, var(--qg-danger) 5%, var(--qg-card));
}

.qnews-lifecycle__node--danger {
    border-color: var(--qg-danger);
    background: color-mix(in srgb, var(--qg-danger) 10%, var(--qg-card));
    color: var(--qg-danger);
    font-weight: 600;
}

.qnews-lifecycle__footer {
    padding: 12px 20px;
    border-top: 1px solid var(--qg-border);
    background: color-mix(in srgb, var(--qg-secondary) 60%, transparent);
    color: var(--qg-muted);
    font-size: 12px;
    line-height: 19.5px;
}

/* Editor-only helpers */
.qnews-guide-editor__controls {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    opacity: 0.6;
}

.qnews-guide-editor__controls:hover { opacity: 1; }
.qnews-guide-editor__add { margin-top: 12px; }
.qnews-guide-editor__toolbar { display: flex; gap: 8px; padding: 8px; }
.qnews-guide-editor__controls-cell { width: 1%; white-space: nowrap; }
.qnews-guide-editor__row { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.qnews-guide-editor__row dt { flex: 0 0 100%; }
.qnews-code-block__editor textarea {
    background: transparent;
    color: var(--qg-code-fg);
    font: 400 12px/20px var(--qg-mono);
    border: 0;
}
.qnews-code-block__header .components-base-control input {
    background: transparent;
    color: inherit;
    border-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 767.98px) {
    .qnews-lifecycle__node,
    .qnews-lifecycle__row--hash .qnews-lifecycle__node {
        width: 112px;
        max-width: 112px;
    }
}

/* Paragraph */
.qnews-paragraph--lead {
    font-size: 1.15rem;
    line-height: 1.7;
}