:root {
      --bg: #f6f8f5;
      --panel: #ffffff;
      --soft: #eef4ef;
      --field: #ffffff;
      --status-bg: #fafcfb;
      --notice-bg: #eef1f3;
      --row: #ffffff;
      --row-tight: #fff8df;
      --secondary-bg: #e8eeee;
      --secondary-text: #115e59;
      --secondary-line: #d2dddd;
      --table-head-text: #34423c;
      --gauge-bg: #e9eeee;
      --link: #115e59;
      --tracker-col: 92px;
      --route-line: #cfd8d4;
      --route-line-border: #b8c5bf;
      --route-progress: #3b82f6;
      --route-arrow: #6366f1;
      --route-km-bg: #ffffff;
      --route-km-text: #1f2a26;
      --text: #17201c;
      --muted: #65716b;
      --line: #d8e0dc;
      --accent: #0f766e;
      --ok: #166534;
      --ok-bg: #dcfce7;
      --warn: #9a5b00;
      --warn-bg: #fff2cf;
      --bad: #b42318;
      --bad-bg: #fde7e5;
      --blue: #1d4ed8;
      --shadow: 0 12px 28px rgba(23, 32, 28, 0.08);
    }

    :root[data-theme="dark"] {
      color-scheme: dark;
      --bg: #0e1513;
      --panel: #17211f;
      --soft: #1f2d29;
      --field: #101917;
      --status-bg: #101917;
      --notice-bg: #15201d;
      --row: #141d1b;
      --row-tight: #2d2615;
      --secondary-bg: #1d2d2a;
      --secondary-text: #92e2d5;
      --secondary-line: #324541;
      --table-head-text: #c9d8d3;
      --gauge-bg: #25322f;
      --link: #7dd3c7;
      --route-line: #52615d;
      --route-line-border: #42514d;
      --route-progress: #60a5fa;
      --route-arrow: #8b8cf6;
      --route-km-bg: #0f1816;
      --route-km-text: #edf5f2;
      --text: #edf5f2;
      --muted: #a7b7b2;
      --line: #30413d;
      --accent: #2dd4bf;
      --ok: #86efac;
      --ok-bg: #14351f;
      --warn: #facc15;
      --warn-bg: #3c2e12;
      --bad: #fca5a5;
      --bad-bg: #3d1816;
      --shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: Arial, Helvetica, sans-serif;
      letter-spacing: 0;
      overflow-x: hidden;
    }

    a {
      color: var(--link);
    }

    .wrap {
      width: min(1200px, calc(100% - 28px));
      max-width: 100%;
      margin: 0 auto;
    }

    header {
      background: var(--panel);
      border-bottom: 1px solid var(--line);
    }

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 0 14px;
    }

    h1 {
      margin: 0;
      font-size: clamp(22px, 4vw, 34px);
      line-height: 1.1;
    }

    .subtitle {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
      max-width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--muted);
      background: var(--status-bg);
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .global-route-status {
      display: grid;
      gap: 3px;
      min-width: 168px;
      max-width: 240px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--status-bg);
    }

    .global-route-status span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .global-route-status small {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.25;
    }

    .language-switcher {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--status-bg);
    }

    .lang-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 30px;
      min-width: 34px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid transparent;
      color: var(--muted);
      background: transparent;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .lang-btn.active {
      color: var(--accent);
      border-color: var(--secondary-line);
      background: var(--secondary-bg);
    }

    .global-controls {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      padding: 0 0 16px;
    }

    .global-controls label,
    .global-actions,
    .global-status {
      min-width: 0;
      padding: 10px 11px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .local-direction-control {
      display: none !important;
    }

    .hidden {
      display: none !important;
    }

    .global-actions {
      display: flex;
      align-items: end;
      gap: 8px;
    }

    .global-actions button {
      flex: 1;
      min-height: 42px;
    }

    .global-status {
      grid-column: 1 / -1;
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .theme-button {
      min-height: 38px;
      color: var(--secondary-text);
      background: var(--secondary-bg);
      border: 1px solid var(--secondary-line);
    }

    main {
      padding: 18px 0 28px;
    }

    .app-main {
      padding-left: 84px;
    }

    .side-tabs {
      position: fixed;
      z-index: 20;
      top: 168px;
      left: 12px;
      display: grid;
      gap: 8px;
      width: 68px;
    }

    .side-tab {
      min-height: 58px;
      padding: 7px 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--muted);
      background: var(--panel);
      box-shadow: var(--shadow);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.1;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .side-tab.active {
      color: #fff;
      background: var(--accent);
      border-color: var(--accent);
    }

    .view {
      display: none;
    }

    .view.active {
      display: block;
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(8, minmax(90px, 1fr));
      gap: 12px;
      align-items: end;
      padding: 14px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .settings-disclosure {
      margin: 0 0 12px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .settings-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      min-height: 48px;
      padding: 10px 13px;
      color: var(--text);
      cursor: pointer;
      list-style: none;
    }

    .settings-summary::-webkit-details-marker {
      display: none;
    }

    .settings-summary span {
      font-size: 13px;
      font-weight: 900;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .settings-summary small {
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
    }

    .settings-summary::after {
      content: "+";
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      width: 26px;
      height: 26px;
      margin-left: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--text);
      background: var(--soft);
      font-size: 18px;
      font-weight: 900;
      line-height: 1;
    }

    .settings-disclosure[open] .settings-summary::after {
      content: "-";
    }

    .settings-disclosure > .controls {
      border: 0;
      border-top: 1px solid var(--line);
      border-radius: 0;
      box-shadow: none;
    }

    .notice-controls {
      grid-template-columns: repeat(6, minmax(120px, 1fr));
    }

    .notice-controls .tracker-inline-status,
    .notice-source-links {
      grid-column: 1 / -1;
    }

    label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    input,
    select,
    button {
      min-height: 42px;
      border-radius: 8px;
      font: inherit;
    }

    input,
    select {
      width: 100%;
      min-width: 0;
      border: 1px solid var(--line);
      color: var(--text);
      background: var(--field);
      padding: 9px 10px;
    }

    .global-controls label > span,
    .controls label > span {
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .global-controls select,
    .controls select {
      font-size: clamp(11px, 2.4vw, 13px);
    }

    button {
      border: 0;
      background: var(--accent);
      color: #fff;
      padding: 0 14px;
      font-weight: 800;
      cursor: pointer;
    }

    button.secondary {
      color: var(--secondary-text);
      background: var(--secondary-bg);
      border: 1px solid var(--secondary-line);
    }

    button:disabled {
      opacity: 0.72;
      cursor: progress;
    }

    .actions {
      grid-column: span 2;
      display: flex;
      gap: 8px;
    }

    .summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin: 14px 0;
    }

    .metric {
      min-width: 0;
      min-height: 96px;
      padding: 13px 14px;
      overflow: hidden;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .metric span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .metric strong {
      display: block;
      max-width: 100%;
      margin-top: 8px;
      font-size: clamp(24px, 4vw, 34px);
      line-height: 1;
      overflow-wrap: anywhere;
    }

    .metric small {
      display: block;
      max-width: 100%;
      margin-top: 7px;
      color: var(--muted);
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .notices-summary .metric strong {
      font-size: 22px;
      line-height: 1.15;
    }

    .notices-summary .metric small {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    .notice {
      display: none;
      margin: 0 0 14px;
      padding: 11px 13px;
      border-radius: 8px;
      border: 1px solid var(--line);
      color: var(--muted);
      background: var(--notice-bg);
      line-height: 1.4;
    }

    .notice.show {
      display: block;
    }

    .tracker-inline-status {
      grid-column: 1 / -1;
      margin: -2px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .active-gauges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: baseline;
    }

    .active-gauges strong {
      color: var(--text);
    }

    .gauge-picker {
      grid-column: 1 / -1;
      min-width: 0;
      padding: 10px 11px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--status-bg);
    }

    .gauge-picker-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      cursor: pointer;
      list-style: none;
    }

    .gauge-picker-title::-webkit-details-marker {
      display: none;
    }

    .gauge-picker[open] .gauge-picker-title {
      margin-bottom: 8px;
    }

    .gauge-picker-toggle::before {
      content: "+";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--text);
      background: var(--panel);
      font-size: 18px;
      line-height: 1;
    }

    .gauge-picker[open] .gauge-picker-toggle::before {
      content: "-";
    }

    .gauge-checklist {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
      min-width: 0;
    }

    .gauge-check {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      min-height: 38px;
      padding: 7px 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--text);
      font-size: 12px;
      font-weight: 800;
      text-transform: none;
      overflow-wrap: anywhere;
    }

    .gauge-check input {
      width: auto;
      min-width: 18px;
      min-height: 18px;
    }

    td.name-cell,
    th.name-heading {
      position: sticky;
      left: 0;
      z-index: 2;
      min-width: 230px;
      max-width: 330px;
      text-align: left;
      background: inherit;
      box-shadow: 1px 0 0 var(--line);
      white-space: normal;
    }

    th.name-heading {
      z-index: 4;
      background: var(--soft);
    }

    .locks-table td.name-cell,
    .locks-table th.name-heading {
      left: 0;
    }

    .water-table th:first-child,
    .water-table td.water-name-cell {
      position: sticky;
      left: 0;
      z-index: 2;
      min-width: 260px;
      max-width: 390px;
      text-align: left;
      background: inherit;
      box-shadow: 1px 0 0 var(--line);
      white-space: normal;
    }

    .water-table th:first-child {
      z-index: 4;
      background: var(--soft);
    }

    .table-shell {
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .table-scroll {
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    table {
      width: 100%;
      min-width: 1240px;
      border-collapse: collapse;
    }

    .bridge-table:not(.data-table) {
      min-width: 1960px;
    }

    .bridge-table th:nth-child(5),
    .bridge-table td:nth-child(5) {
      width: 280px;
      min-width: 280px;
    }

    .bridge-table th:nth-child(6),
    .bridge-table td:nth-child(6) {
      width: 280px;
      min-width: 280px;
    }

    .bridge-table th:nth-child(9),
    .bridge-table td:nth-child(9) {
      width: 220px;
      min-width: 220px;
    }

    .data-table {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      table-layout: fixed;
      border-collapse: collapse;
    }

    .compact-table-wrap,
    .table-scroll:has(.data-table) {
      overflow-x: hidden;
    }

    .data-table th,
    .data-table td {
      min-width: 0;
      padding: 7px 10px;
      font-size: 13px;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .data-table th {
      white-space: nowrap;
    }

    .data-table td {
      white-space: normal;
    }

    .data-table .nowrap,
    .data-table .col-km,
    .data-table .col-level,
    .data-table .col-clearance,
    .data-table .col-depth,
    .data-table .col-margin,
    .data-table .col-surplus,
    .data-table .col-status,
    .data-table .col-time,
    .data-table .col-details {
      white-space: nowrap;
    }

    .data-table td.wrap,
    .data-table td.col-name,
    .data-table td.col-bridge,
    .data-table td.col-gauge,
    .data-table td.col-source,
    .data-table td.col-forecast {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
    }

    .data-table th.wrap,
    .data-table th.col-name,
    .data-table th.col-bridge,
    .data-table th.col-gauge,
    .data-table th.col-source,
    .data-table th.col-forecast {
      white-space: normal;
      overflow-wrap: anywhere;
      text-overflow: clip;
    }

    .cell-main-text {
      display: -webkit-box;
      overflow: hidden;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .cell-sub-text {
      display: -webkit-box;
      overflow: hidden;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
      opacity: 0.75;
      font-size: 11px;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .bridge-table.data-table td.col-bridge .cell-main-text {
      -webkit-line-clamp: 3;
    }

    .bridge-table.data-table td.col-bridge .cell-sub-text,
    .water-table.data-table td.col-gauge .cell-sub-text {
      -webkit-line-clamp: 2;
    }

    .source-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      min-height: 24px;
      padding: 3px 7px;
      border: 1px solid var(--secondary-line);
      border-radius: 999px;
      color: var(--secondary-text);
      background: var(--secondary-bg);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.1;
      text-decoration: none;
      white-space: nowrap;
    }

    .source-chip.neutral,
    .source-chip.muted-chip {
      color: var(--muted);
      background: var(--status-bg);
    }

    .bridge-table.data-table,
    .water-table.data-table {
      min-width: 0;
    }

    .bridge-table.data-table th.name-heading,
    .bridge-table.data-table td.name-cell,
    .water-table.data-table th:first-child,
    .water-table.data-table td.water-name-cell {
      position: static;
      min-width: 0;
      max-width: none;
      box-shadow: none;
      white-space: normal;
    }

    .bridge-table.data-table th:nth-child(1),
    .bridge-table.data-table td:nth-child(1) { width: 22%; }
    .bridge-table.data-table th:nth-child(2),
    .bridge-table.data-table td:nth-child(2) { width: 8%; }
    .bridge-table.data-table th:nth-child(3),
    .bridge-table.data-table td:nth-child(3) { width: 14%; }
    .bridge-table.data-table th:nth-child(4),
    .bridge-table.data-table td:nth-child(4) { width: 13%; }
    .bridge-table.data-table th:nth-child(5),
    .bridge-table.data-table td:nth-child(5) { width: 12%; }
    .bridge-table.data-table th:nth-child(6),
    .bridge-table.data-table td:nth-child(6) { width: 12%; }
    .bridge-table.data-table th:nth-child(7),
    .bridge-table.data-table td:nth-child(7) { width: 12%; }
    .bridge-table.data-table th:nth-child(8),
    .bridge-table.data-table td:nth-child(8) { width: 7%; }

    .water-table.data-table th:nth-child(1),
    .water-table.data-table td:nth-child(1) { width: 19%; }
    .water-table.data-table th:nth-child(2),
    .water-table.data-table td:nth-child(2) { width: 11%; }
    .water-table.data-table th:nth-child(3),
    .water-table.data-table td:nth-child(3) { width: 13%; }
    .water-table.data-table th:nth-child(4),
    .water-table.data-table td:nth-child(4) { width: 12%; }
    .water-table.data-table th:nth-child(5),
    .water-table.data-table td:nth-child(5) { width: 12%; }
    .water-table.data-table th:nth-child(6),
    .water-table.data-table td:nth-child(6) { width: 13%; }
    .water-table.data-table th:nth-child(7),
    .water-table.data-table td:nth-child(7) { width: 10%; }
    .water-table.data-table th:nth-child(8),
    .water-table.data-table td:nth-child(8) { width: 10%; }

    .decision-row {
      cursor: pointer;
    }

    .decision-row.is-expanded {
      background: color-mix(in srgb, var(--soft) 64%, var(--row));
    }

    .table-detail-toggle {
      width: 100%;
      min-width: 0;
      min-height: 30px;
      padding: 4px 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--secondary-bg);
      color: var(--secondary-text);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.1;
      cursor: pointer;
    }

    .details-row[hidden] {
      display: none;
    }

    .data-table .details-row td {
      padding: 0;
      text-align: left;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      background: color-mix(in srgb, var(--soft) 52%, var(--panel));
    }

    .details-panel {
      padding: 12px 14px;
      border-top: 1px solid var(--line);
      background: color-mix(in srgb, var(--soft) 48%, var(--panel));
    }

    .details-section {
      margin: 0 0 11px;
    }

    .details-section:last-child {
      margin-bottom: 0;
    }

    .details-section-title {
      margin: 0 0 7px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .details-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      align-items: start;
      margin: 0;
      white-space: normal;
      overflow: visible;
    }

    .result-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .result-strip > div,
    .detail-mini {
      min-width: 0;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: color-mix(in srgb, var(--panel) 88%, var(--soft));
    }

    .result-strip span,
    .detail-mini .label {
      display: block;
      color: var(--muted);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.15;
      text-transform: uppercase;
    }

    .result-strip strong,
    .detail-mini .value {
      display: block;
      min-width: 0;
      margin-top: 3px;
      color: var(--text);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.22;
      overflow-wrap: anywhere;
    }

    .result-strip .badge {
      width: fit-content;
    }

    .details-grid.compact {
      gap: 8px;
    }

    .details-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
      align-self: start;
      min-width: 0;
      min-height: 54px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: color-mix(in srgb, var(--panel) 88%, var(--soft));
    }

    .details-item--wide {
      grid-column: span 2;
    }

    .details-label {
      color: var(--muted);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.15;
      text-transform: uppercase;
    }

    .details-value {
      min-width: 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.22;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .details-note {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.25;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .details-panel .source-chip,
    .details-panel .euris-link,
    .details-panel .badge,
    .details-panel .delta {
      font-size: 11px;
      line-height: 1.15;
    }

    .details-panel .source-chip,
    .details-panel .euris-link,
    .details-panel .badge {
      min-height: 22px;
      padding: 3px 7px;
    }

    .calculation-text {
      max-width: 900px;
      margin: 0 0 7px;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
    }

    .formula-line {
      display: inline-block;
      max-width: 100%;
      padding: 5px 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--text);
      background: color-mix(in srgb, var(--panel) 80%, var(--soft));
      font-size: 12px;
      font-weight: 800;
      line-height: 1.3;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .calculation-notes {
      display: grid;
      gap: 3px;
      max-width: 920px;
      margin: 8px 0 0;
      padding: 0;
      list-style: none;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.3;
    }

    .details-kv {
      display: grid;
      grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
      gap: 6px 12px;
      margin: 0;
      color: var(--text);
      font-size: 12px;
      line-height: 1.35;
    }

    .details-kv dt {
      color: var(--muted);
      font-weight: 900;
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 0.03em;
    }

    .details-kv dd {
      min-width: 0;
      margin: 0;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .details-row td,
    .details-grid,
    .details-grid * {
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
    }

    @media (max-width: 1200px) {
      .result-strip,
      .details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      .result-strip,
      .details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .details-item--wide {
        grid-column: span 1;
      }

      .details-kv {
        grid-template-columns: 1fr;
      }
    }

    th,
    td {
      padding: 10px 11px;
      border-bottom: 1px solid var(--line);
      text-align: right;
      white-space: nowrap;
      vertical-align: middle;
    }

    th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--soft);
      color: var(--table-head-text);
      font-size: 12px;
      text-transform: uppercase;
    }

    tbody tr {
      background: var(--row);
    }

    tbody tr.row-tight {
      background: var(--row-tight);
    }

    .name {
      display: grid;
      gap: 2px;
    }

    .name strong {
      font-size: 14px;
    }

    .name small,
    .muted {
      color: var(--muted);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 88px;
      padding: 5px 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .badge.ok {
      color: var(--ok);
      background: var(--ok-bg);
    }

    .badge.warn {
      color: var(--warn);
      background: var(--warn-bg);
    }

    .badge.bad {
      color: var(--bad);
      background: var(--bad-bg);
    }

    .badge.critical {
      color: #fff;
      background: linear-gradient(135deg, #050505 0 45%, #991b1b 45% 100%);
      box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.5);
    }

    .badge.unknown {
      color: var(--muted);
      background: var(--notice-bg);
    }

    .badge.neutral {
      color: var(--muted);
      background: var(--notice-bg);
    }

    .badge.info {
      color: var(--blue);
      background: color-mix(in srgb, var(--blue) 14%, var(--panel));
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: 100%;
      min-height: 28px;
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .status-badge.ok {
      color: var(--ok);
      background: var(--ok-bg);
      border-color: color-mix(in srgb, var(--ok) 35%, transparent);
    }

    .status-badge.watch {
      color: var(--warn);
      background: var(--warn-bg);
      border-color: color-mix(in srgb, var(--warn) 35%, transparent);
    }

    .status-badge.limit {
      color: #7c2d12;
      background: #ffedd5;
      border-color: #fed7aa;
    }

    :root[data-theme="dark"] .status-badge.limit {
      color: #fdba74;
      background: #431407;
      border-color: #7c2d12;
    }

    .status-badge.no-go {
      color: #fff;
      background: linear-gradient(135deg, #111827 0 42%, #991b1b 42% 100%);
      border-color: rgba(248, 113, 113, 0.55);
    }

    .status-badge.incomplete,
    .status-badge.info {
      color: var(--muted);
      background: var(--notice-bg);
      border-color: var(--line);
    }

    .badge.euris {
      color: var(--ok);
      background: var(--ok-bg);
    }

    .euris-link {
      width: fit-content;
      min-width: 0;
      color: var(--blue);
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 2px;
      overflow-wrap: anywhere;
    }

    .source-cell {
      display: grid;
      justify-items: end;
      gap: 6px;
      min-width: 0;
    }

    .source-euris-link,
    .official-data-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 8px 11px;
      border: 1px solid color-mix(in srgb, var(--blue) 55%, var(--line));
      border-radius: 8px;
      background: color-mix(in srgb, var(--blue) 18%, var(--panel));
      color: var(--blue);
      font-size: 14px;
      font-weight: 900;
      line-height: 1.15;
      text-decoration: none;
      text-align: center;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 12%, transparent);
    }

    .source-euris-link:hover,
    .official-data-link:hover {
      background: color-mix(in srgb, var(--blue) 25%, var(--panel));
      border-color: var(--blue);
    }

    .official-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin: 10px 0;
    }

    .delta.positive {
      color: var(--ok);
      font-weight: 800;
    }

    .delta.negative {
      color: var(--bad);
      font-weight: 800;
    }

    .delta.warning {
      color: var(--warn);
      font-weight: 900;
    }

    .delta.critical {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 7px;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, #050505 0 46%, #7f1d1d 46% 100%);
      font-weight: 900;
      box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.45);
    }

    .water-value.plain,
    .water-value.plain .delta {
      color: var(--muted);
      font-weight: 500;
    }

    .water-official-meta {
      display: grid;
      gap: 6px;
      min-width: 0;
      max-width: 100%;
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .water-official-meta strong {
      color: var(--text);
      font-size: inherit;
      line-height: inherit;
    }

    .water-chart-open {
      width: fit-content;
      min-height: 34px;
      max-width: 100%;
      padding: 6px 10px;
      border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
      border-radius: 8px;
      color: #d8fff7;
      background: color-mix(in srgb, var(--accent) 34%, #0b2235);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.1;
      white-space: normal;
      text-align: left;
    }

    .water-chart-open:disabled {
      color: var(--muted);
      background: var(--secondary-bg);
      border-color: var(--secondary-line);
      cursor: not-allowed;
    }

    .official-chart-preview {
      min-width: 0;
      max-width: 100%;
    }

    .water-chart-preview-row td {
      padding: 14px 22px 20px;
      text-align: left;
      background: color-mix(in srgb, var(--panel) 86%, var(--soft));
    }

    .official-chart-preview summary {
      min-height: 38px;
      color: var(--secondary-text);
      cursor: pointer;
      font-weight: 900;
    }

    .official-chart-frame {
      min-width: 0;
      width: min(760px, 100%);
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .official-chart-preview img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      margin-top: 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .checkline {
      min-height: 42px;
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--text);
      font-weight: 800;
      text-transform: none;
    }

    .checkline input {
      width: 18px;
      min-height: 18px;
      height: 18px;
      accent-color: var(--accent);
    }

    tbody tr.row-best {
      background: color-mix(in srgb, var(--ok-bg) 42%, var(--row));
    }

    tbody tr.row-water-warn {
      background: color-mix(in srgb, var(--warn-bg) 54%, var(--row));
    }

    tbody tr.row-water-bad {
      background: color-mix(in srgb, var(--bad-bg) 54%, var(--row));
    }

    tbody tr.row-water-critical {
      background: linear-gradient(90deg, color-mix(in srgb, #050505 18%, var(--row)) 0%, color-mix(in srgb, #7f1d1d 48%, var(--row)) 100%);
    }

    .water-table:not(.data-table) {
      min-width: 1380px;
    }

    .locks-table {
      min-width: 1220px;
    }

    .lock-name {
      display: grid;
      gap: 4px;
      min-width: 210px;
      text-align: left;
      white-space: normal;
    }

    .lock-name strong {
      font-size: 14px;
    }

    .lock-chambers {
      display: grid;
      gap: 6px;
      min-width: 0;
      max-width: 100%;
      text-align: left;
      white-space: normal;
    }

    .lock-chamber {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      min-width: 0;
      max-width: 100%;
      padding: 7px 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
      font-size: 12px;
      overflow-wrap: anywhere;
    }

    .lock-chamber.ok {
      border-color: color-mix(in srgb, var(--ok) 42%, var(--line));
      background: color-mix(in srgb, var(--ok-bg) 36%, var(--soft));
    }

    .lock-chamber.warn {
      border-color: color-mix(in srgb, var(--warn) 48%, var(--line));
      background: color-mix(in srgb, var(--warn-bg) 48%, var(--soft));
    }

    .lock-chamber.bad {
      border-color: color-mix(in srgb, var(--bad) 52%, var(--line));
      background: color-mix(in srgb, var(--bad-bg) 50%, var(--soft));
    }

    .lock-chamber.unknown {
      opacity: 0.86;
    }

    .lock-chamber-name {
      display: grid;
      gap: 2px;
      min-width: 0;
      font-weight: 800;
    }

    .lock-chamber-name small {
      color: var(--muted);
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .chamber-state {
      align-self: start;
      padding: 4px 7px;
      border-radius: 8px;
      white-space: nowrap;
      font-weight: 800;
    }

    .lock-chamber.ok .chamber-state {
      color: var(--ok);
      background: var(--ok-bg);
    }

    .lock-chamber.warn .chamber-state {
      color: var(--warn);
      background: var(--warn-bg);
    }

    .lock-chamber.bad .chamber-state {
      color: var(--bad);
      background: var(--bad-bg);
    }

    .lock-chamber.unknown .chamber-state {
      color: var(--muted);
      background: var(--notice-bg);
    }

    .lock-chamber-detail {
      grid-column: 1 / -1;
      color: var(--muted);
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .vhf {
      color: var(--accent);
      font-size: 18px;
      font-weight: 900;
    }

    .status-block {
      display: grid;
      gap: 6px;
      min-width: 190px;
      max-width: 280px;
      text-align: left;
      white-space: normal;
    }

    .lock-links {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
      max-width: 100%;
      justify-content: flex-end;
    }

    .lock-links a {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 7px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--secondary-text);
      background: var(--secondary-bg);
      font-size: 12px;
      font-weight: 800;
      text-decoration: none;
    }

    .route-controls {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .route-hero {
      display: grid;
      grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1.6fr);
      gap: 14px;
      margin: 14px 0;
      min-width: 0;
    }

    .route-hero-status,
    .route-hero-grid > div,
    .dashboard-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .route-hero-status {
      display: grid;
      align-content: center;
      gap: 8px;
      min-width: 0;
      min-height: 148px;
      padding: 18px;
      border-left: 6px solid var(--muted);
    }

    .route-hero-status strong {
      font-size: clamp(32px, 4vw, 46px);
      line-height: 0.95;
      overflow-wrap: normal;
      word-break: normal;
    }

    .route-hero-status strong.ok {
      color: var(--ok);
    }

    .route-hero-status strong.watch,
    .route-hero-status strong.incomplete {
      color: var(--warn);
    }

    .route-hero-status strong.limit {
      color: #c2410c;
    }

    .route-hero-status strong.no-go {
      color: var(--bad);
    }

    .route-hero-status:has(strong.ok) {
      border-left-color: var(--ok);
    }

    .route-hero-status:has(strong.watch),
    .route-hero-status:has(strong.incomplete) {
      border-left-color: var(--warn);
    }

    .route-hero-status:has(strong.limit) {
      border-left-color: #c2410c;
    }

    .route-hero-status:has(strong.no-go) {
      border-left-color: var(--bad);
    }

    .eyebrow,
    .route-hero-grid span,
    .dashboard-card header span,
    .dashboard-card dt {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .route-hero-status small {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.35;
    }

    .route-hero-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      min-width: 0;
    }

    .route-hero-grid > div {
      display: grid;
      align-content: center;
      gap: 8px;
      min-width: 0;
      min-height: 108px;
      padding: 13px;
    }

    .route-hero-grid strong {
      font-size: clamp(16px, 1.8vw, 21px);
      line-height: 1.05;
      overflow-wrap: normal;
      word-break: normal;
    }

    #routeSummaryDirection {
      font-size: clamp(15px, 1.25vw, 18px);
      line-height: 1.18;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      min-width: 0;
      margin: 0 0 14px;
    }

    .dashboard-card {
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
      min-width: 0;
      min-height: 250px;
      padding: 14px;
    }

    .dashboard-card header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .dashboard-card dl {
      display: grid;
      gap: 10px;
      margin: 0;
      min-width: 0;
    }

    .dashboard-card dl div {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .dashboard-compact-list {
      align-content: start;
    }

    .dashboard-compact-list dd {
      font-size: 14px;
      line-height: 1.35;
    }

    .dashboard-card dd {
      margin: 0;
      color: var(--text);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .dashboard-card .dashboard-compact-list dd {
      font-size: 14px;
      line-height: 1.35;
    }

    .card-diagnostic {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .source-mode-badge {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      min-height: 26px;
      padding: 4px 7px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: var(--status-bg);
      font-size: 11px;
      font-weight: 900;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .source-mode-badge.ok {
      color: var(--ok);
      background: var(--ok-bg);
    }

    .source-mode-badge.fallback {
      color: var(--muted);
      background: var(--status-bg);
    }

    .source-mode-badge.stale,
    .source-mode-badge.loading {
      color: var(--warn);
      background: var(--warn-bg);
    }

    .notice-diagnostics {
      grid-column: 1 / -1;
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .notice-diagnostics summary {
      cursor: pointer;
      font-weight: 900;
      text-transform: uppercase;
    }

    .notice-diagnostics dl {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      margin: 8px 0 0;
    }

    .notice-diagnostics div {
      display: grid;
      gap: 3px;
      min-width: 0;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--status-bg);
    }

    .notice-diagnostics dt {
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .notice-diagnostics dd {
      margin: 0;
      color: var(--text);
      font-weight: 900;
      overflow-wrap: anywhere;
    }

    .source-mode-badge.error {
      color: var(--bad);
      background: var(--bad-bg);
    }

    .dashboard-link {
      width: 100%;
      min-height: 38px;
    }

    .route-panels {
      display: grid;
      gap: 14px;
      min-width: 0;
      max-width: 100%;
      margin-top: 14px;
    }

    .route-dashboard-panels {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .route-panel {
      min-width: 0;
      max-width: 100%;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
      overflow-wrap: anywhere;
    }

    .route-panel h2 {
      margin: 0 0 10px;
      font-size: 16px;
    }

    .sources-disclaimer summary {
      color: var(--text);
      cursor: pointer;
      font-size: 16px;
      font-weight: 900;
    }

    .sources-disclaimer[open] summary {
      margin-bottom: 12px;
    }

    .sources-disclaimer p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .route-sketch-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      min-width: 0;
    }

    .route-sketch-head h2 {
      min-width: 0;
      margin: 0;
    }

    .route-map-controls {
      display: inline-flex;
      flex: 0 0 auto;
      gap: 6px;
      align-items: center;
    }

    .route-map-controls button {
      min-width: 42px;
      min-height: 34px;
      padding: 6px 9px;
      border-radius: 8px;
      font-size: 14px;
    }

    .route-map-controls button.active {
      color: #fff;
      background: var(--accent);
      border-color: var(--accent);
    }

    .eta-controls .eta-day-choice {
      grid-column: span 3;
      min-width: 260px;
    }

    .eta-controls .eta-port-control {
      grid-column: span 2;
    }

    .eta-extra-ports {
      grid-column: span 2;
      min-width: 240px;
      padding: 10px 11px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .eta-extra-ports summary {
      display: grid;
      gap: 3px;
      min-height: 42px;
      align-content: center;
      color: var(--text);
      cursor: pointer;
      list-style: none;
    }

    .eta-extra-ports summary::-webkit-details-marker {
      display: none;
    }

    .eta-extra-ports summary span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .eta-extra-ports summary small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
    }

    .eta-extra-port-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .eta-controls .eta-time-control {
      grid-column: span 2;
    }

    .picker-native-select {
      position: absolute;
      width: 1px;
      height: 1px;
      min-height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      opacity: 0;
      pointer-events: none;
    }

    .picker-trigger {
      display: grid;
      justify-items: start;
      width: 100%;
      min-height: 64px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      color: var(--text);
      background: var(--field);
      text-align: left;
      line-height: 1.2;
    }

    .picker-trigger span {
      font-size: 18px;
      font-weight: 900;
      overflow-wrap: anywhere;
    }

    .picker-trigger small {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .eta-day-choice {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      min-width: 0;
      min-inline-size: 0;
      margin: 0;
      padding: 10px 11px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .eta-day-choice legend {
      grid-column: 1 / -1;
      float: left;
      width: 100%;
      margin: 0 0 6px;
      padding: 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .eta-day-choice .checkline {
      min-width: 0;
      white-space: nowrap;
    }

    .eta-day-choice .checkline span {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .eta-result-panel {
      margin-top: 14px;
    }

    .eta-position-panel,
    .eta-diagnostics-panel {
      margin-top: 14px;
    }

    .eta-position-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      min-width: 0;
      margin-bottom: 12px;
    }

    .eta-position-head h2,
    .eta-diagnostics-panel h2 {
      margin: 0 0 6px;
    }

    .eta-position-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .eta-position-actions button {
      min-height: 38px;
    }

    .eta-manual-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .eta-diagnostics-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      margin: 0;
    }

    .eta-diagnostics-grid div {
      min-width: 0;
      padding: 10px 11px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: color-mix(in srgb, var(--panel) 88%, var(--soft));
    }

    .eta-diagnostics-grid dt {
      margin: 0 0 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .eta-diagnostics-grid dd {
      margin: 0;
      color: var(--text);
      font-size: 14px;
      font-weight: 900;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    body.picker-open {
      overflow: hidden;
    }

    .picker-sheet[hidden] {
      display: none;
    }

    .picker-sheet {
      position: fixed;
      z-index: 80;
      inset: 0;
      display: grid;
      place-items: end center;
      padding: 16px;
    }

    .picker-backdrop {
      position: absolute;
      inset: 0;
      min-height: 0;
      padding: 0;
      border-radius: 0;
      background: rgba(0, 0, 0, 0.42);
    }

    .picker-panel {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
      width: min(560px, 100%);
      max-height: min(720px, 86vh);
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--panel);
      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
      overflow: hidden;
    }

    .picker-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
    }

    .picker-head h2 {
      margin: 0;
      font-size: 20px;
      line-height: 1.2;
    }

    .picker-selected {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
    }

    .picker-search-label {
      gap: 7px;
    }

    .picker-search-label input {
      min-height: 52px;
      font-size: 17px;
    }

    .picker-list {
      display: grid;
      gap: 8px;
      min-height: 0;
      max-height: 48vh;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 2px;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .picker-list-empty {
      padding: 14px 12px;
      color: var(--muted);
      font-weight: 800;
    }

    .picker-option {
      display: grid;
      gap: 3px;
      width: 100%;
      min-height: 58px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      color: var(--text);
      background: var(--field);
      text-align: left;
    }

    .picker-option strong {
      font-size: 16px;
      line-height: 1.2;
    }

    .picker-option small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .picker-option.selected {
      border-color: var(--accent);
      background: var(--secondary-bg);
      color: var(--secondary-text);
    }

    .picker-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding-top: 2px;
    }

    .picker-actions button {
      min-width: 128px;
      min-height: 52px;
    }

    .picker-panel-time {
      width: min(460px, 100%);
    }

    .time-picker-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      min-height: 0;
    }

    .time-picker-label {
      display: block;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .time-picker-wheel {
      display: grid;
      gap: 8px;
      height: 312px;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 2px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
      scroll-snap-type: y mandatory;
      touch-action: pan-y;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .time-picker-option {
      width: 100%;
      min-height: 54px;
      padding: 0 10px;
      border: 1px solid transparent;
      color: var(--text);
      background: var(--field);
      font-size: 24px;
      font-weight: 900;
      scroll-snap-align: center;
    }

    .time-picker-option.selected {
      border-color: var(--accent);
      color: var(--secondary-text);
      background: var(--secondary-bg);
    }

    .route-sketch {
      min-width: 0;
      max-width: 100%;
      margin-top: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #858583;
      touch-action: none;
      cursor: grab;
    }

    .route-sketch.dragging {
      cursor: grabbing;
    }

    .route-sketch svg {
      display: block;
      width: 100%;
      max-width: 100%;
      height: min(72vh, 760px);
      min-height: 430px;
      background: #858583;
    }

    .route-line-base {
      fill: none;
      stroke: rgba(255, 255, 255, 0.94);
      stroke-width: 9;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .route-line-progress {
      fill: none;
      stroke: #60a5fa;
      stroke-width: 10;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.82;
      vector-effect: non-scaling-stroke;
    }

    .route-port-pin {
      fill: #0f172a;
      stroke: rgba(255, 255, 255, 0.95);
      stroke-width: 2.2;
      vector-effect: non-scaling-stroke;
    }

    .route-port-label {
      fill: #fff;
      paint-order: stroke;
      stroke: rgba(0, 0, 0, 0.34);
      stroke-width: 3px;
      stroke-linejoin: round;
      font-size: 15px;
      font-weight: 850;
    }

    .route-port-km-label {
      fill: rgba(255, 255, 255, 0.82);
      paint-order: stroke;
      stroke: rgba(0, 0, 0, 0.30);
      stroke-width: 2px;
      font-size: 10px;
      font-weight: 750;
    }

    .route-bridge-cross {
      stroke: #111827;
      stroke-width: 3.4;
      stroke-linecap: round;
      opacity: 0.82;
      vector-effect: non-scaling-stroke;
    }

    .route-bridge-label {
      fill: #111827;
      paint-order: stroke;
      stroke: rgba(255, 255, 255, 0.7);
      stroke-width: 3px;
      font-size: 9px;
      font-weight: 850;
    }

    .route-lock-body {
      fill: rgba(15, 23, 42, 0.85);
      stroke: rgba(255, 255, 255, 0.82);
      stroke-width: 1.5;
      vector-effect: non-scaling-stroke;
    }

    .route-lock-chamber {
      stroke: rgba(255, 255, 255, 0.9);
      stroke-width: 1;
      rx: 2;
      vector-effect: non-scaling-stroke;
    }

    .route-lock-chamber.ok {
      fill: #16a34a;
    }

    .route-lock-chamber.warn {
      fill: #facc15;
    }

    .route-lock-chamber.bad {
      fill: #dc2626;
    }

    .route-lock-chamber.unknown {
      fill: #64748b;
    }

    .route-lock-label {
      fill: #fff;
      paint-order: stroke;
      stroke: rgba(0, 0, 0, 0.46);
      stroke-width: 3px;
      font-size: 11px;
      font-weight: 850;
    }

    .route-lock-chamber-label {
      fill: #fff;
      paint-order: stroke;
      stroke: rgba(0, 0, 0, 0.6);
      stroke-width: 2px;
      font-size: 6px;
      font-weight: 850;
    }

    .route-map-arrow.route-map-symbol {
      transform-box: fill-box;
      transform-origin: center;
    }

    .route-map-arrow {
      filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.42));
    }

    .route-map-arrow .arrow-outer {
      fill: #fff;
    }

    .route-map-arrow .arrow-inner {
      fill: #4f46e5;
    }

    .route-map-km {
      fill: #fff;
      paint-order: stroke;
      stroke: rgba(0, 0, 0, 0.5);
      stroke-width: 3px;
      font-size: 12px;
      font-weight: 900;
    }

    .route-city-tracker {
      display: grid;
      gap: 0;
      min-width: 0;
      max-width: 100%;
      margin-top: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: var(--row);
    }

    .route-city-row {
      display: grid;
      grid-template-columns: 62px minmax(0, 1fr) auto;
      min-width: 0;
      min-height: 58px;
      border-bottom: 1px solid var(--line);
      background: var(--row);
    }

    .route-city-row:last-child {
      border-bottom: 0;
    }

    .route-city-row.current {
      background: var(--row-tight);
    }

    .route-city-track {
      position: relative;
      min-height: 58px;
    }

    .route-city-line {
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: 50%;
      width: 8px;
      transform: translateX(-50%);
      background: var(--route-line);
      border-left: 1px solid var(--route-line-border);
      border-right: 1px solid var(--route-line-border);
    }

    .route-city-row.passed .route-city-line {
      background: var(--route-progress);
      border-color: rgba(37, 99, 235, 0.45);
    }

    .route-city-row.current .route-city-line {
      background: linear-gradient(to bottom, var(--route-progress) 0, var(--route-progress) var(--track-fill, 50%), var(--route-line) var(--track-fill, 50%), var(--route-line) 100%);
    }

    .route-city-dot {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      width: 13px;
      height: 13px;
      transform: translate(-50%, -50%);
      border: 2px solid var(--muted);
      border-radius: 999px;
      background: var(--panel);
      box-shadow: 0 0 0 3px var(--row);
    }

    .route-city-row.passed .route-city-dot {
      background: var(--route-progress);
      border-color: var(--route-progress);
    }

    .route-city-arrow {
      position: absolute;
      z-index: 5;
      top: var(--track-fill, 50%);
      left: 50%;
      width: 31px;
      height: 38px;
      transform: translate(-50%, -50%);
      filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.36));
    }

    .route-city-arrow::before,
    .route-city-arrow::after {
      content: "";
      position: absolute;
      inset: 0;
      clip-path: polygon(50% 100%, 8% 7%, 50% 26%, 92% 7%);
    }

    .route-city-arrow::before {
      background: #fff;
    }

    .route-city-arrow::after {
      inset: 4px 6px 5px;
      background: linear-gradient(180deg, #a5b4fc 0%, var(--route-arrow) 72%);
    }

    .route-city-main,
    .route-city-km {
      display: grid;
      align-content: center;
      gap: 3px;
      min-width: 0;
      padding: 9px 10px;
      overflow-wrap: anywhere;
    }

    .route-city-main strong {
      font-size: 14px;
    }

    .route-city-main small,
    .route-city-km {
      color: var(--muted);
      font-size: 12px;
    }

    .route-city-km {
      justify-items: end;
      text-align: right;
    }

    .route-alert-list {
      display: grid;
      gap: 8px;
      min-width: 0;
      max-width: 100%;
    }

    .route-alert {
      display: grid;
      gap: 5px;
      min-width: 0;
      max-width: 100%;
      padding: 10px 11px;
      border: 1px solid var(--line);
      border-left-width: 5px;
      border-radius: 8px;
      background: var(--soft);
      line-height: 1.35;
    }

    .route-alert-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .route-alert-category {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .route-alert strong {
      font-size: 14px;
    }

    .route-alert small {
      color: var(--muted);
    }

    .route-alert-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.3;
    }

    .route-alert-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      justify-self: start;
      min-height: 32px;
      padding: 5px 10px;
      font-size: 12px;
      text-decoration: none;
    }

    .notice-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .route-alert.ok {
      border-left-color: var(--ok);
    }

    .route-alert.warn,
    .route-alert.unknown {
      border-left-color: var(--warn);
    }

    .route-alert.bad {
      border-left-color: var(--bad);
    }

    .route-alert.info {
      border-left-color: var(--blue);
    }

    .notice-list {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .source-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
      max-width: 100%;
    }

    .source-grid a {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 6px 9px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--secondary-text);
      background: var(--secondary-bg);
      font-size: 12px;
      font-weight: 800;
      text-decoration: none;
    }

    .marke-cell {
      display: grid;
      gap: 7px;
      min-width: 0;
      max-width: 100%;
      text-align: left;
    }

    .marke-distances {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
      overflow-wrap: anywhere;
    }

    .marke-distances strong {
      color: var(--text);
      font-size: 12px;
    }

    .water-gauge {
      position: relative;
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      height: 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--gauge-bg);
      overflow: hidden;
    }

    .water-gauge .fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--level, 0%);
      background: var(--fill, #16a34a);
      border-radius: inherit;
    }

    .water-gauge .marker {
      position: absolute;
      top: -2px;
      bottom: -2px;
      left: var(--mark, 0%);
      width: 2px;
      background: var(--text);
      opacity: 0.72;
    }

    .water-state {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      padding: 3px 7px;
      border-radius: 999px;
      color: var(--state-text);
      background: var(--state-bg);
      font-size: 11px;
      font-weight: 800;
    }

    .forecast-trend {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      margin-bottom: 2px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .forecast-trend .arrow {
      display: inline-grid;
      place-items: center;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      color: #fff;
      font-size: 15px;
      line-height: 1;
    }

    .forecast-trend.up {
      color: var(--ok);
    }

    .forecast-trend.up .arrow {
      background: var(--ok);
    }

    .forecast-trend.down {
      color: var(--bad);
    }

    .forecast-trend.down .arrow {
      background: var(--bad);
    }

    .forecast-trend.flat,
    .forecast-trend.unknown {
      color: var(--muted);
    }

    .forecast-trend.flat .arrow,
    .forecast-trend.unknown .arrow {
      background: var(--muted);
    }

    .gauge-labels {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.1;
      overflow-wrap: anywhere;
    }

    .clearance-cell {
      display: grid;
      gap: 6px;
      min-width: 0;
      max-width: 100%;
      text-align: left;
    }

    .rule-cell {
      display: grid;
      gap: 5px;
      min-width: 168px;
      max-width: 270px;
      text-align: left;
      white-space: normal;
      overflow-wrap: normal;
      word-break: normal;
    }

    .rule-cell .badge {
      width: fit-content;
      min-width: 120px;
      max-width: 100%;
      white-space: normal;
      text-align: left;
    }

    .rule-cell small {
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .clearance-cell small {
      font-size: 11px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .clearance-gauge-label {
      display: block;
    }

    .clearance-gauge {
      position: relative;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      height: 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--gauge-bg);
      overflow: hidden;
    }

    .clearance-gauge .fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--level, 0%);
      background: var(--fill, #16a34a);
      border-radius: inherit;
    }

    .footer {
      display: grid;
      gap: 6px;
      padding: 12px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .app-credit-footer {
      display: grid;
      gap: 4px;
      max-width: 720px;
      margin: 18px auto 80px;
      padding: 18px 18px 20px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      text-align: center;
    }

    .app-credit-footer p {
      margin: 0;
    }

    .loader {
      display: inline-block;
      width: 10px;
      height: 10px;
      border: 2px solid rgba(15, 118, 110, 0.25);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.9s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @media (max-width: 960px) {
      .global-controls,
      .controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .route-hero {
        grid-template-columns: 1fr;
      }

      .route-hero-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .route-dashboard-panels {
        grid-template-columns: 1fr;
      }

      .eta-controls .eta-day-choice {
        grid-column: 1 / -1;
      }

      .summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .wrap {
        width: min(calc(100vw - 18px), 1200px);
      }

      .app-main {
        padding-left: 0;
        padding-bottom: 76px;
      }

      .side-tabs {
        top: auto;
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: calc(100vw - 20px);
        transform: none;
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }

      .side-tab {
        min-height: 48px;
        padding: 8px 4px;
        font-size: 11px;
      }

      .top {
        display: grid;
      }

      .top-actions {
        justify-content: stretch;
      }

      .global-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .global-actions,
      .global-status {
        grid-column: 1 / -1;
        width: 100%;
      }

      .theme-button {
        width: 100%;
      }

      .status-pill {
        width: 100%;
      }

      .global-route-status {
        width: 100%;
        max-width: none;
      }

      .controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 11px;
      }

      .route-hero-grid,
      .dashboard-grid {
        grid-template-columns: 1fr;
      }

      .dashboard-card {
        min-height: 0;
      }

      .eta-controls .eta-time-control,
      .eta-controls .eta-port-control,
      .eta-extra-ports,
      .eta-controls .eta-day-choice {
        grid-column: 1 / -1;
      }

      .eta-position-head {
        align-items: stretch;
        flex-direction: column;
      }

      .eta-manual-grid {
        grid-template-columns: 1fr;
      }

      .eta-diagnostics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .picker-sheet {
        padding: 0;
      }

      .picker-panel {
        width: 100%;
        max-height: 88vh;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 16px 16px 0 0;
      }

      .picker-list {
        max-height: 52vh;
      }

      .actions {
        grid-column: 1 / -1;
      }

      .actions button {
        flex: 1;
      }

      .summary {
        grid-template-columns: 1fr;
      }

      .notice-diagnostics dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .route-sketch svg {
        height: 560px;
        min-height: 440px;
      }

      .table-shell {
        background: transparent;
        border: 0;
        box-shadow: none;
      }

      .table-scroll {
        overflow-x: auto;
      }

      table,
      .bridge-table,
      .water-table,
      .locks-table {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      thead {
        display: none;
      }

      tbody,
      td {
        display: block;
      }

      .bridge-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
        margin: 0 0 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: var(--shadow);
      }

      .bridge-table td,
      .water-table td,
      .locks-table td {
        grid-column: auto;
        position: static;
        display: flex;
        justify-content: space-between;
        gap: 14px;
        min-width: 0;
        max-width: 100%;
        text-align: right;
        white-space: normal;
        box-shadow: none;
        padding: 9px 11px;
      }

      .bridge-table.data-table tbody tr > td:nth-child(n),
      .water-table.data-table tbody tr > td:nth-child(n) {
        width: 100%;
      }

      .water-table td,
      .locks-table td {
        display: grid;
        grid-template-columns: minmax(112px, 0.78fr) minmax(0, 1fr);
        align-items: start;
        column-gap: 12px;
      }

      .water-table tbody tr,
      .locks-table tbody tr {
        display: block;
        max-width: 100%;
        margin: 0 0 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: var(--shadow);
      }

      .water-table td,
      .locks-table td {
        grid-column: auto;
      }

      .water-table .water-value,
      .locks-table .status-block,
      .locks-table .lock-chambers,
      .locks-table .lock-links {
        display: block;
        min-width: 0;
        color: var(--text);
        font-weight: 700;
        line-height: 1.28;
        text-align: right;
        overflow-wrap: anywhere;
      }

      .water-table .water-value .muted {
        display: block;
        margin-top: 2px;
        font-weight: 500;
      }

      .water-table .water-value.plain {
        color: var(--muted);
        font-weight: 500;
      }

      .water-table .marke-cell {
        grid-column: 2;
        width: 100%;
        min-width: 0;
      }

      .water-table td[data-label-key="marke"] {
        align-items: stretch;
      }

      .water-table td:first-child {
        background: var(--soft);
      }

      .water-table td.water-name-cell {
        display: block;
        text-align: left;
        background: var(--soft);
        padding: 12px 13px;
      }

      .water-table .water-name-cell .name {
        display: grid;
        width: 100%;
        gap: 3px;
      }

      .water-table .water-name-cell strong {
        display: block;
        color: var(--text);
        font-size: 18px;
        line-height: 1.15;
      }

      .water-table .water-name-cell small {
        display: block;
        color: var(--muted);
        font-size: 13px;
      }

      .water-table .water-official-meta strong {
        color: var(--text);
        font-size: 12px;
        line-height: 1.25;
      }

      .water-table .water-chart-open {
        min-height: 42px;
      }

      .water-table .water-chart-preview-row td {
        display: block;
        padding: 12px;
        text-align: left;
      }

      .water-table .water-chart-preview-row td::before {
        content: "";
        display: none;
      }

      .water-table .official-chart-preview img {
        width: 100%;
      }

      .locks-table td.name-cell {
        display: block;
        text-align: left;
        background: var(--soft);
        padding: 12px 13px;
      }

      .locks-table td.name-cell::before {
        content: "";
      }

      .locks-table .lock-chambers {
        display: grid;
        gap: 8px;
        text-align: left;
      }

      .locks-table .lock-chamber {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
      }

      .locks-table .lock-chamber-name {
        text-align: left;
      }

      .locks-table .chamber-state {
        justify-self: start;
        white-space: normal;
      }

      .locks-table .lock-links {
        display: flex;
        justify-content: flex-start;
      }

      td.name-cell {
        position: static;
        left: auto;
        z-index: auto;
        width: 100%;
        min-width: calc(100vw - 20px);
        max-width: 100%;
        box-sizing: border-box;
        background: var(--soft);
        box-shadow: none;
      }

      .water-table td.water-name-cell {
        width: 100%;
        min-width: calc(100vw - 20px);
        max-width: 100%;
        box-sizing: border-box;
      }

      td::before {
        content: attr(data-label);
        color: var(--muted);
        font-weight: 800;
        font-size: 12px;
        text-transform: uppercase;
        text-align: left;
      }

      td.name-cell::before,
      .water-table td:first-child::before,
      .water-table td.water-name-cell::before {
        content: "";
      }

      .name,
      .clearance-cell,
      .rule-cell,
      .marke-cell,
      .lock-name,
      .lock-chambers,
      .status-block {
        width: 100%;
      }

      .data-table .details-row {
        display: block;
        width: 100%;
        max-width: 100%;
      }

      .data-table .details-row[hidden] {
        display: none;
      }

      .data-table .details-row td {
        display: block;
        width: 100%;
        min-width: calc(100vw - 20px);
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
        text-align: left;
      }

      .data-table .details-row td::before {
        content: "";
        display: none;
      }

      .details-panel {
        width: 100%;
        min-width: calc(100vw - 20px);
        padding: 12px;
        box-sizing: border-box;
      }

      .result-strip,
      .details-grid {
        grid-template-columns: 1fr;
      }

      .details-kv {
        grid-template-columns: 1fr;
      }

      .details-item {
        min-height: 0;
        padding: 9px 10px;
      }

      .lock-links {
        justify-content: flex-start;
      }
    }

    @media (max-width: 480px) {
      .global-controls,
      .controls {
        grid-template-columns: 1fr;
      }

      .wrap {
        width: min(calc(100vw - 18px), 372px);
      }

      .app-main {
        padding-bottom: 126px;
      }

      .side-tabs {
        left: 50%;
        right: auto;
        width: min(calc(100vw - 20px), 370px);
        transform: translateX(-50%);
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .global-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .global-actions button {
        width: 100%;
      }

      .route-hero-status {
        min-height: 128px;
      }

      .route-hero-status strong {
        font-size: 36px;
      }

      .notice-diagnostics dl {
        grid-template-columns: 1fr;
      }

      .actions {
        grid-column: auto;
      }

      .checkline {
        grid-column: auto;
      }

      .eta-controls .eta-port-control,
      .eta-controls .eta-time-control,
      .eta-extra-ports,
      .eta-controls .eta-day-choice {
        grid-column: auto;
      }

      .eta-day-choice {
        grid-template-columns: 1fr;
      }

      .eta-extra-port-list {
        grid-template-columns: 1fr;
      }

      .eta-position-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .eta-position-actions button {
        width: 100%;
      }

      .eta-diagnostics-grid {
        grid-template-columns: 1fr;
      }

      .water-table td,
      .locks-table td {
        grid-template-columns: 1fr;
        text-align: left;
        row-gap: 4px;
      }

      .water-table .marke-cell {
        grid-column: 1;
      }

      .water-table .water-value {
        text-align: left;
      }

      .bridge-table td:not(.name-cell) {
        display: grid;
        grid-template-columns: 1fr;
        text-align: left;
        row-gap: 4px;
      }

      .bridge-table .clearance-cell {
        text-align: left;
      }

      .bridge-table.data-table .details-row td,
      .water-table.data-table .details-row td {
        display: block;
        width: 100%;
        min-width: calc(min(100vw - 18px, 372px) - 2px);
        max-width: 100%;
        padding: 0;
        text-align: left;
      }

      .bridge-table.data-table .details-row .details-panel,
      .water-table.data-table .details-row .details-panel {
        display: block;
        width: 100%;
        min-width: calc(min(100vw - 18px, 372px) - 2px);
        max-width: 100%;
      }

      .locks-table .lock-chamber {
        grid-template-columns: minmax(0, 1fr);
      }
    }