/* Live planning, conditions and the Oʻahu field guide. */
.topbar { gap: 30px; }
.feedback-top { color: #d4dfd5; white-space: nowrap; min-height: 40px; }
.feedback-top:hover { color: white; }
.feedback-invitation { margin: 15px 0 24px; padding: 16px; border: 1px solid #dce4d2; border-radius: 10px; background: #f8faf1; }
.feedback-invitation > strong { display: block; margin: 8px 0; font-family: Georgia, serif; font-size: 19px; font-weight: 400; color: #315c4a; }
.feedback-invitation p { color: #6c7d63; font-size: 12px; line-height: 1.65; margin-bottom: 12px; }
.feedback-invitation .secondary-button { width: 100%; }
.feedback-recipient { display: flex; align-items: center; gap: 13px; margin: 20px 0; padding: 16px; border: 1px solid #dce5d5; border-radius: 10px; background: #edf3e8; }
.feedback-recipient > .icon { width: 23px; height: 23px; color: #52745d; flex-shrink: 0; }
.feedback-recipient > div { min-width: 0; flex: 1; }
.feedback-recipient span { display: block; color: #74816b; font-size: 11px; margin-bottom: 4px; }
.feedback-recipient a { color: #325d49; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.feedback-recipient button { font-size: 11px; white-space: nowrap; }
.feedback-category select { width: 100%; }
.feedback-message textarea { min-height: 110px; }
.feedback-context-toggle { display: flex; align-items: flex-start; gap: 10px; margin: 17px 0; color: #4a684d; cursor: pointer; }
.feedback-context-toggle input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: #52745d; flex-shrink: 0; }
.feedback-context-toggle strong { font-weight: 600; font-size: 12px; line-height: 1.5; }
.feedback-context-toggle small { display: block; color: #78866e; margin-top: 4px; font-size: 11px; line-height: 1.6; }
.feedback-review { margin-top: 16px; }
.feedback-review summary { color: #587653; font-size: 12px; cursor: pointer; }
.feedback-review textarea { display: block; width: 100%; padding: 12px; margin-top: 10px; border: 1px solid #dbe3d3; border-radius: 8px; background: #fffef7; color: #546a4c; font: 11px/1.65 ui-monospace, monospace; resize: vertical; }
.feedback-actions { margin-top: 20px; }
.feedback-actions a { text-decoration: none; }
.feedback-explainer { color: #65775e; font-size: 12px; line-height: 1.7; margin: 13px 0 10px; }
.feedback-privacy { color: #849079; font-size: 11px; line-height: 1.65; }
@media (max-width: 980px) { .topbar-end .island-badge { display: none; } }
@media (max-width: 480px) {
  .feedback-top { font-size: 11px; gap: 5px; }
  .feedback-top .icon { width: 15px; height: 15px; }
  .feedback-recipient { gap: 9px; padding: 13px 11px; }
  .feedback-recipient a { font-size: 13px; }
  .feedback-recipient > .icon { display: none; }
}
.main-nav { gap: 22px; margin-left: 0; }
.live-strip { background: #edf2e8; border-color: #dce5d7; color: #5b7567; gap: 12px; }
.live-status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #3c6c55; font-size: 11px; font-weight: 650; white-space: nowrap; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(73, 113, 106, .08); flex: 0 0 auto; }
.live-status.warning { color: #8b622b; }
.live-status.offline { color: #7c7770; }
.strip-message { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-strip .live-refresh { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 30px; margin-left: auto; padding: 4px 0 4px 8px; color: #3e6c5a; font-size: 11px; }
.live-strip .live-refresh:hover { color: #a55236; }
.live-refresh:disabled { opacity: .55; }

.planning-options { margin-top: 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.planning-options summary { position: relative; padding: 12px 18px 12px 0; color: #476755; cursor: pointer; font-size: 12px; font-weight: 600; list-style: none; }
.planning-options summary::-webkit-details-marker { display: none; }
.planning-options summary::after { content: "+"; position: absolute; right: 3px; top: 10px; font-size: 17px; font-weight: 400; color: #728a70; }
.planning-options[open] summary::after { content: "−"; }
.limit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.limit-grid label { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: #61735e; font-size: 12px; line-height: 1.45; }
.limit-grid input { width: 100%; min-width: 0; min-height: 37px; border: 1px solid #d5dfce; background: #fffef7; border-radius: 7px; padding: 7px 9px; color: var(--ink); font-size: 13px; }
.limit-grid input:focus { border-color: #8caa94; }
.limit-help { margin: 0 0 13px; font-size: 11px; line-height: 1.65; color: #74816e; }
.sort-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin: 12px 0 0; color: #6b7b62; font-size: 12px; }
.sort-row label { flex: 0 0 auto; }
.sort-row select { min-width: 0; max-width: 170px; min-height: 35px; padding: 6px 9px; border: 1px solid #d9e2d1; border-radius: 7px; background: #fbfcf4; color: #46664e; font-size: 12px; }
.field-label, .mode-button, .water-tabs button, .select-field > span, .select-field select { font-size: 12px; }
.area-title { font-size: 14px; }
.area-meta { font-size: 11px; }
.area-status { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 11px; color: #64756b; font-size: 11px; line-height: 1.5; }
.area-status small { color: #7b8679; font-size: 10px; font-weight: 400; }
.area-status .status-dot { background: currentColor; }
.status-fit, .area-status[data-tone="fit"] { color: #3c7158; }
.status-caution, .area-status[data-tone="caution"] { color: #91662d; }
.status-unknown, .area-status[data-tone="unknown"] { color: #7a8178; }
.status-closed, .area-status[data-tone="closed"] { color: #a64f3b; }
.data-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.data-age { display: block; margin-top: 6px; color: #74816f; font-size: 11px; font-weight: 400; line-height: 1.6; overflow-wrap: anywhere; }
.data-age a { color: #4b745d; }

.detail-tabs { justify-content: space-between; gap: 9px; padding: 0 20px; }
.detail-tabs > button { font-size: 11.5px; }
.detail-section p, .detail-intro, .reason-list > li, .technique-card, .technique-card p, .rule-callout, .rule-callout p { font-size: 13px; color: #65775e; line-height: 1.7; }
.detail-section-title, .technique-card strong, .technique-card h4, .rule-callout strong { font-size: 13px; }
.detail-tagline { font-size: 13px; color: #74856a; }
.rule-link, .source-inline, .source-inline > a, .source-inline > button { font-size: 12px; }
.condition-value { font-size: 22px; }
.condition-label, .condition-value small, .condition-value span { font-size: 11px; }
.conditions-caption { font-size: 11px !important; color: #7b8c70 !important; }
.conditions-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 12px 0; }
.conditions-pair > * { min-width: 0; }
.alert-card { margin: 12px 0; padding: 13px 14px; border: 1px solid #e7cbb6; border-left: 3px solid #bc7856; border-radius: 8px; background: #faf1e4; }
.alert-title { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 6px; color: #8a4f35; font-size: 13px; font-weight: 650; line-height: 1.5; }
.alert-title .icon { width: 16px; height: 16px; margin-top: 2px; }
.alert-body, .detail-section .alert-body { margin: 0; font-size: 12px; line-height: 1.7; color: #866646; overflow-wrap: anywhere; }
.alert-card a { color: #8b5937; }
.alert-card .data-age { color: #967c5d; }

.forecast-bars { display: flex; align-items: stretch; gap: 5px; overflow-x: auto; padding: 9px 1px 10px; margin: 12px 0 6px; scrollbar-width: thin; scrollbar-color: #c7d5bd transparent; }
.forecast-hour { display: flex; flex: 1 0 42px; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; min-width: 42px; min-height: 128px; padding: 8px 5px; border: 1px solid transparent; border-radius: 7px; background: #f0f4e9; color: #657b5e; }
.forecast-hour:hover { border-color: #c2d1b8; background: #e9f0e2; }
.forecast-hour.active { border-color: #87a18a; background: #e4eee2; box-shadow: inset 0 0 0 .5px #87a18a; }
.forecast-bar { display: block; width: 11px; min-height: 3px; max-height: 66px; flex: 0 0 auto; border-radius: 4px 4px 2px 2px; background: #7b9d84; }
.forecast-hour.caution .forecast-bar { background: #c19a64; }
.forecast-hour.active .forecast-bar { background: #46745b; }
.forecast-hour.caution.active .forecast-bar { background: #a87841; }
.forecast-hour-label { font-size: 10px; line-height: 1.4; white-space: nowrap; }
.forecast-hour-value { color: #486747; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tide-chart { margin: 13px 0 9px; padding: 11px 7px 5px; border: 1px solid #dce6dc; border-radius: 9px; background: #eff5ef; }
.tide-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.tide-chart text { fill: #6c8475; font-family: inherit; font-size: 10px; }
.tide-events { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tide-event { flex: 1 1 100px; min-width: 0; padding: 10px 11px; background: #f1f5ec; border: 1px solid #e0e8d8; border-radius: 7px; color: #6b8164; font-size: 12px; line-height: 1.55; }
.tide-event strong { display: block; color: #416b55; font-size: 13px; font-weight: 600; }
.tide-event small { display: block; margin-top: 3px; font-size: 11px; color: #7e8f73; }
.observation-card { margin-top: 12px; padding: 14px; background: #f1f5ed; border: 1px solid #dce5d7; border-radius: 9px; }
.observation-card h3, .observation-card h4 { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #466a53; }
.observation-card p { margin-bottom: 8px; }
.observation-values { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 11px 0; color: #56745c; font-size: 12px; }
.observation-values > * { min-width: 70px; }
.observation-values strong { display: block; margin-bottom: 3px; font-size: 20px; color: #3e6651; font-weight: 500; line-height: 1.3; }
.observation-values small { font-size: 11px; color: #7e9175; }

.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.guide-card { min-width: 0; padding: 19px; border: 1px solid #dbe4d2; border-radius: 11px; background: #fffef6; }
.guide-title { margin: 0 0 8px; color: #325d49; font-family: Georgia, "Times New Roman", serif; font-size: 23px; line-height: 1.2; font-weight: 400; letter-spacing: -.4px; }
.guide-title small { display: block; margin-top: 6px; color: #8a977e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; font-style: italic; font-weight: 400; letter-spacing: 0; }
.guide-detail { color: #6e8062; font-size: 13px; line-height: 1.75; margin: 0 0 12px; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 6px 11px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #e8ecdf; color: #7d8b70; font-size: 11px; line-height: 1.65; }
.guide-meta a { color: #55794c; overflow-wrap: anywhere; }
.guide-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #dfe6d5; }
.guide-section > h3 { margin-bottom: 12px; color: #4e6d42; font-size: 15px; font-weight: 650; }
.guide-section p { font-size: 13px; color: #708360; line-height: 1.75; }
.method-list { margin: 12px 0; padding-left: 19px; color: #697e5c; font-size: 13px; line-height: 1.75; }
.method-list li + li { margin-top: 9px; }
.method-list strong { color: #45683e; font-weight: 600; }
.license-card { margin: 13px 0; padding: 16px; border: 1px solid #e2d9bc; border-radius: 9px; background: #f8f2e4; color: #806b46; font-size: 13px; line-height: 1.75; }
.license-card h3, .license-card h4 { font-size: 14px; color: #7e6036; margin-bottom: 9px; }
.license-card p { margin-bottom: 9px; color: #806f4f; font-size: 13px; }
.license-card a { color: #876334; }
.checklist { display: grid; gap: 0; margin: 15px 0; padding: 4px 14px; background: #f2f6eb; border: 1px solid #dfe7d4; border-radius: 9px; }
.checklist label { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e3ead9; color: #617a53; font-size: 13px; line-height: 1.65; cursor: pointer; }
.checklist label:last-child { border-bottom: 0; }
.checklist input { width: 16px; height: 16px; margin: 3px 0 0; flex: 0 0 auto; accent-color: #507e5b; }
.checklist label:has(input:checked) { color: #88977b; }
.notes-field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; color: #557249; font-size: 13px; font-weight: 600; }
.notes-field textarea { resize: vertical; min-height: 95px; width: 100%; padding: 12px; border: 1px solid #d4dfc9; border-radius: 8px; background: #fffef7; color: #3d5f42; font-size: 13px; line-height: 1.7; font-weight: 400; }
.notes-field textarea::placeholder { color: #8e9c80; }
.notes-field textarea:focus { outline: 2px solid #8aaa88; outline-offset: 2px; }
.source-card p, .dialog-intro, .dialog-description, .about-tile p, .trip-stop p { font-size: 13px; }
.source-card a { font-size: 12px; }
.source-card small { color: #7f8e72; font-size: 11px; overflow-wrap: anywhere; }

.map-band { fill: #4b938b; fill-opacity: .17; stroke: #559a93; stroke-opacity: .6; stroke-width: .4; fill-rule: evenodd; pointer-events: none; }
.managed-area { fill: #c19a62; fill-opacity: .12; stroke: #a57c43; stroke-opacity: .75; stroke-width: .8; stroke-linejoin: round; fill-rule: evenodd; cursor: pointer; }
.managed-area.no-take { fill: #b9583c; fill-opacity: .17; stroke: #b9583c; }
.managed-area:hover, .managed-area:focus { fill-opacity: .3; stroke-opacity: 1; stroke-width: 1.8; outline: none; }
.managed-area:focus-visible { stroke-width: 3; }
.map-condition-label { fill: #3a6053; font-size: 10px; font-weight: 550; paint-order: stroke; stroke: #f4f7ec; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }

@media (min-width: 1300px) {
  .workspace { grid-template-columns: 310px minmax(0, 1fr) 360px; }
}
@media (max-width: 1199px) and (min-width: 761px) {
  .topbar { gap: 22px; }
  .main-nav { gap: 18px; }
  .detail-panel { width: 360px; }
}
@media (max-width: 980px) and (min-width: 761px) {
  .topbar { gap: 18px; }
  .main-nav { gap: 16px; }
  .nav-item { font-size: 11px; }
}
@media (max-width: 760px) {
  .live-strip { gap: 8px; padding-left: 15px; padding-right: 15px; }
  .live-status { font-size: 10px; gap: 6px; }
  .strip-message { font-size: 11px; }
  .live-strip .live-refresh { font-size: 11px; gap: 4px; padding-left: 3px; }
  .live-strip .live-refresh .icon { width: 13px; height: 13px; }
  .mode-button span, .water-tabs button, .field-label, .select-field > span, .select-field select { font-size: 12px; }
  .detail-section p, .reason-list > li, .technique-card, .technique-card p { font-size: 13px; }
  .detail-tabs { gap: 8px; padding-left: 19px; padding-right: 19px; }
  .detail-tabs > button { font-size: 11.5px; }
  .detail-section-title { font-size: 13px; }
  .forecast-hour { min-width: 45px; min-height: 134px; }
  .guide-grid { grid-template-columns: 1fr; gap: 12px; }
  .guide-card { padding: 18px; }
  .guide-title { font-size: 23px; }
  .source-grid { grid-template-columns: 1fr; }
  .source-card p, .dialog-intro, .dialog-description, .about-tile p, .trip-stop p { font-size: 13px; }
  .source-card a { font-size: 12px; }
  .notes-field textarea { font-size: 16px; }
}
@media (max-width: 380px) {
  .live-strip { gap: 7px; padding-left: 12px; padding-right: 12px; }
  .live-status { font-size: 9.5px; }
  .live-strip .live-refresh { font-size: 10px; }
  .detail-tabs { padding-left: 15px; padding-right: 15px; gap: 6px; }
  .detail-tabs > button { font-size: 11px; }
  .conditions-pair { gap: 7px; }
  .guide-card { padding: 16px; }
}

/* SVG plots and compact utility controls. */
.tide-grid { fill: none; stroke: #cedcd0; stroke-width: 1; }
.tide-line { fill: none; stroke: #4c8879; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tide-cursor { fill: none; stroke: #b9583c; stroke-width: 1; stroke-dasharray: 3 3; }
.detail-footer > small { display: block; text-align: center; margin-top: 8px; font-size: 10px; color: #7c8f72; }
.band-legend::before { content: ''; display:inline-block; width:10px; height:6px; background:#4b938b40; border:1px solid #559a93; margin-right:4px; }
.preview-label.live-status::before { display: none; }
.timeline-context { display:inline-flex; align-items:center; gap:5px; padding:0; text-align:left; }
.tag { display:inline-flex; align-items:center; gap:5px; }
button.tag:hover { background:#dbe8d9; }
.share-link-input { width:100%; padding:12px; border:1px solid var(--line); border-radius:7px; background:var(--paper); }
.marker-caution .marker-circle { fill:#9b8052; }
.marker-unknown .marker-circle { fill:#708778; }
.marker-closed .marker-circle { fill:#9d6051; }
.map-marker.selected .marker-circle { fill:#b9583c; }
@media(max-width:760px) { .live-strip #aboutButton { display:none; } .sort-row select { max-width:165px; } .band-legend { display:none; } }

.license-card.license-relevant { border-left:4px solid #49716a; background:#edf3e7; }