/* 共用画幅、读数层和选时层；内容模块保持各自语义与真实数据。 */
.experience-card:hover { transform: none; }
.experience-card .experience-frame { width: 100%; height: auto; aspect-ratio: 5 / 3; min-height: 230px; max-height: 340px; margin: 20px 0 0; flex: 0 0 auto; border-radius: 16px; }
.experience-overview { margin-top: 18px; }
.experience-overview-inner { display: flow-root; }
.experience-overview .boat-window-heading, .experience-overview .photo-reading, .experience-overview .reef-active-window { margin-top: 0; }
.experience-overview .boat-window-facts, .experience-overview .photo-facts, .experience-overview .reef-reading { margin-top: 12px; margin-bottom: 0; padding-block: 12px; }
.experience-overview .photo-score b, .experience-overview .boat-window-score b, .experience-overview .reef-condition-score b { font-size: 30px; }
.experience-overview .reef-window-heading strong { font-size: 30px; }
.experience-card .experience-timebar { min-width: 0; margin: 14px 0 0; padding: 12px 0 10px; border-block: 1px solid #dce7e0; }
.experience-time-heading-inner > *, .experience-time-meta-inner > * { width: 100%; }
.experience-time-heading-inner > * { min-height: 44px; }
.experience-time-meta { margin-top: 7px; }
.experience-timebar .boat-timebar-meta, .experience-timebar .photo-scrub-label, .experience-timebar .reef-time-note { margin: 0; font-size: 10px; line-height: 1.5; }
.experience-timebar .reef-current-time { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.experience-timebar .boat-scrubber, .experience-timebar .photo-scrubber, .experience-timebar .reef-scrubber { height: 54px; margin: 2px 0 0; }
.experience-timebar .boat-scrubber input, .experience-timebar .photo-scrubber input, .experience-timebar .reef-scrubber input { inset: 10px 0 0; height: 44px; }
.experience-timebar .boat-time-endpoints, .experience-timebar .photo-time-endpoints, .experience-timebar .reef-time-endpoints { margin: 0; line-height: 1.5; }
.experience-insights { margin: 16px 0 18px; }
.experience-insights-inner { display: flow-root; }
.experience-insights .reef-window-picker { margin: 0 0 14px; }
.experience-insights .reef-light-comparison { padding: 11px 12px; margin-bottom: 12px; }
.experience-insights .reef-context { margin-top: 0; }
.experience-insights .reef-guidance, .experience-insights .reef-data-note { font-size: 11px; line-height: 1.6; color: #617b7a; }
.experience-insights .reef-data-note { margin: 12px 0 0; }
.experience-insights .photo-advice, .experience-insights .boat-window-reason { margin: 0 0 12px; font-size: 12px; line-height: 1.65; color: #526e73; }
.experience-card > .intelligence-foot { margin-top: auto; padding-top: 14px; }
.experience-panel { padding: 14px; border: 1px solid #dce6dd; border-radius: 12px; background: linear-gradient(140deg, #f0f6ef, #fffcf4); }
.experience-panel-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.experience-panel-heading h3 { font: 650 13px/1.5 system-ui,sans-serif; color: #315e5c; margin: 0; }
.experience-panel-heading > small { font-size: 10px; color: #627a74; }
.experience-panel p { font-size: 10px; line-height: 1.6; color: #6c807a; margin: 12px 0 0; }
.boat-comparison-key { display: flex; justify-content: flex-end; gap: 20px; margin-top: 14px; font-size: 10px; color: #70827d; }
.boat-comparison dl { margin: 4px 0 0; }
.boat-comparison dl > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(125px,1.2fr); align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e1e8dd; }
.boat-comparison dt { color: #55746e; font-size: 11px; }
.boat-comparison dd { margin: 0; display: flex; justify-content: space-between; gap: 12px; font: 650 13px/1.5 system-ui,sans-serif; color: #285f60; font-variant-numeric: tabular-nums; }
.boat-comparison dd small { font-size: 10px; font-weight: 400; color: #698079; }
.boat-comparison dd b { min-width: 24px; text-align: end; font-weight: 650; }
.photo-guide-modes { display: flex; gap: 6px; margin-top: 10px; }
.photo-guide-modes button { flex: 1; min-width: 0; min-height: 44px; padding: 7px 10px; border-radius: 9px; border: 1px solid #d8e3d9; background: #fffef9; color: #54756e; font: 650 12px/1.5 system-ui,sans-serif; cursor: pointer; }
.photo-guide-modes button[aria-pressed="true"] { color: #225b58; border-color: #a6c5b8; background: #e4efe5; }
.photo-guide-modes button:focus-visible { outline: 2px solid #338a84; outline-offset: 2px; }
.photo-guide-reading dl { margin: 12px 0 0; }
.photo-guide-reading dl > div + div { margin-top: 12px; }
.photo-guide-reading dt { color: #7e704d; font-size: 10px; font-weight: 650; }
.photo-guide-reading dd { margin: 4px 0 0; font-size: 12px; line-height: 1.65; color: #476b66; }
.experience-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 24px; padding: 18px 22px; margin-bottom: 16px; border: 1px solid #d7e5df; border-radius: 14px; background: linear-gradient(110deg,#e6f2ec,#fcfaf1); }
.experience-toolbar strong { font: 650 14px/1.5 system-ui,sans-serif; color: #315f5c; }
.experience-sync-status { margin: 4px 0 0; color: #5d7974; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.experience-toolbar > small { grid-column: 1 / -1; color: #6d837c; font-size: 10px; line-height: 1.5; }
.experience-link-toggle { display: flex; align-items: center; gap: 9px; min-height: 44px; color: #315f5c; font: 650 12px/1.5 system-ui,sans-serif; cursor: pointer; }
.experience-link-toggle input { appearance: none; width: 36px; height: 22px; border-radius: 22px; background: #d0ded7; border: 1px solid #b8cbc1; position: relative; margin: 0; flex: 0 0 auto; cursor: pointer; }
.experience-link-toggle input::after { content: ""; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px; border-radius: 50%; background: #fffef8; box-shadow: 0 1px 3px #193d3329; }
.experience-link-toggle input:checked { background: #317773; border-color: #317773; }
.experience-link-toggle input:checked::after { left: 16px; }
.experience-link-toggle input:disabled { opacity: .4; cursor: default; }
.experience-link-toggle input:focus-visible { outline: 2px solid #338a84; outline-offset: 3px; }
@media (min-width: 1181px) {
  .intelligence-grid.has-experience-toolbar { grid-template-areas: "sun rain confidence" "sync sync sync" "boat clarity reef"; }
  .experience-toolbar { grid-area: sync; margin: 4px 0; }
}
@media (max-width: 600px) {
  .experience-toolbar { padding: 14px; column-gap: 10px; }
  .experience-toolbar strong { font-size: 13px; }
  .experience-panel { padding: 12px; }
}

/* 拍摄建议：主题、天气依据、值得更换的时间，分数退居次位。 */
.experience-overview .photo-score b { font-size: 24px; }
.photo-guide { background: linear-gradient(145deg,#f3f8f3,#fffdf7); }
.experience-insights .photo-guide .photo-advice { margin: 12px 0 0; color: #45685f; }
.photo-guide-modes button { padding-inline: 5px; text-wrap: balance; transition: background .18s, border-color .18s; }
.photo-guide-reading h4 { margin: 0 0 10px; font: 650 12px/1.5 system-ui,sans-serif; color: #365e5b; }
.photo-weather-evidence { padding-block: 18px 15px; }
.photo-weather-evidence dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0; }
.photo-weather-evidence dl > div + div { margin: 0; }
.photo-weather-evidence dt { color: #667f79; font-size: 10px; font-weight: 400; }
.photo-weather-evidence dd { text-align: start; font: 650 14px/1.55 system-ui,sans-serif; color: #225e60; }
.photo-guide-reading small { font: 400 10px/1.5 system-ui,sans-serif; color: #667c76; }
.photo-guide-reading b { font-variant-numeric: tabular-nums; }
.photo-guide-reading [dir="ltr"] { display: inline-block; }
.photo-guide-reading dd small, .photo-change-values small { margin-inline-start: 3px; }
.photo-weather-evidence dl > div > small { display: block; margin-top: 2px; }
.photo-weather-evidence dl > div > small b { font-weight: 400; }
.photo-time-advice { padding-top: 15px; border-top: 1px solid #dae5dc; }
.photo-guide .photo-guide-reading p { font-size: 12px; line-height: 1.7; color: #4d6c65; margin: 6px 0 0; }
.photo-compare-times { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0; font-size: 10px; color: #6c807a; }
.photo-compare-times b { display: block !important; margin-top: 2px; font-size: 12px; font-weight: 600; color: #315c59; }
.photo-time-advice ul { list-style: none; padding: 0; margin: 12px 0; }
.photo-time-advice li + li { margin-top: 12px; }
.photo-change-values { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 3px 10px; font-size: 11px; color: #5c756e; }
.photo-change-values b { font-size: 14px; color: #225e60; }
.photo-change-values i { font-style: normal; margin-inline: 6px; color: #7b9690; }
.photo-jump { min-height: 44px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #b6d1c4; background: #e5f0e8; color: #285f58; border-radius: 8px; padding: 9px 12px; font: 600 12px/1.5 system-ui,sans-serif; cursor: pointer; }
.photo-jump:hover { background: #dbeadf; }
.photo-jump:focus-visible, .photo-methods summary:focus-visible { outline: 2px solid #338a84; outline-offset: 3px; }
.photo-methods { margin-top: 15px; border-top: 1px solid #e0e8de; padding-top: 8px; }
.photo-methods summary { font: 400 11px/1.5 system-ui,sans-serif; color: #627b73; cursor: pointer; padding-block: 8px; }
.photo-guide .photo-methods p { font-size: 11px; }
.photo-scrubber svg { transition: opacity .18s; }
@media (prefers-reduced-motion: reduce) { .photo-guide-modes button, .photo-scrubber svg { transition: none; } }

/* 快艇：用途、完整时段和有意义的择时建议；原始数据按需展开。 */
.experience-overview .boat-window-score b { font-size: 24px; }
.boat-trip-planner { background: linear-gradient(150deg,#f1f7f3,#fffdf7); }
.boat-trip-modes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 12px; }
.boat-trip-modes button { min-height: 44px; min-width: 0; padding: 7px 10px; border: 1px solid #d6e3da; border-radius: 9px; color: #526f67; background: #fffef9; font: 600 12px/1.5 system-ui,sans-serif; cursor: pointer; transition: background .18s,border-color .18s; }
.boat-trip-modes button[aria-pressed="true"] { color: #245e57; background: #e1eee5; border-color: #a4c4b4; box-shadow: inset 0 1px 0 #ffffffa6; }
.boat-trip-duration { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.boat-trip-duration label { color: #456961; font: 500 12px/1.5 system-ui,sans-serif; }
.boat-trip-duration select { width: auto; min-width: 102px; min-height: 44px; padding: 8px 26px 8px 10px; border: 1px solid #c7d9ce; border-radius: 8px; background-color: #fffef9; color: #285d58; font: 600 12px/1.5 system-ui,sans-serif; cursor: pointer; }
.boat-trip-planner .boat-trip-duration-note { margin: 4px 0 12px; font-size: 10px; color: #72817a; }
.boat-trip-reading { border-top: 1px solid #dce6dc; padding-top: 13px; }
.boat-trip-reading h4 { margin: 0; color: #285c55; font: 650 13px/1.65 system-ui,sans-serif; text-wrap: balance; }
.boat-trip-reading p { margin: 6px 0 0; color: #516e65; font: 400 12px/1.7 system-ui,sans-serif; }
.boat-trip-decision[data-trip-state="night"] h4, .boat-trip-decision[data-trip-state="caution"] h4, .boat-trip-decision[data-trip-state="unavailable"] h4 { color: #886731; }
.boat-trip-route { margin-top: 14px; padding-block: 12px; border-block: 1px solid #dce6dc; }
.boat-trip-range { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 8px; color: #677f75; font-size: 10px; line-height: 1.5; }
.boat-trip-range time { color: #355e56; font-variant-numeric: tabular-nums; }
.boat-trip-route ol { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 12px 0 7px; padding: 0; }
.boat-trip-route li { min-width: 0; padding-top: 9px; border-top: 2px solid #9bbdb0; }
.boat-trip-route li > span { display: block; color: #637a71; font-size: 10px; line-height: 1.5; min-height: 1.5em; }
.boat-trip-route li > time { display: block; color: #285e57; font: 600 11px/1.8 system-ui,sans-serif; font-variant-numeric: tabular-nums; text-align: start; }
.boat-trip-route li > div { text-align: start; margin-top: 3px; }
.boat-trip-reading b { color: #2b6661; font: 650 14px/1.5 system-ui,sans-serif; font-variant-numeric: tabular-nums; }
.boat-trip-reading small { margin-inline-start: 3px; color: #6b8077; font: 400 10px/1.5 system-ui,sans-serif; }
.boat-trip-route > small { display: block; margin: 0; }
.boat-trip-route > .boat-trip-boundary { margin-top: 4px; }
.boat-trip-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.boat-trip-reading .boat-trip-warning { border-inline-start: 2px solid #c8ab66; padding-inline-start: 9px; color: #7e673e; }
.boat-trip-alternative { margin-top: 12px; }
.boat-trip-alternative > time { color: #42695e; font-size: 11px; font-variant-numeric: tabular-nums; }
.boat-trip-reading dl { margin: 8px 0; }
.boat-trip-reading dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 5px; }
.boat-trip-reading dt { color: #5b766c; font-size: 11px; }
.boat-trip-reading dd { margin: 0; }
.boat-trip-reading dd i { font-size: 11px; font-style: normal; color: #8ca395; margin-inline: 5px; }
.boat-trip-jump { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin-top: 10px; padding: 8px 11px; border: 1px solid #b5cebf; border-radius: 8px; color: #2d6256; background: #e6f0e7; font: 600 12px/1.5 system-ui,sans-serif; cursor: pointer; }
.boat-trip-jump:hover { background: #dceade; }
.boat-trip-reading .boat-trip-scope { margin-top: 11px; font-size: 10px; color: #75847d; }
.boat-trip-methods { margin-top: 9px; border-top: 1px solid #dce6dc; }
.boat-trip-methods summary { padding: 12px 0; color: #53746a; font: 500 11px/1.6 system-ui,sans-serif; cursor: pointer; }
.boat-trip-methods h4 { font-size: 11px; }
.boat-trip-methods p { font-size: 11px; }
details.boat-trip-methods:not([open]) > :not(summary) { display: none; }
.boat-trip-planner button:focus-visible, .boat-trip-planner select:focus-visible, .boat-trip-methods summary:focus-visible { outline: 2px solid #338a84; outline-offset: 3px; }
[dir="rtl"] .boat-trip-duration select { padding-inline: 10px 26px; }
@media (prefers-reduced-motion: reduce) { .boat-trip-modes button { transition: none; } }

/* 默认只看结论和操作。正文按需展开，不裁切、不缩小字体、不在卡片内另加滚动条。 */
.intelligence-grid > .intelligence-card.experience-card { align-self: start; min-height: 0; height: auto; }
.experience-card > .intelligence-foot { margin-top: 12px; }
.experience-card .experience-insights { margin-bottom: 0; }
/* 桌面同一行只随当前可见内容等高；不恢复所有时段的最高值预留。 */
@media (min-width: 1181px) {
  .intelligence-grid > .intelligence-card.experience-card { align-self: stretch; }
  .experience-card .experience-insights { margin-bottom: 12px; }
  .experience-card > .intelligence-foot { margin-top: auto; }
}
.experience-footer-inner { display: flow-root; }
.experience-details { margin-top: 12px; border-top: 1px solid #d9e5dc; }
.experience-details > summary { display: flex; align-items: center; gap: 9px; min-height: 44px; padding-block: 9px; list-style: none; cursor: pointer; color: #3d6c62; font: 550 14px/1.5 system-ui,sans-serif; }
.experience-details > summary::-webkit-details-marker { display: none; }
.experience-details > summary::before { content: "+"; flex: 0 0 16px; font: 400 20px/1 system-ui,sans-serif; text-align: center; color: #6b8f81; }
.experience-details[open] > summary::before { content: "−"; }
.experience-details > summary:focus-visible { outline: 2px solid #338a84; outline-offset: 3px; border-radius: 4px; }
.experience-details:not([open]) > .experience-detail-body { display: none; }
.experience-detail-body { padding-top: 5px; }
.experience-detail-body .boat-trip-methods { padding-top: 12px; }
.experience-detail-body .photo-weather-evidence { padding-top: 4px; }
.experience-detail-body .reef-visit-evidence { margin-top: 12px; }
.experience-detail-body .reef-data-note { margin-bottom: 0; }
.photo-detail-changes { list-style: none; padding: 0; margin: 12px 0; }
.photo-detail-changes li + li { margin-top: 12px; }
.photo-guide-reading > .photo-time-advice { margin-top: 12px; padding-top: 12px; }
.reef-visit-panel > .reef-local-status { margin: 12px 0 0; }
.reef-visit-panel > .reef-visit-decision { margin-top: 10px; }
.experience-details .reef-visit-methods { padding-top: 6px; }