/* ==========================================================================
   Cruise Tools - Gratuities at a Glance (1.8.0)
   Utility styling only - James: "skin it later". Layered on top of
   cruisetools-core.css, reuses its custom properties and .cruisetools-card.
   ========================================================================== */

.cruisetools-glance-answer-box {
    background: var(--cruisetools-bg);
    border-radius: var(--cruisetools-radius-sm);
    padding: var(--cruisetools-space-md);
    margin-bottom: var(--cruisetools-space-md);
    font-size: 0.95rem;
    color: var(--cruisetools-text);
}

.cruisetools-glance-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--cruisetools-space-sm);
}
.cruisetools-glance-head h3 {
    margin: 0;
}
.cruisetools-glance-reviewed {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cruisetools-text-muted);
    text-align: right;
}
.cruisetools-glance-intro {
    color: var(--cruisetools-text-muted);
    font-size: 0.9rem;
    margin: var(--cruisetools-space-xs) 0 var(--cruisetools-space-md) 0;
}

.cruisetools-glance-table {
    border-top: 1px solid var(--cruisetools-border);
}

.cruisetools-glance-row--header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--cruisetools-space-md);
    padding: var(--cruisetools-space-sm) 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cruisetools-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.cruisetools-glance-row--header span:not(:first-child) {
    text-align: right;
    min-width: 4.5rem;
}

.cruisetools-glance-item {
    border-bottom: 1px solid var(--cruisetools-border);
}
.cruisetools-glance-item:last-of-type {
    border-bottom: none;
}

.cruisetools-glance-item > summary {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--cruisetools-space-md);
    align-items: center;
    min-height: 44px;
    padding: var(--cruisetools-space-sm) 0;
    cursor: pointer;
    list-style: none;
}
.cruisetools-glance-item > summary::-webkit-details-marker {
    display: none;
}
.cruisetools-glance-item > summary::marker {
    content: '';
}

.cruisetools-glance-cell-line {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cruisetools-glance-name {
    font-weight: 600;
    color: var(--cruisetools-text);
}
.cruisetools-glance-term {
    font-size: 0.78rem;
    color: var(--cruisetools-text-muted);
}

.cruisetools-glance-cell-rate {
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 4.5rem;
    font-weight: 600;
    color: var(--cruisetools-primary);
}

.cruisetools-glance-detail {
    padding: 0 0 var(--cruisetools-space-md) 0;
}
.cruisetools-glance-answer {
    font-size: 0.92rem;
    color: var(--cruisetools-text);
    margin: 0 0 var(--cruisetools-space-sm) 0;
}

.cruisetools-glance-facts {
    margin: 0;
    font-size: 0.85rem;
}
.cruisetools-glance-facts dt {
    font-weight: 600;
    color: var(--cruisetools-text);
    margin-top: var(--cruisetools-space-sm);
}
.cruisetools-glance-facts dd {
    margin: 2px 0 0 0;
    color: var(--cruisetools-text-muted);
}
.cruisetools-glance-facts a {
    color: var(--cruisetools-primary);
}

.cruisetools-glance-footer {
    font-size: 0.78rem;
    color: var(--cruisetools-text-muted);
    margin-top: var(--cruisetools-space-md);
}
.cruisetools-glance-footer a {
    color: var(--cruisetools-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cruisetools-how-we-verify {
    margin-top: var(--cruisetools-space-lg);
    padding-top: var(--cruisetools-space-md);
    border-top: 1px solid var(--cruisetools-border);
    font-size: 0.85rem;
    color: var(--cruisetools-text-muted);
}
.cruisetools-how-we-verify h4 {
    margin: 0 0 var(--cruisetools-space-xs) 0;
    color: var(--cruisetools-text);
}

/* Phone: fold the second rate column into the row underneath the line name
   (directive: "the suite column folds into the row" - the table is now
   From/Up to, but the same folding intent applies). Full-row tap target
   stays at least 44px via the summary rule above. */
@media (max-width: 480px) {
    .cruisetools-glance-row--header {
        display: none;
    }
    .cruisetools-glance-item > summary {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
    .cruisetools-glance-cell-rate {
        text-align: left;
        min-width: 0;
    }
    /* MUST-FIX 10 (Prism's design review, PR #9): scoped to cells that
       actually CARRY a data-label (the gratuities table). The drinks/wifi
       glance tables share this class but never set data-label, so the old
       unscoped selector rendered attr(data-label) as empty and left a
       stray ": " on its own line ("4 packages" -> ": 4 packages"). */
    .cruisetools-glance-cell-rate[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 400;
        color: var(--cruisetools-text-muted);
    }
}