/*
 * The dense landscape dashboard (roadmap item 15).
 *
 * dense.html is the same application - same ids, same app.js, same engine - laid
 * out as two columns so that, on a 14" MacBook Pro in landscape (roughly 1280x783),
 * the live slider and every number it moves are on screen together. The left
 * column is the experiment and its results; the right column is the setup and the
 * long-form outputs. Nothing here changes behaviour; it only compresses chrome.
 *
 * Scoped under .dense-body so it cannot reach the calculator page, which shares
 * styles.css and tiles.css with it.
 */

.dense-body {
    background-image: none;
    background-color: #f7f9fb;
}

/* The link across to the full layout sits in the header title block. */
.dense-switch {
    margin-left: 0.75rem;
    align-self: center;
    color: var(--dark-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.dense-switch:hover {
    color: var(--accent-color);
}

/* --- Two columns --- */

.dense-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1rem;
    align-items: start;
}

.dense-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* The calculator's card chrome is too tall for a dashboard: pull the padding and
   the section margins right in. */
.dense-body section {
    padding: 0.9rem 1rem 1rem;
    margin-bottom: 0;
}

.dense-body h2 {
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
}

/* --- Left column: glance reads two-up so the tiles stay legible in the narrow
     column, and the slider cluster stays compact. --- */

.dense-col-left .metrics-grid--dense {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* In this narrow column a long value ("5 years 4 mo sooner") side-by-side with
   its caption squeezes the caption to a sliver and the two overprint. Stack them:
   caption above, value below, both left-aligned. */
.dense-col-left .metrics-grid--dense .metric-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.45rem 0.7rem 0.5rem;
}

.dense-col-left .metrics-grid--dense .metric-tile h4 {
    min-height: 0;
}

.dense-col-left .metrics-grid--dense .metric-tile p {
    text-align: left;
}

/* The experiment leads with the tiles - Quick add is one of them now - so the
   slider and the glance it drives share the first screen; the pay-rise strip
   follows. (Not yet reviewed against the 11 Aug feedback: this page keeps
   working, and its own pass comes later.) */
#extra-repayments-section {
    display: flex;
    flex-direction: column;
}

#extra-repayments-section .extra-repayments-container {
    order: 0;
    margin-top: 0;
}

#extra-repayments-section .payrise-tile {
    order: 1;
}

/* Strategy and loan tiles compress: same information, tighter rows. */
.dense-body .loan-tile,
.dense-body .add-loan-tile {
    padding: 0.6rem 0.7rem;
}

.dense-body .loan-header {
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
}

.dense-body .loan-details {
    gap: 0.3rem 0.8rem;
}

.dense-body .loan-detail-label {
    font-size: 0.6rem;
}

.dense-body .loan-detail-value {
    font-size: 0.85rem;
}

.dense-body .tile-icon-container {
    width: 32px;
    height: 32px;
    margin-bottom: 0.4rem;
}

/* --- Right column: the long-form outputs compress a little too. --- */

.dense-col-right .chart-container {
    width: 100% !important;
    height: 32vh !important;
}

/* --- Narrower than a laptop: stack the columns and let the page scroll. Fitting
     is a laptop-landscape premise; on a phone the calculator is the right tool. --- */

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