/* Heart rate from the watch - common/heartrate.js */
.session-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    max-width: var(--column);
    margin: 8px auto 0;
    font-size: var(--t-sm);
}
.session-links .recent-logs {
    margin: 0;
}
.session-links > ol {
    flex-basis: 100%;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}
.session-links > ol li {
    padding: 2px 0;
}
.session-links:has(> details:not([open])) > ol {
    display: none;
}
.heart-link {
    padding: 8px 12px;
    font-size: var(--t-sm);
    color: var(--link);
}
.heart-link[hidden],
[data-missing] .heart-link {
    display: none;
}
.heart-chart-holder {
    width: 90%;
    max-width: var(--column);
    margin: 16px auto 0;
}
.heart-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.heart-chart text {
    font-family: 'Hind', sans-serif;
    font-size: var(--t-xs);
    fill: var(--ink-2);
}
.heart-chart .grid { stroke: var(--line); }
.heart-chart .axis { stroke: var(--ink-2); }
.heart-chart .beats {
    fill: none;
    stroke: #ff5a5f;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.heart-chart .climb {
    stroke: var(--link);
    stroke-dasharray: 2 3;
}
.heart-chart .climb-label { fill: var(--link); }
.heart-chart .zone {
    stroke: var(--zone);
    stroke-dasharray: 6 4;
}
.heart-chart .zone-label { fill: var(--zone); }
.zone-max      { --zone: light-dark(#c62828, #e25550); }
.zone-hard     { --zone: light-dark(#8a5a00, #eda100); }
.zone-moderate { --zone: light-dark(#17812a, #2ecc40); }
.zone-light    { --zone: light-dark(#0b5cb8, #7cc6f2); }
/* six two-digit chips, narrow enough for one row on a phone */
.setting-group .heart-ages {
    flex-wrap: nowrap;
}
.heart-ages > .nice-radios + label {
    min-width: 0;
    padding: 8px 12px;
}
.heart-note .heart-share {
    color: var(--link);
}
.heart-note .heart-share:hover, .heart-note .heart-share:focus {
    color: var(--link-hover);
}
.heart-share .demo-icon {
    margin-left: 0;
}
.heart-note {
    max-width: 450px;
    margin: 12px auto;
    font-size: var(--t-sm);
    color: var(--ink-2);
}