/* Summary output card — mirrors the /horoscope text-card aesthetic
 * (icon + label header, accented body) and renders bullet-point summaries
 * as a proper styled list instead of raw "• " lines. */

.summary-card {
    max-width: 760px;
    margin: 0 auto 14px;
    text-align: left;
}

.summary-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #6afcff;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.summary-card-header .generator-icon {
    flex: 0 0 auto;
}

.summary-card-body {
    background: rgb(91 156 255 / 18%);
    border: 1px solid rgb(91 156 255 / 41%);
    border-left: 3px solid #5b9cff;
    border-radius: 8px;
    padding: 16px 20px;
    color: #e6ecf3;
    font-size: 1.05em;
    line-height: 1.7;
}

.summary-card-body p {
    margin: 0 0 12px;
}
.summary-card-body p:last-child {
    margin-bottom: 0;
}

/* Bullet-point takeaways — custom cyan dot markers */
.summary-bullets {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}
.summary-card-body p + .summary-bullets {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(91, 156, 255, 0.14);
}
/* Specificity must beat the global `.output-item ul li { list-style-type: disc }`
 * rule, or the default disc shows alongside our custom ::before dot (double
 * bullets). `.summary-card-body ul.summary-bullets li` = 0,2,2 > 0,1,2. */
.summary-card-body ul.summary-bullets li {
    list-style: none;
    position: relative;
    padding-left: 22px;
    margin: 0 0 9px;
}
.summary-card-body ul.summary-bullets li:last-child {
    margin-bottom: 0;
}
.summary-card-body ul.summary-bullets li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6afcff;
    box-shadow: 0 0 6px rgba(106, 252, 255, 0.5);
}

/* List/browse preview — slightly tighter */
.summary-card.preview .summary-card-body {
    font-size: 0.98em;
}