/* Optional light palette. The original dark palette remains in manual.css.
   Remove this stylesheet and restore theme-color #080c10 to return to dark. */
:root{color-scheme:light;--cyan:#087c90;--paper:#f8fafb;--text:#172931;--muted:#536b76;--rule:#d8e4e9}
.manual-body .header{background:#050a0e;border-bottom-color:#1e353a}
.manual-intro .overline,.manual-intro>p:last-child{color:#596b74}
.manual-index a{background:#fff;color:var(--text);border-color:#d8e7eb;box-shadow:0 2px 8px #17293104}
.manual-index a:hover{background:#edf8fa;border-color:var(--cyan)}
.section-head>p{color:#596b74}
.pro{background:#fff6eb;border-color:#e2c9af;color:#90551c}
.screen figcaption,.screen figcaption>span{color:#596b74}
.controls>div{border-bottom-color:#dfe9ed}
.controls dd{color:var(--text)}
.gesture{color:#172931}
.inline-pro,.note,.position-hint{color:var(--muted)}
.manual-detail,.manual-detail:last-child{border-color:#d8e4e9}
.manual-detail summary strong,.screen-title,.explanation-group h4{color:var(--text)}
.manual-detail summary small{color:#596b74}
.manual-detail[open]>summary strong{color:var(--cyan)}
.expand-mark:before,.expand-mark:after{background:var(--cyan)}
.control-number{background:#fff}
/* Markers on the untouched dark screenshots retain bright cyan contrast. */
.screen-callout{color:#42e9ff;border-color:#42e9ff;background:#080c10}
.manual-end p{color:#596b74}
.manual-end a{color:var(--text)}
.manual-footer{background:#edf4f6;color:#596b74}
.manual-footer a{color:#44616e}
.manual-body :focus-visible{outline-color:#087c90}

/* Disclosure cards: clear groups and a visible open/close affordance. */
.manual-detail,.manual-detail:last-child{margin:0 0 12px;border:1px solid #d2e1e6;border-radius:14px;background:#fff;box-shadow:0 2px 8px #17293105}
.manual-detail>summary{padding:17px 18px;min-height:78px;gap:16px;border-radius:14px}
.manual-detail>summary strong{font-weight:700}
.manual-detail>summary small{color:#445e6a;font-size:13px;line-height:1.6;margin-top:4px}
.manual-detail>summary .expand-mark{width:28px;height:28px;background:#eaf6f8;border-radius:50%}
.manual-detail>summary .expand-mark:before,.manual-detail>summary .expand-mark:after{left:8px;top:13px;width:12px;height:1.5px}
.manual-detail[open]{border-color:#16869a;box-shadow:0 0 0 1px #16869a15}
.manual-detail[open]>summary{padding-bottom:17px;border-radius:14px 14px 0 0;border-bottom:1px solid #dcebee;background:#f4fafb;margin-bottom:14px}
.manual-detail[open]>summary .expand-mark{background:#d9eff3}
.manual-detail>.detail-content{padding:0 12px 10px}
@media(hover:hover){.manual-detail>summary:hover{background:#f4fafb}}
@media(max-width:600px){.manual-detail>summary{padding:15px 14px;gap:12px}.manual-detail[open]>summary{padding-bottom:15px}.manual-detail>summary small{font-size:12px}.manual-detail>.detail-content{padding-inline:10px}}

/* Image cards keep the title and original screenshot visible when closed. */
.image-card{border:1px solid #d2e1e6;border-radius:14px;background:#fff;box-shadow:0 2px 8px #17293105;overflow:hidden}
.image-card>summary{padding:12px;border-radius:14px}
.image-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;margin-bottom:12px;line-height:1.5}
.image-card .screen-title{display:block;min-width:0;margin:0;font-weight:700}
.image-card .expand-mark{width:28px;height:28px;background:#eaf6f8;border-radius:50%;flex:none}
.image-card .expand-mark:before,.image-card .expand-mark:after{left:8px;top:13px;width:12px;height:1.5px}
.image-card[open]{border-color:#16869a;box-shadow:0 0 0 1px #16869a15}
.image-card[open]>summary .expand-mark{background:#d9eff3}
.image-card[open]>summary .expand-mark:after{transform:none}
.image-card>.detail-content{border-top:1px solid #dcebee;padding:14px 12px 10px}
.image-card-heading>.bottom-mode-labels{flex:1;min-width:0;padding:0;align-items:center}
@media(hover:hover){.image-card>summary:hover .image-card-heading{color:#087c90}}
@media(max-width:600px){.image-card>summary{padding:10px}.image-card-heading{gap:10px;margin-bottom:10px}.image-card>.detail-content{padding:12px 10px 8px}}

/* Continue the control row separators between Beat Unit (6) and View / Edit (7). */
#bpm-transport #display{border-top:1px solid #dfe9ed}

/* Align the preset card with the other cards while keeping its portrait image compact. */
#user-presets.manual-screen{width:100%}
#user-presets .screen.portrait{width:min(100%,394px);margin-inline:auto}
@media(max-width:600px){#user-presets .screen.portrait{width:100%}}

.midi-export-note{margin:0 0 17px;color:#596b74;font-size:12px;line-height:1.8}

.training-supplement{margin:0 0 17px;color:#596b74;font-size:12px;line-height:1.8}

/* Align the Beat note with the control names after their number badges. */
#beat .note,#user-presets .detail-content>.note,.midi-export-note{padding-left:31px}
@media(max-width:600px){#beat .note,#user-presets .detail-content>.note,.midi-export-note{padding-left:29px}}

.current-settings-note{display:block;margin-top:8px;color:#596b74;font-size:12px;line-height:1.8}

.import-replace-note{color:#596b74;font-size:12px;line-height:1.8}

.wav-export-format{color:#596b74;font-size:12px;line-height:1.8}

.settings-note{display:block;margin-top:8px;color:#596b74;font-size:12px;line-height:1.8}

.manage-note{display:block;margin-top:8px;color:#596b74;font-size:12px;line-height:1.8}