/* The embedded progress chart is shared across phone, tablet and desktop. */
.dashboard-details-title, .dashboard-lower-ad { display: none; }

.page-dashboard .dashboard-progress {
    min-width: 0; padding: clamp(12px, 2vw, 20px);
    border: 1px solid rgba(255, 255, 255, .72); border-radius: 20px;
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px rgba(24, 70, 105, .045);
}
.page-dashboard .dashboard-progress [hidden] { display: none !important; }
.page-dashboard .dashboard-progress { display: block; margin: clamp(12px, 2vw, 24px) 0 0; }
.page-dashboard .progress-chart-section, .page-dashboard .progress-list-section { margin-top: 0; }
.page-dashboard .progress-chart-header { flex-wrap: nowrap; align-items: center; gap: 7px; margin-bottom: 8px; }
.page-dashboard .progress-chart-header > div:first-child { min-width: 0; }
.page-dashboard .progress-chart-header h2 { font-size: clamp(18px, 4.7vw, 22px); line-height: 1.15; margin: 0; }
.page-dashboard .dashboard-progress-lead { margin-top: 4px; color: #697786; font-size: 12px; line-height: 1.3; }
.page-dashboard .progress-status { margin-bottom: 8px; font-size: 12px; }
.page-dashboard .progress-range { flex: 0 0 auto; }
.page-dashboard .progress-chart { min-height: 0; padding: 2px 0 4px; }
.page-dashboard .progress-chart svg { aspect-ratio: 920 / 320; }
.page-dashboard .progress-line { stroke: #258fdc; stroke-width: 3; }
.page-dashboard .progress-axis { stroke: #d1dfe9; }
.page-dashboard .progress-marker-ring { r: 6px; fill: #258fdc; stroke: #fff; stroke-width: 2; }
.page-dashboard :is(.progress-marker-img, .progress-marker-label, .progress-marker-date) { display: none; }
.page-dashboard .progress-chart-stage { display: grid; min-width: 0; }
.page-dashboard .progress-chart-stage > * { grid-area: 1 / 1; min-width: 0; }
.page-dashboard .progress-chart-stage > .progress-chart-backdrop {
    display: block; width: 100%; height: auto; aspect-ratio: 920 / 320;
    box-sizing: content-box; padding: 2px 0 4px;
}
.page-dashboard .progress-chart-stage:has(> #progressChart:not([hidden])) > .progress-chart-backdrop { display: none; }
.page-dashboard .progress-empty-grid { fill: none; stroke: #d1dfe9; stroke-width: 1.5; stroke-dasharray: 8 8; }
.page-dashboard .progress-chart-backdrop .progress-axis { fill: none; }
.page-dashboard .progress-empty-time { fill: #697786; font: 30px "Mozilla Text", sans-serif; }
.page-dashboard #progressChartEmpty {
    min-height: 0; align-self: center; justify-self: center; z-index: 1;
    width: min(82%, 290px); margin: 0; padding: 9px 12px;
    border: 1px solid rgba(188, 205, 218, .5); border-radius: 13px;
    background: rgba(255, 255, 255, .93); box-shadow: 0 3px 10px rgba(24, 70, 105, .06);
    font-size: 12px; line-height: 1.4; text-align: center;
}
.page-dashboard .dashboard-timeline-heading { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.page-dashboard .progress-photo-list { flex-direction: row; overflow-x: auto; gap: 9px; padding: 4px 2px; align-items: flex-start; scrollbar-width: thin; }
.page-dashboard .progress-photo-row { display: flex; flex-direction: column; flex: 0 0 clamp(66px, 18vw, 86px); gap: 4px; padding: 0; border: 0; background: none; border-radius: 10px; }
.page-dashboard .progress-photo-row:has(details[open]) { flex-basis: 190px; }
.page-dashboard .progress-photo-row:has(details[open]) .dashboard-timeline-photo { width: clamp(66px, 18vw, 86px); }
.page-dashboard .dashboard-timeline-photo { position: relative; display: block; width: 100%; padding: 3px; border: 1px solid transparent; border-radius: 12px; background: transparent; font: inherit; cursor: pointer; }
.page-dashboard .dashboard-timeline-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 9px; object-fit: cover; }
.page-dashboard .dashboard-timeline-photo span { position: absolute; bottom: 5px; right: 5px; padding: 2px 5px; border-radius: 7px; background: rgba(20, 30, 40, .75); color: #fff; font-size: 11px; font-weight: 750; }
.page-dashboard .is-selected .dashboard-timeline-photo { border-color: #3aa5f0; background: #e3f3ff; }
.page-dashboard .dashboard-date-editor { width: 100%; font-size: 10px; color: #64748b; }
.page-dashboard .dashboard-date-editor summary { min-height: 30px; display: grid; place-items: center; text-align: center; list-style: none; cursor: pointer; border-radius: 12px; }
.page-dashboard .dashboard-date-editor summary::-webkit-details-marker { display: none; }
.page-dashboard .dashboard-date-editor[open] summary { background: #e3f3ff; color: #183b56; }
.page-dashboard .progress-photo-actions { justify-content: flex-start; gap: 5px; }
.page-dashboard .progress-photo-actions input[type="date"] { width: 100%; min-width: 0; font-size: 16px; border-color: #d3e1e9; }
.page-dashboard .progress-photo-actions button { min-height: 34px; padding: 6px 9px; font-size: 12px; }
.page-dashboard .progress-photo-list > .progress-empty { font-size: 12px; line-height: 1.4; }


@media (max-width: 600px) {
    .page-dashboard [hidden] { display: none !important; }
    .page-dashboard .navbar { margin-top: 12px; }
    .page-dashboard[data-ad-layout="responsive"] .responsive-ads-shell {
        --ad-flow: 1;
        --ad-group: 1;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "top" "content";
        gap: var(--compare-gap);
        padding: var(--compare-gap) var(--mobile-page-gutter) max(16px, var(--compare-gap));
    }
    .page-dashboard .responsive-ads-shell [data-ad-slot="left"],
    .page-dashboard .dashboard-card > [data-ad-anchor="middle"] { display: none; }
    .page-dashboard .dashboard-lower-ad:not(:empty) { display: block; margin-top: var(--compare-gap); }

    /* The original ad hosts stay rectangular and unclipped inside white mats. */
    .page-dashboard[data-ad-layout="responsive"] .responsive-ad {
        position: relative; top: auto; width: 100%;
        min-height: var(--compare-ad-height); padding: var(--compare-ad-mat-padding); gap: 0;
        --surface-radius: clamp(12px, 3.5vw, 18px);
        background: #fff; border: 1px solid rgba(145, 174, 195, .5);
        box-shadow: 0 2px 6px rgba(24, 70, 105, .055); overflow: visible;
    }
    .page-dashboard .responsive-ad::before, .page-dashboard .responsive-ad::after { content: none; }
    .page-dashboard .responsive-ad-label { font-family: inherit; font-size: clamp(9px, 2.4vw, 10px); }
    .page-dashboard .responsive-ad-creative,
    .page-dashboard .responsive-ad-creative > ins,
    .page-dashboard .responsive-ad-creative iframe { overflow: visible; border-radius: 0; }
    .page-dashboard .responsive-ad-creative:not(:empty) { display: block; width: 100%; }
    .page-dashboard .responsive-ad:has(> .responsive-ad-creative:not(:empty)) > [data-ad-placeholder] { display: none; }
    .page-dashboard .responsive-ad-creative :is(img, video, iframe) { max-width: none; }

}