/* PF Wellbeing — Sleep: the few extras the Sleep tab needs on top of pfwf.css. */

.pfwf-app .pfs-card-night { border-color: #4b3b8f; }
.pfwf-app .pfs-card-night.is-awake { border-color: #f0a000; background: #fff8e8; }
.pfwf-app .pfs-timer { font-size: 32px; font-weight: 700; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }

.pfwf-app .pfs-hint { display: block; font-size: 12px; color: var(--pfwf-muted); font-weight: 400; margin: 6px 0 0; }
/* "Up for the day" — the one thing to tap in the morning, so make it unmissable. */
.pfwf-app .pfs-up { margin-top: 14px; }
.pfwf-app .pfs-up > summary { list-style: none; cursor: pointer; background: #ffe8a3; border: 2px solid #d9a400; border-radius: 12px; padding: 16px 14px; font-size: 17px; font-weight: 700; color: #5a3d00; text-align: center; }
.pfwf-app .pfs-up > summary::-webkit-details-marker { display: none; }
.pfwf-app .pfs-up[open] > summary { border-radius: 12px 12px 0 0; }
.pfwf-app .pfs-up[open] > form { border: 2px solid #d9a400; border-top: 0; border-radius: 0 0 12px 12px; padding: 12px; background: #fffaf0; }
.pfwf-app .pfs-up-btn { font-size: 18px; padding: 16px; background: #d9a400; border-color: #d9a400; color: #fff; width: 100%; }

/* Quality chips — 5 equal tap targets */
.pfwf-app .pfs-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 4px; }
.pfwf-app .pfs-chip { position: relative; display: block; cursor: pointer; }
.pfwf-app .pfs-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.pfwf-app .pfs-chip span {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 52px; border: 1px solid var(--pfwf-border); border-radius: 10px;
    background: #fff; font-size: 18px; font-weight: 700; color: var(--pfwf-text);
}
.pfwf-app .pfs-chip span small { font-size: 10px; font-weight: 500; color: var(--pfwf-muted); margin-top: 2px; }
.pfwf-app .pfs-chip input:checked + span { background: var(--pfwf-accent); border-color: var(--pfwf-accent); color: #fff; }
.pfwf-app .pfs-chip input:checked + span small { color: rgba(255,255,255,.8); }

/* Past-night waking rows: woke / back / reason */
.pfwf-app .pfs-waking-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.pfwf-app .pfs-waking-row .pfwf-input { margin-top: 0; padding: 8px; font-size: 14px; }
.pfwf-app .pfs-waking-row select.pfwf-input { grid-column: 1 / -1; }

.pfwf-app .pfs-bad { color: var(--pfwf-err); font-weight: 600; font-size: 12px; }
.pfwf-app .pfs-q1, .pfwf-app .pfs-q2 { background: #a33; }
.pfwf-app .pfs-q3 { background: #b35c00; }
.pfwf-app .pfs-q4, .pfwf-app .pfs-q5 { background: var(--pfwf-ok); }

/* Mini sleep chart on the Sleep tab */
.pfwf-app .pfs-mini { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 6px 8px 0; background: var(--pfwf-surface); border: 1px solid var(--pfwf-border); border-radius: var(--pfwf-radius); box-shadow: var(--pfwf-shadow); }
.pfwf-app .pfs-mini-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.pfwf-app .pfs-mini-val { font-size: 9px; color: var(--pfwf-muted); margin-bottom: 2px; }
.pfwf-app .pfs-mini-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
.pfwf-app .pfs-mini-bar.is-good { background: var(--pfwf-ok); }
.pfwf-app .pfs-mini-bar.is-ok   { background: #e0a000; }
.pfwf-app .pfs-mini-bar.is-bad  { background: var(--pfwf-err); }
.pfwf-app .pfs-mini-day { font-size: 10px; color: var(--pfwf-muted); margin-top: 3px; }
.pfwf-app .pfs-mini-legend { font-size: 11px; color: var(--pfwf-muted); margin: 6px 2px 0; }

.pfwf-app .pfs-card-eat { border-color: var(--pfwf-ok); }

/* Naps */
.pfwf-app .pfs-nap { border: 2px dashed var(--pfwf-accent); text-align: center; }
.pfwf-app .pfs-nap.is-napping { border-style: solid; background: #f3f1fa; }
.pfwf-app .pfs-nap-btn { width: 100%; font-size: 18px; min-height: 56px; }
.pfwf-app .pfs-nap-status { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.pfwf-app .pfs-nap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pfwf-app .pfs-nap-row form { margin: 0; }

/* One-tap waking */
.pfwf-app .pfs-wake-btn { font-size: 20px; min-height: 64px; }
.pfwf-app .pfs-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.pfwf-app .pfs-reasons .pfwf-btn { padding: 10px 6px; font-size: 13px; }
.pfwf-app .pfs-check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.pfwf-app .pfs-check input { width: 20px; height: 20px; }
.pfwf-app .pfs-check-sm { grid-column: 1 / -1; font-size: 12px; color: var(--pfwf-muted); display: flex; align-items: center; gap: 6px; }

/* What the band said (Huawei Health numbers, typed in each morning) */
.pfwf-app .pfs-band > summary { background: #eef6f3; border: 2px solid #2d8a6e; border-radius: 12px; padding: 12px 14px; font-weight: 700; color: #184d3c; cursor: pointer; list-style: none; }
.pfwf-app .pfs-band > summary::-webkit-details-marker { display: none; }
.pfwf-app .pfs-band > summary .pfs-hint { color: #2d6b58; }
.pfwf-app .pfs-band[open] > summary { border-radius: 12px 12px 0 0; }
.pfwf-app .pfs-band[open] > form { border: 2px solid #2d8a6e; border-top: 0; border-radius: 0 0 12px 12px; padding: 12px; background: #f7fbf9; }
.pfwf-app .pfs-band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pfwf-app .pfs-band-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.pfwf-app .pfs-band-grid .pfwf-label { margin: 0 0 8px; }
.pfwf-app .pfs-band-stages { margin: 2px 0 10px; }
.pfwf-app .pfs-band-stage { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.pfwf-app .pfs-band-stage .pfwf-label { margin: 0; }
.pfwf-app .pfs-band-stage .pfwf-input { margin-top: 0; padding: 10px 8px; text-align: center; }
.pfwf-app .pfs-band-graph { display: block; margin: 8px 0 12px; border-radius: 10px; overflow: hidden; border: 1px solid var(--pfwf-border); }
.pfwf-app .pfs-band-graph img { display: block; width: 100%; height: auto; }
.pfwf-app .pfs-band-row { margin-top: 6px; font-size: 13px; }
.pfwf-app .pfs-band-row > summary { cursor: pointer; color: #2d6b58; font-weight: 600; }
.pfwf-app .pfs-band-row[open] > summary { margin-bottom: 8px; }

/* Day heart card (same shell as the band card, red accent) */
.pfwf-app .pfs-band-day > summary { background: #fbeeee; border-color: #b84343; color: #5a1f1f; }
.pfwf-app .pfs-band-day > summary .pfs-hint { color: #8a3a3a; }
.pfwf-app .pfs-band-day[open] > form { border-color: #b84343; background: #fdf7f7; }
.pfwf-app .pfs-band-days { margin: 8px 0 0; }
.pfwf-app .pfs-band-days .pfwf-list { margin-top: 8px; }
.pfwf-app details.pfwf-row-card > summary { cursor: pointer; list-style: none; }
.pfwf-app details.pfwf-row-card > summary::-webkit-details-marker { display: none; }
.pfwf-app details.pfwf-row-card[open] > summary { margin-bottom: 8px; }