/* Coral collection and detail views share the homepage/result visual language. */
#tanksView { --tank-violet: #7e22ce; --tank-amber: #935000; }
html[data-theme="dark"] #tanksView { --tank-violet: #d8b4fe; --tank-amber: #fcd34d; }
#tanksView .coral-section-title { margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: -.035em; }
.coral-tanks-intro { margin: 0 0 24px; color: var(--coral-muted); font-size: .9rem; line-height: 1.6; }
#tanksView .tanks-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; padding: 16px; border: 1px solid var(--coral-border); border-radius: 14px; background: var(--coral-surface); }
#tanksView .tanks-toolbar-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
#tanksView .tank-filter-label { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--coral-muted); font-size: .85rem; font-weight: 600; }
#tanksView .tank-filter-label select { margin: 0; min-height: 44px; max-width: 100%; padding: 10px 30px 10px 12px; border: 1px solid var(--coral-border); border-radius: 10px; background: var(--coral-pale); color: var(--coral-ink); font: inherit; }
#tanksView button,
#tanksView summary { box-sizing: border-box; min-height: 44px; font: inherit; }
#tanksView button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--coral-border); border-radius: 11px; background: var(--coral-surface); color: var(--coral-ink); font-size: .85rem; font-weight: 600; line-height: 1.4; white-space: normal; cursor: pointer; box-shadow: none; }
#tanksView button[hidden] { display: none; }
#tanksView .coral-btn-action:not(.coral-btn-secondary) { color: var(--coral-action-text); background: var(--coral-action-fill); border-color: var(--coral-action-fill); }
#tanksView button:hover:not(:disabled) { background: var(--coral-pale); border-color: var(--coral-border-focus); }
#tanksView .coral-btn-action:not(.coral-btn-secondary):hover:not(:disabled) { background: var(--coral-action-fill); filter: brightness(.96); }
#tanksView button:disabled { opacity: .55; cursor: not-allowed; }
#tanksView button:focus-visible,
#tanksView select:focus-visible,
#tanksView summary:focus-visible { outline: 2px solid var(--coral-border-focus); outline-offset: 3px; }
.coral-tank-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; }
#tanksView .tanks-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
#tanksView .coral-tank-card { border-radius: 16px; gap: 14px; box-shadow: 0 3px 14px #061c3510; }
#tanksView .tank-card-header { align-items: flex-start; gap: 12px; }
#tanksView .tank-card-title { flex: 1; min-width: 0; color: var(--coral-ink); font-size: 1.12rem; line-height: 1.4; letter-spacing: -.025em; overflow-wrap: anywhere; }
#tanksView .btn-tank-archive,
#tanksView .btn-tank-restore { flex-shrink: 0; padding: 10px; font-size: .78rem; color: var(--coral-muted); }
#tanksView .btn-tank-archive .coral-tank-icon { color: var(--tank-amber); }
#tanksView .btn-tank-restore .coral-tank-icon { color: var(--coral-link); }
#tanksView .tank-card-meta { gap: 8px; line-height: 1.5; }
#tanksView .tank-meta-item { padding: 5px 9px; background: var(--coral-pale); border: 1px solid var(--coral-border); color: var(--coral-muted); }
#tanksView .tank-card-params { display: grid; gap: 8px; }
#tanksView .tank-card-param-badge { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 9px 10px; border: 1px solid var(--coral-border); border-radius: 10px; background: var(--coral-pale); color: var(--coral-muted); font-size: .78rem; line-height: 1.5; }
#tanksView .tank-card-param-badge > .coral-tank-icon { color: var(--coral-link); width: 17px; height: 17px; flex-basis: 17px; }
#tanksView .tank-card-param-badge strong { color: var(--coral-ink); }
#tanksView .tank-card-param-badge .param-freshness-tag { margin-left: auto; }
#tanksView .tank-card-actions { display: flex; justify-content: flex-end; }
#tanksView .tank-card-actions .btn-open-tank { width: 100%; justify-content: space-between; color: var(--coral-link); }
#tanksView .coral-tanks-empty { padding: 16px 0; }
#tanksView .tanks-empty-card { display: grid; justify-items: center; gap: 12px; max-width: 540px; padding: 36px 24px; background: var(--coral-surface); border: 1px dashed var(--coral-border); color: var(--coral-ink); }
#tanksView .tanks-empty-card h3 { margin: 0; color: var(--coral-ink); }
#tanksView .tanks-empty-card p { margin: 0; color: var(--coral-muted); line-height: 1.65; }
.coral-tanks-empty-icon,
.tank-section-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; color: var(--coral-link); background: color-mix(in srgb, var(--coral-primary) 12%, var(--coral-surface)); }
.coral-tanks-empty-icon { width: 56px; height: 56px; }
.coral-tanks-empty-icon svg { width: 30px; height: 30px; }
#tanksView .icon-coral { color: var(--tank-violet); background: color-mix(in srgb, var(--tank-violet) 12%, var(--coral-surface)); }
#tanksView .tank-detail-view { padding: 24px; border-radius: 16px; box-shadow: 0 3px 14px #061c3510; }
#tanksView .btn-tank-back { margin-bottom: 18px; color: var(--coral-link); }
#tanksView .tank-detail-header { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 24px; align-items: center; margin-bottom: 24px; }
#tanksView .tank-detail-header > .coral-tank-cover { width: 100%; aspect-ratio: 2 / 1; border-radius: 12px; }
#tanksView .tank-detail-heading { min-width: 0; }
#tanksView .coral-eyebrow { margin: 0 0 8px; color: var(--coral-link); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
#tanksView .tank-detail-title { margin: 0 0 16px; font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.3; letter-spacing: -.03em; }
#tanksView .tank-detail-actions,
#tanksView .coral-detail-actions,
#tanksView .coral-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#tanksView .tank-detail-tabs { flex-wrap: wrap; overflow-x: visible; gap: 8px; padding: 0 0 12px; margin-bottom: 20px; scrollbar-width: thin; }
#tanksView .tank-subtab-btn { flex: 1 1 auto; border-radius: 10px; white-space: nowrap; }
#tanksView .tank-subtab-btn.is-active,
#tanksView .btn-range.is-active { background: var(--coral-pale); color: var(--coral-link); border-color: var(--coral-border-focus); }
#tanksView .tank-overview-panel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; }
#tanksView .tank-info-card,
#tanksView .tank-latest-params-card { padding: 20px; border-radius: 14px; }
#tanksView .tank-info-card h4,
#tanksView .tank-latest-params-card h4 { display: flex; align-items: center; gap: 12px; font-size: 1rem; line-height: 1.4; }
#tanksView .tank-info-card p { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; line-height: 1.6; color: var(--coral-muted); }
#tanksView .tank-info-card p strong { color: var(--coral-ink); }
#tanksView .overview-params-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; }
#tanksView .overview-param-item { padding: 14px; border-radius: 10px; background: var(--coral-surface); }
#tanksView .overview-param-name { overflow-wrap: anywhere; line-height: 1.5; }
#tanksView .overview-param-val { font-variant-numeric: tabular-nums; line-height: 1.6; }
#tanksView .coral-summary-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 14px; }
#tanksView .coral-card-top { flex-wrap: wrap; gap: 8px; }
#tanksView .coral-card-nickname { margin: 0; font-size: 1.05rem; line-height: 1.4; }
#tanksView .coral-card-sci { margin: 0; font-size: .85rem; line-height: 1.6; }
#tanksView .coral-card-actions { margin-top: auto; }
#tanksView .coral-card-actions button { flex: 1 1 140px; }
#tanksView .coral-detail-panel { padding: 24px; border: 1px solid var(--coral-border); border-radius: 16px; background: var(--coral-surface); }
#tanksView .coral-detail-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; }
#tanksView .coral-detail-header > div { min-width: 0; }
#tanksView .coral-detail-header h3 { color: var(--coral-ink); font-size: 1.4rem; line-height: 1.35; overflow-wrap: anywhere; margin: 0 0 8px; }
#tanksView .coral-detail-header p,
#tanksView .coral-detail-notes { color: var(--coral-muted); line-height: 1.65; overflow-wrap: anywhere; }
#tanksView .coral-edit-details { margin: 8px 0; border: 1px solid var(--coral-border); border-radius: 10px; padding: 0 14px; background: var(--coral-pale); }
#tanksView .coral-edit-details > summary { display: list-item; padding-block: 12px; color: var(--coral-link); cursor: pointer; }
#tanksView .coral-scan-history { padding: 0; list-style: none; }
#tanksView .coral-scan-history-item { align-items: center; padding: 14px; border-radius: 10px; background: var(--coral-pale); }
#tanksView .coral-scan-history-item strong { color: var(--coral-ink); font-size: .85rem; }
#tanksView .coral-section-error,
#tanksView .coral-section-loading,
#tanksView .corals-empty-panel { padding: 18px; border: 1px solid var(--coral-border); border-radius: 12px; background: var(--coral-pale); color: var(--coral-muted); line-height: 1.6; }
#tanksView .btn-load-more { margin-top: 18px; }
#tanksView .tank-list-feedback-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#tanksView .tank-creation-feedback { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--coral-border); border-radius: 10px; background: var(--coral-pale); color: var(--coral-ink); line-height: 1.6; }
#tanksView .tank-creation-feedback[data-error="true"] { border-color: var(--coral-rust); }
#tanksView .coral-param-filters,
#tanksView .coral-parameter-history,
#tanksView .tank-detail-content { min-width: 0; max-width: 100%; }
#tanksView .coral-parameter-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--coral-border); border-radius: 10px; scrollbar-width: thin; }
#tanksView .coral-parameter-table-scroll:focus-visible { outline: 2px solid var(--coral-border-focus); outline-offset: 3px; }
#tanksView .param-history-table { min-width: 560px; }
#tanksView .timeline-coverage { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; color: var(--coral-muted); }
#tanksView .timeline-coverage p { flex-basis: 100%; margin: 0 0 4px; line-height: 1.65; }
#tanksView .timeline-event-body { min-width: 0; }
#tanksView .timeline-event-header { flex-wrap: wrap; }
@media (max-width: 800px) {
  #tanksView .tank-detail-header,
  #tanksView .tank-overview-panel { grid-template-columns: minmax(0, 1fr); }
  #tanksView .tank-detail-header > .coral-tank-cover { max-height: 240px; }
}
@media (max-width: 500px) {
  #tanksView .tanks-toolbar { padding: 14px; gap: 14px; }
  #tanksView .tank-filter-label,
  #tanksView .tank-filter-label select { width: 100%; }
  #tanksView .tanks-toolbar-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
  #tanksView .tank-card-header { flex-wrap: wrap; }
  #tanksView .tank-card-title { flex-basis: 100%; }
  #tanksView .tank-detail-view,
  #tanksView .coral-detail-panel { padding: 16px; }
  #tanksView .tank-info-card,
  #tanksView .tank-latest-params-card { padding: 16px; }
  #tanksView .tank-detail-actions > button { flex: 1 1 110px; }
  #tanksView .coral-detail-header { grid-template-columns: minmax(0, 1fr); }
  #tanksView .coral-detail-header > button { justify-self: start; }
  #tanksView .coral-detail-actions button,
  #tanksView .coral-scan-history-item button { width: 100%; }
}

#tanksView #tankStatus[data-error='true'] { color: var(--coral-rust); }

#tanksView .tank-quick-readings { margin-top: 20px; border-top: 1px solid var(--coral-border); padding-top: 16px; }
#tanksView .tank-quick-readings summary { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--coral-teal); font-weight: 700; padding: 8px 0; }
#tanksView .tank-overview-panel { align-items: start; }
#tanksView .tank-reading-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; margin: 18px 0; }
#tanksView .tank-reading-grid > label { min-width: 0; }
#tanksView .tank-reading-input { display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: 6px; }
#tanksView .tank-reading-input input, #tanksView .tank-reading-input select { width: 100%; min-width: 0; }
#tanksView .tank-quick-readings input, #tanksView .tank-quick-readings select { box-sizing: border-box; min-height: 44px; padding: 10px; border: 1px solid var(--coral-border); border-radius: 8px; background: var(--coral-surface); color: var(--coral-ink); font: inherit; font-size: 16px; }
#tanksView .tank-quick-readings input:focus-visible, #tanksView .tank-quick-readings select:focus-visible, #tanksView .tank-quick-readings summary:focus-visible { outline: 2px solid var(--coral-teal); outline-offset: 2px; }
#tanksView .tank-quick-readings input[type="datetime-local"] { width: 100%; min-width: 0; margin-bottom: 16px; }
#tanksView .tank-quick-readings [aria-busy="true"] { opacity: .75; }
#tanksView .tank-reading-grid label > span { font-weight: 600; font-size: .9rem; }
#tanksView .tank-reading-grid small { color: var(--coral-muted); }
#tanksView .coral-scan-copy { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
#tanksView .coral-scan-copy time { color: var(--coral-muted); font-size: .85rem; }

#tanksView .latest-reading-value { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 0; color: inherit; font: inherit; border: 0; background: none; cursor: pointer; text-align: left; }
#tanksView .latest-reading-value[hidden] { display: none; }
#tanksView .latest-reading-value svg { width: 15px; height: 15px; color: var(--coral-teal); }

.tank-cover-dialog { max-width: 600px; }
.tank-cover-dialog-copy { margin: 0 0 16px; color: var(--coral-muted); line-height: 1.6; }
.tank-cover-dialog-preview { overflow: hidden; margin: 0 0 18px; border: 1px solid var(--coral-border); border-radius: 12px; background: var(--coral-pale); }
.tank-cover-dialog-preview .coral-tank-cover { width: 100%; aspect-ratio: 16 / 6; min-height: 110px; }
.tank-cover-upload-field { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--coral-border-focus); border-radius: 12px; background: var(--coral-pale); color: var(--coral-ink); cursor: pointer; font-weight: 650; }
.tank-cover-upload-field > span { display: flex; align-items: center; gap: 9px; color: var(--coral-link); }
.tank-cover-upload-field input { box-sizing: border-box; width: 100%; min-height: 44px; color: var(--coral-ink); font: inherit; font-size: .86rem; }
.tank-cover-upload-field input::file-selector-button { min-height: 40px; margin-right: 10px; padding: 8px 12px; border: 1px solid var(--coral-border); border-radius: 9px; background: var(--coral-surface); color: var(--coral-ink); font: inherit; cursor: pointer; }
.tank-cover-hint { display: block; margin: 7px 0 14px; color: var(--coral-muted); font-size: .78rem; line-height: 1.5; }
.tank-cover-coral-picker { display: grid; gap: 8px; margin-top: 18px; }
.tank-cover-coral-picker label { color: var(--coral-ink); font-size: .86rem; font-weight: 650; }
.tank-cover-coral-picker select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--coral-border); border-radius: 10px; background: var(--coral-surface); color: var(--coral-ink); font: inherit; }
.tank-cover-coral-picker .tank-cover-hint { margin: 0; }
.tank-cover-dialog-actions { flex-wrap: wrap; justify-content: flex-end; }
.tank-cover-dialog-actions button { min-height: 44px; }
.tank-cover-dialog [aria-busy="true"] { cursor: progress; }
.tank-cover-dialog button:focus-visible,
.tank-cover-dialog select:focus-visible,
.tank-cover-dialog input:focus-visible { outline: 2px solid var(--coral-border-focus); outline-offset: 3px; }
@media (max-width: 520px) {
  .tank-cover-dialog { padding: 18px; }
  .tank-cover-dialog-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .tank-cover-dialog-actions button { width: 100%; }
}
#tanksView .latest-reading-value:focus-visible { outline: 2px solid var(--coral-teal); outline-offset: 3px; border-radius: 4px; }
#tanksView .latest-reading-form:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
#tanksView .latest-reading-form label { min-width: 0; }
#tanksView .latest-reading-form input { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; min-height: 44px; font: inherit; font-size: 16px; color: var(--coral-ink); background: var(--coral-surface); border: 1px solid var(--coral-border); border-radius: 8px; }
#tanksView .latest-reading-form > div, #tanksView .latest-reading-form > small, #tanksView .latest-reading-form > p { grid-column: 1 / -1; }
#tanksView .latest-reading-form > div { display: flex; gap: 6px; }
#tanksView .latest-reading-form button { min-width: 44px; min-height: 44px; }
#tanksView .latest-reading-form small { color: var(--coral-muted); }
#tanksView .latest-reading-form p { margin: 0; color: var(--coral-rust); font-size: .85rem; }
#tanksView .coral-photo { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--coral-pale); color: var(--coral-teal); isolation: isolate; }
#tanksView .coral-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#tanksView .coral-photo-placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .8rem; gap: 4px; }
#tanksView .coral-photo-placeholder svg { width: 60%; max-width: 180px; }
#tanksView .coral-photo.has-photo .coral-photo-placeholder { visibility: hidden; }
#tanksView .coral-detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 28px; margin: 22px 0; }
#tanksView .coral-detail-hero .coral-detail-header { display: block; }
#tanksView .coral-detail-hero h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
#tanksView #btnBackToCorals { justify-self: start; }
#tanksView .coral-detail-actions { padding-bottom: 16px; border-bottom: 1px solid var(--coral-border); }
#tanksView .coral-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#tanksView .coral-card-actions [data-open-latest-diagnosis] { grid-column: 1 / -1; }
#tanksView .coral-card-actions button { min-width: 0; }
@media (max-width: 600px) { #tanksView .coral-detail-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
/* Per-coral visual history; existing theme tokens own the palette. */
.coral-journey { display: grid; gap: 18px; color: var(--coral-ink); }
.coral-community-preview { width: min(680px, calc(100vw - 32px)); max-height: 90vh; border: 1px solid var(--coral-border); border-radius: 16px; padding: 20px; background: var(--coral-surface); color: var(--coral-ink); }
.coral-community-preview::backdrop { background: #001422b8; }
.coral-community-preview form, .coral-community-preview fieldset { display: grid; gap: 12px; }
.coral-community-preview label { display: grid; gap: 8px; }
.coral-community-preview [hidden] { display: none; }
.coral-community-preview fieldset label { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.coral-community-preview fieldset label[data-report-link-field] { display: grid; align-items: start; min-width: 0; }
.coral-community-preview [data-share-preview] { overflow-wrap: anywhere; }
.coral-community-preview input:not([type="checkbox"]), .coral-community-preview textarea { width: 100%; padding: 10px; border: 1px solid var(--coral-border); border-radius: 10px; background: var(--coral-surface); color: var(--coral-ink); font: inherit; }
.coral-community-preview button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--coral-border); border-radius: 10px; cursor: pointer; }
.coral-community-preview [data-share-confirm] { background: var(--coral-action-fill); color: var(--coral-action-text); }
.coral-community-preview-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.coral-community-preview-photo { max-width: 220px; max-height: 160px; object-fit: contain; border-radius: 10px; }
.parameter-trends { margin: 24px 0; color: var(--coral-ink); }
.parameter-trends-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
#tanksView .parameter-trends-heading h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.025em; }
#tanksView .parameter-trends-heading .coral-eyebrow { margin-bottom: 5px; }
.parameter-trends-key { display: inline-flex; align-items: center; gap: 7px; color: var(--coral-muted); font-size: .75rem; }
.parameter-trends-key > span { width: 8px; height: 8px; border-radius: 50%; background: var(--coral-link); }
.parameter-trends > p { line-height: 1.6; color: var(--coral-muted); }
.parameter-trends-intro { margin: 10px 0 18px; font-size: .86rem; }
.parameter-trends fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.parameter-trends legend { margin-bottom: 9px; padding: 0; font-size: .8rem; font-weight: 650; color: var(--coral-muted); }
.parameter-trend-options { display: flex; gap: 8px; flex-wrap: wrap; }
.parameter-trend-panel, .parameter-trend-options label { --trend-accent: var(--coral-link); }
.parameter-trend-panel[data-parameter="nitrate"], .parameter-trend-options label[data-parameter="nitrate"], .parameter-trend-panel[data-parameter="magnesium"], .parameter-trend-options label[data-parameter="magnesium"] { --trend-accent: var(--tank-violet); }
.parameter-trend-panel[data-parameter="phosphate"], .parameter-trend-options label[data-parameter="phosphate"], .parameter-trend-panel[data-parameter="calcium"], .parameter-trend-options label[data-parameter="calcium"] { --trend-accent: var(--tank-amber); }
.parameter-trend-options label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 9px 13px; border: 1px solid var(--coral-border); border-radius: 10px; background: var(--coral-surface); font-size: .82rem; font-weight: 600; cursor: pointer; }
.parameter-trend-options label:has(:checked) { border-color: color-mix(in srgb, var(--trend-accent) 65%, var(--coral-border)); background: color-mix(in srgb, var(--trend-accent) 8%, var(--coral-surface)); }
.parameter-trend-options label:focus-within { outline: 2px solid var(--coral-border-focus); outline-offset: 3px; }
.parameter-trend-options input { width: 18px; height: 18px; margin: 0; accent-color: var(--trend-accent); }
.parameter-trend-status { min-height: 1.6em; margin: 14px 0; font-size: .78rem; overflow-wrap: anywhere; }
.parameter-trends-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.parameter-trend-panel { min-width: 0; padding: 14px; border: 1px solid var(--coral-border); border-top: 3px solid var(--trend-accent); border-radius: 12px; background: var(--coral-surface); color: var(--coral-ink); box-shadow: 0 3px 14px #061c3508; }
.parameter-trend-heading { display: flex; align-items: center; gap: 10px; }
.parameter-trend-heading > div { min-width: 0; }
#tanksView .parameter-trend-panel h4 { margin: 0; font-size: .95rem; line-height: 1.4; letter-spacing: -.015em; }
.parameter-trend-symbol { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: color-mix(in srgb, var(--trend-accent) 10%, var(--coral-surface)); color: var(--trend-accent); font-size: .78rem; font-weight: 750; }
.parameter-trend-caption { display: block; margin-top: 2px; color: var(--coral-muted); font-size: .72rem; }
.parameter-trend-count { margin-left: auto; flex-shrink: 0; padding: 5px 8px; border-radius: 8px; background: var(--coral-pale); color: var(--coral-muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.parameter-trend-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 8px; }
.parameter-trend-latest { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.parameter-trend-latest strong { font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -.045em; }
.parameter-trend-latest > span { margin-left: 4px; color: var(--coral-muted); font-size: .9rem; }
.parameter-trend-date { margin: 0; color: var(--coral-muted); font-size: .72rem; line-height: 1.5; text-align: right; }
.parameter-trend-plot { padding: 4px 2px 0; margin: 0 0 10px; border-radius: 8px; background: color-mix(in srgb, var(--coral-pale) 45%, var(--coral-surface)); }
.parameter-trend-panel svg { display: block; width: 100%; height: auto; max-height: 160px; overflow: visible; }
.parameter-trend-panel svg .parameter-trend-gridline { stroke: var(--coral-border); stroke-width: 1; stroke-dasharray: 4 5; }
.parameter-trend-panel svg text { fill: var(--coral-muted); font: 16px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.parameter-trend-reading { display: grid; gap: 5px; color: var(--coral-muted); font-size: .75rem; font-weight: 600; }
.parameter-trend-panel select { box-sizing: border-box; display: block; width: 100%; max-width: 100%; min-height: 44px; padding: 9px 30px 9px 11px; border-radius: 10px; border: 1px solid var(--coral-border); background: var(--coral-surface); color: var(--coral-ink); font: inherit; font-size: 16px; }
.parameter-trend-selected { display: none; margin: 8px 0 0; padding: 7px 9px; border-left: 2px solid var(--trend-accent); border-radius: 0 8px 8px 0; background: var(--coral-pale); color: var(--coral-muted); font-size: .74rem; line-height: 1.5; overflow-wrap: anywhere; }
.parameter-trend-panel:has([data-trend-point][aria-pressed="true"]) .parameter-trend-selected { display: block; }
.parameter-trend-footnote { margin: 0; color: var(--coral-muted); font-size: .7rem; line-height: 1.6; }
.parameter-trends-disclosure { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--coral-border); font-size: .76rem; }
.parameter-trends-empty { grid-column: 1 / -1; padding: 22px; border: 1px dashed var(--coral-border); border-radius: 12px; color: var(--coral-muted); text-align: center; }
.param-exact-value { display: block; color: var(--coral-muted); }
.parameter-trend-panel .parameter-trend-dot { fill: var(--trend-accent); stroke: var(--coral-surface); stroke-width: 2; cursor: pointer; }
.parameter-trend-panel .parameter-trend-dot.is-latest { fill: var(--coral-surface); stroke: var(--trend-accent); stroke-width: 3; }
.parameter-trend-panel .parameter-trend-dot[aria-pressed="true"] { r: 8px; fill: var(--trend-accent); stroke: var(--coral-ink); stroke-width: 3; }
.parameter-trend-panel .parameter-trend-dot:focus-visible { outline: 2px solid var(--coral-ink); outline-offset: 4px; }
@media (max-width: 760px) { .parameter-trends-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .parameter-trend-panel { padding: 14px; } .parameter-trend-count { padding: 4px 6px; } }
.coral-tank-chat { margin: 20px 0; padding: 18px; border: 1px solid var(--coral-border); border-radius: 14px; background: var(--coral-surface); color: var(--coral-ink); }
.tank-chat-options { display: grid; gap: 12px; border: 1px solid var(--coral-border); border-radius: 10px; padding: 12px; }
.tank-chat-options label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.tank-chat-options input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--coral-primary); }
.coral-tank-chat [data-chat-summary] { line-height: 1.6; overflow-wrap: anywhere; }
.coral-tank-chat select { display: block; width: 100%; max-width: 400px; min-height: 44px; margin: 8px 0 16px; padding: 10px 32px 10px 12px; border: 1px solid var(--coral-border); border-radius: 10px; background: var(--coral-surface); color: var(--coral-ink); font: inherit; }
.coral-tank-chat form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.coral-tank-chat form label { width: 100%; }
.coral-tank-chat form input { min-width: 0; flex: 1 1 200px; min-height: 44px; padding: 10px; border: 1px solid var(--coral-border); border-radius: 10px; background: var(--coral-surface); color: var(--coral-ink); }
.coral-tank-chat .coral-chat-messages { max-height: 400px; overflow-y: auto; }
.journey-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; }
.journey-heading h4, .journey-heading p { margin: 0 0 8px; }
.journey-mode-controls, .journey-pagination { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.journey-mode-controls [aria-pressed="true"] { border-color: var(--coral-primary); background: var(--coral-pale); }
.journey-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.journey-photo { min-width: 0; border: 1px solid var(--coral-border); border-radius: 12px; padding: 10px; background: var(--coral-surface); overflow-wrap: anywhere; }
#tanksView .journey-photo-select { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 8px; padding: 6px; background: transparent; color: inherit; border: 2px solid transparent; border-radius: 10px; cursor: pointer; text-align: left; }
#tanksView .journey-photo-select[aria-pressed="true"] { border-color: var(--coral-primary); }
.journey-image-frame { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--coral-pale); }
.journey-image-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.journey-image-unavailable { padding: 16px; margin: 0; text-align: center; }
.journey-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.journey-comparison-photo { margin: 0; min-width: 0; }
.journey-comparison-photo figcaption { padding: 10px 0; overflow-wrap: anywhere; }
.journey-pair.is-slider { --journey-frame-height: clamp(200px, 38vw, 400px); position: relative; padding-top: var(--journey-frame-height); }
.journey-pair.is-slider .journey-image-frame { position: absolute; top: 0; left: 0; width: 100%; height: var(--journey-frame-height); aspect-ratio: auto; }
.journey-pair.is-slider .journey-comparison-photo:last-child .journey-image-frame { clip-path: inset(0 0 0 var(--journey-split, 50%)); }
.journey-divider-label { display: grid; gap: 8px; }
.journey-divider-label input { width: 100%; min-height: 44px; accent-color: var(--coral-primary); }
.coral-journey [role="alert"] { border: 1px solid var(--coral-rust); padding: 12px; border-radius: 10px; }
@media (max-width: 600px) {
  .journey-pair:not(.is-slider) { grid-template-columns: minmax(0, 1fr); }
  .journey-heading > button { width: 100%; }
}