body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: var(--font-sans);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    /*-webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
    -webkit-touch-callout: none;
    overflow: hidden;
    touch-action: none;
}

.cursor-move {
    cursor: move;
}

.draggable.dragging {
    cursor: grabbing;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.header {
    background: var(--color-brand);
    flex: 0 0 var(--size-topbar);
    font-size: var(--fs-2xl);
    display: flex;
    justify-content: stretch;
    color: var(--color-brand-ink);
    position: relative;
}

.header-title {
    flex: 1 1 auto;
    min-width: 0;
    background-color: var(--color-brand-accent);
    border-top-right-radius: 25% 50%;
    border-bottom-right-radius: 25% 50%;
    display: flex;
    flex-direction: row;
    padding-right: 14px;
}

.header-title span {
    padding: 15px;
    padding-top: 17px;
    line-height: 20px;
    padding-right: 50px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header-title div {
    background: var(--color-brand);
    padding: 10px;
    margin: auto 0;
    border-radius: var(--radius-2xl);
    font-size: var(--fs-lg);
    line-height: 15px;
}

.small-icon {
    font-size: var(--fs-xl);
}

.tabcontent {
    flex: 1 0 1px;
}

.addscrollbar {
    overflow: auto;
}

@media only screen and (max-width: 750px) {
    .header-title div {
        display: none;
    }

    .header-title span {
        padding-right: 15px;
    }
}

.header-title div i {
    padding: 0px 14px;
    font-size: var(--fs-xl);
    transition: var(--transition-hover);
}

.header-title div i:hover {
    cursor: pointer;
    transform: var(--hover-lift);
}

.header-title div i.active {
    color: var(--color-active);
}

.header-icon {
    width: 35px;
    flex: none;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-hover);
    font-size: var(--fs-lg);
    line-height: 15px;
}

.receiver-list {
    display: flex;
    flex-direction: column;
}

.receiver-option {
    padding: 10px 4px;
    font-size: var(--fs-base);
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-md);
    overflow-wrap: anywhere;
}

.receiver-option + .receiver-option {
    border-top: 1px solid var(--color-menu-divider);
}

.receiver-option:hover {
    background: var(--color-menu-hover);
}

.receiver-option.active {
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
}

.pulsating {
    animation: pulse-streaming 1.5s ease-in-out infinite;
}

@keyframes pulse-streaming {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.header-icon:hover {
    cursor: pointer;
    transform: var(--hover-lift);
}

.header-icon.active {
    color: var(--color-ok);
}

.header-menubutton {
    background: var(--color-menu);
    color: var(--color-text);
    transition: var(--transition-hover);
    font-size: var(--fs-3xl);
    width: 40px;
    flex: none;
    border-right: 1px solid var(--color-border-strong);
}

.header-menubutton>div {
    padding: 15px 9px;
    margin: auto;
}

@media (hover: hover) {
    .header-menubutton:hover {
        cursor: pointer;
    }
}

.bottombar {
    display: none;
    flex: 0 0 5px;
    background: var(--color-bottombar);
}

#realtime_content {
    background: var(--color-surface-raised);
    color: var(--color-text);
}

#menubar-overlay {
    z-index: var(--z-menu-scrim);
}

#menubar {
    position: relative;
    z-index: var(--z-menu);
    background: var(--color-menu);
    color: var(--color-text);
    text-align: center;
    align-items: stretch;
    display: none;
    flex-direction: row;
    visibility: visible;
    width: 100%;
    margin: 0;
    border-radius: 0;
}

#menubar div {
    flex: 0 1 150px;
    margin: 0 10px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-hover);
    flex-direction: column;
}

#menubar div i {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: var(--fs-3xl);
    line-height: 24px;
}

#menubar div span {
    padding-bottom: 10px;
    font-size: var(--fs-2xs);
    line-height: 10px;
}

#menubar div.active {
    border-bottom: 4px solid var(--color-active);
    color: var(--color-active);
}

#menubar.visible {
    display: flex;
}

.mainspace-container {
    flex: 1 0 0;
    position: relative;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.mainspace {
    background: var(--color-canvas);
    margin: 0px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

@media only screen and (max-height: 1000px) {
    .header-menubutton {
        display: block;
    }
}

.plots-tabs {
    margin: 4px 25px 0;
}

#plots .compare-panel {
    display: none;
}

#plots.compare-mode .compare-panel {
    display: block;
}

#plots.compare-mode .graph-panel:not(.compare-panel) {
    display: none;
}

.chart-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 14px 25px 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.chart-sources label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chart-sources select {
    background: var(--color-surface-raised);
    color: var(--color-text);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-md);
    padding: 4px 8px;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color var(--dur-fast) ease;
}

.chart-sources select:hover {
    border-color: var(--color-accent);
}

.graphtab {
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 15px;
    row-gap: 15px;
    margin: 10px;
}

@media only screen and (max-width: 2250px) {
    .graphtab {
        grid-template-columns: 1fr 1fr 1fr;
        padding: 5px;
    }
}

@media only screen and (max-width: 1500px) {
    .graphtab {
        grid-template-columns: 1fr 1fr;
        padding: 5px;
    }
}

@media only screen and (max-width: 800px) {
    .graphtab {
        grid-template-columns: 1fr;
        padding: 0px;
    }
}

.graph-panel {
    padding: 10px;
    overflow: auto;
    background-color: var(--color-surface);
    margin: 0px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: none;
}

.graph-panel>header,
.stat-panel>header {
    margin: 20px auto 30px;
    padding: 5px 0px;
    border-radius: var(--radius-lg);
    max-width: 400px;
    width: calc(100% - 30px);
    align-items: center;
    border-left: 10px solid var(--color-band);
    border-right: 10px solid var(--color-band);
    background-color: var(--color-band-accent);
    color: var(--color-text);
    text-align: center;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
}

.graph-panel>canvas {
    width: 100%;
    height: 100%;
}

.aboutpage {
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* Table styling */

#shipTable {
    max-height: calc(100vh - 135px);
    max-width: 100vw;
}

.tabulator {
    border-color: var(--color-border);
}

.tabulator .tabulator-cell {
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: 6px 14px;
    /* fixed rowHeight is 37px; line-height fills it so single-line content
       is vertically centered (cells are inline-block, so text would otherwise
       sit at the top) */
    line-height: 24px;
    font-size: var(--fs-sm);
    vertical-align: middle;
    color: var(--color-text);
}

/* keep inline icons (flags, ship-type markers) centered with the text */
.tabulator .tabulator-cell img,
.tabulator .tabulator-cell svg,
.tabulator .tabulator-cell span {
    vertical-align: middle;
}

.tabulator .tabulator-header {
    border: none;
}

/* typography comes from .col-header in components.css */
.tabulator .tabulator-header .tabulator-col {
    background-color: var(--color-band-accent);
    border: none;
    padding: 8px 14px;
    border-collapse: collapse;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
    background-color: var(--color-band-accent);
    background-image: linear-gradient(var(--color-hover), var(--color-hover));
}

.tabulator .tabulator-header .tabulator-col .tabulator-arrow {
    border-top-color: var(--color-text-muted) !important;
    border-bottom-color: var(--color-text-muted) !important;
}

.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-arrow,
.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-arrow {
    border-top-color: var(--color-text) !important;
    border-bottom-color: var(--color-text) !important;
}

.tabulator-row:hover {
    background-color: var(--color-selected) !important;
}

.tabulator-row-odd {
    background-color: var(--color-surface);
}

.tabulator-row-even {
    background-color: var(--color-surface-alt) !important;
}

.tablesection {
    font-size: var(--fs-md);
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 10px auto;
    color: var(--color-text);
    background-color: var(--color-surface);
    width: fit-content;
}

.search-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 12px;
    padding-right: 8px;
    position: sticky;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    overflow: visible;
}

.mytable {
    height: 100%;
    width: 100%;
    table-layout: fixed;
    box-sizing: border-box;
    border-collapse: collapse;
}

.mytable>tbody>tr>td {
    padding: 5px 4px;
}


/* Map styling */

#map {
    height: 100%;
    width: 100%;
    /* void outside the loaded tiles; black in both themes on purpose */
    background-color: black;
}

.crosshair_cursor {
    cursor: crosshair;
}

.map-button-box {
    position: absolute;
    right: 10px;
    /* below the map cards: the shipcard covers the controls */
    z-index: var(--z-map-control);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-raised);
    fill: var(--color-text);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-slow) ease-out;
}

/* Pill-shaped group (capsule ends) for the top "more tools" controls */
.map-button-box.map-pill {
    border-radius: var(--radius-2xl);
}

/* slide left by the ship table's width so the controls stay visible */
.map-button-box.active {
    transform: translateX(calc(-1 * var(--size-panel)));
}

.map-button {
    width: 34px !important;
    height: 34px !important;
    border: none !important;
    margin: 0px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--color-surface-raised) !important;
    fill: var(--color-text) !important;
    color: var(--color-text) !important;
    border-radius: 0 !important;
}

/* Thin divider between stacked buttons within a group */
.map-button+.map-button {
    border-top: 1px solid var(--color-border-strong) !important;
}

.map-button:hover {
    color: var(--color-highlight) !important;
    fill: var(--color-highlight) !important;
    outline: none !important;
}

.map-button:hover svg {
    transform: scale(1.2);
}

/* suppress the focus ring for pointer clicks only; keyboard focus stays visible */
.map-button:focus:not(:focus-visible) {
    outline: none !important;
}

.map-button:focus-visible {
    outline: 2px solid var(--color-accent-soft) !important;
    outline-offset: -2px;
}

.map-button svg {
    width: 19px !important;
    height: 19px !important;
    transition: transform var(--dur-fast) ease;
}

/* Top pill holds denser glyphs (ship/ruler) — render them a touch smaller
   so they don't look heavier than the bottom group's line icons */
.map-pill .map-button svg {
    width: 15px !important;
    height: 15px !important;
}

/* Attribution fold-out, opened from the (i) button in the bottom control group */
.map-attribution-foldout {
    position: absolute;
    right: 54px;
    bottom: 30px;
    max-width: 320px;
    z-index: var(--z-map-control);
    padding: 6px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-2xs);
    line-height: 1.4;
}

.map-attribution-foldout a {
    color: inherit;
}

#hover-info {
    position: absolute;
    display: flex;
    flex-direction: column;
    /* Overall container stacks cards vertically */
    flex: 0 0 auto;
    height: auto;
    width: auto;
    z-index: var(--z-map-label);
    font-size: var(--fs-sm);
    background-color: var(--color-scrim);
    color: var(--overlay-ink);
    text-align: center;
    border-radius: var(--radius-sm);
    padding: 5px;
    left: 0;
    top: 0;
    visibility: hidden;
    max-width: 350px;
    overflow: hidden;
    pointer-events: none;
}

.tooltip-card {
    display: flex;
    flex-direction: row;
    /* For flag and text side-by-side */
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
}

#hover-info div div {
    text-align: left;
}

#hover-info div span {
    font-size: var(--fs-3xl);
}

.fill-red {
    fill: var(--color-alert) !important;
}

.fill-green {
    fill: var(--color-ok-text) !important;
}

.fill-orange {
    /* mid level between ok and alert; no status token sits here */
    fill: #ff9900 !important;
}

.fill-gray {
    fill: var(--color-text-subtle) !important;
}

.shipicon {
    background: url("data:image/png;base64,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");
    width: 20px;
    height: 20px;
    opacity: 1;
    display: inline-block;
}

.staticon {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAACXUlEQVRYhe3Ru47aQABG4UMWKSGJUJRqW9JlN+yKJim59duQBwD2kShyqXBtkheghJ4KF0gICewCISxRMgg7BYYYe2ZtME0uI42EMDr6Pwz/j/S8A1L/Su9+MGCmaXy5UPQeBjPQLtYbwEzjMvvuDAPTdXGFYKNpfE0YvQPDBNcFsQEtcc8A0wVXwEYj2b68YWC5Lu7+JkTnwbB22P1NhM4bYPliidAfglgJ+tkpvTA2hD6pF8RK0LF7SmwA/S1m9AnsETp2T4UNoGP1bqOwfnS7HRm9jcb60e3IXhTWj25HoG9k2NGIZb9PazhkokB/V0Rv5NjREvotGE4UaGVPhh3Bsg+tIUwUaGnvvQy73SIKBR6833xarRAStPDQV/6eHLsVUDj0YCUkaOGhj3oy7BZEAd8+EBK08NBX7OW1GtfZLC8k/6qby/Ha+/wmlcIN/iCdhkyGt8Dz/XcpateQlfYgd+hBKtSDNJA56n2G6yyKffj2IdkHZDjeB0C9TtU0sYNv0LKwez264zGL4DPHQeg6P4GX4S31Kph2+A1aNvS6MF6EnzkCdGmvDlUT7OAbtMDuQXcMi+AzB4SOah/QaFCRoWXXw/5QxnbFihwtu44A/cleAyoytOx62Ih9MdHxsKego7GnoGNj96fZpKxCe9hO7NiuWFajHQH6Sb0mlFVoD3vivh26FEQ7DutO54zYrlgKo501dM7qNaEURDuw7pyDPUR9aA+rA6/Oiu2Kpd9oZw2dRD0/2sMm3Ac8PlKcTpknxx6KRZjOk2IPNShOYX4RrO98vGTsD+j9PecXIj9PVcetObkAAAAASUVORK5CYII=");
    width: 20px;
    height: 20px;
    opacity: 1;
    display: inline-block;
}

.helicoptericon {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAADxUlEQVRIx61VXWgcVRg9d+7Mnd3Zmd1N405oE5KakLbYgDTFH5BUEFo1WJuUNkiLEkVFxSb4UEVsUCutbWPAH1y10qAP2tJa6kMJltKU+CDqKmxQMNZV2ZikSkKSNTP7Mz97fcnCMuxuNq3n8Z7vO+fe7565A6wOr3wSDM5up/RL3AS2UuAogJoSXPiYovwV13V+OhRaAnBvGY37KPAmAFJYEDwFzW+r6r49ongRQJ2H69zq96sAsFGW6TrgwRIGe48oyqdPMdZVyeTcAcOIdvh8Db2S9BWAhgJRA2yIUBpcbvL3+nxtnt7HBwOBwWnHSX1oWT0A8uVMAOBEv2Gc2MyY9jRjlwC0AMB+xjYW10cobS/a7fNDgcDAhGWlopbVBeCnYkGhzFzfP2iabzSJotQny5cAtNWLYlNxwS2iuGb57l5+V1UP/pjLzZ6y7YcAJLxitEIIxkdte+ZhWd7VLgjddaJY3yhJSoHMcb54JZttf0vT9n6dzSbPOE4XgJlSQnSFtP0yats/389Y13ZVrSNFJw8IArmbMe28aV674Lq7AMyVExFWMFkPoHHOdVPEsyGREH8mn1cuuu73ABqL0+QFKeO8+5Dff6iVsfVNkiQHBUEpJ5DjPDdt2/nfLOvvkWz2s7F8fsBbI5ZqfEKStu3WtC3VfL0yIXIzY2hm7FZFELrHDKM6k89t+1pbOp3QKQ01SVIgUOEkNufmjOPwSdv+N5bLjVc9riJsALDvPVXt71CUcIlRzW2bnU3mgD4AMQD2jVy8uV8UOzmQOT4/H8sD2QJxfmkpNriw8PuQqq7VgZ0AnBt5LFselaTYUCCQBHAAwCNXa2sX47rO47rOd1IaBaB1Uno5qml/rAPeKTf+critj7GJo4ryK4Dewui+CIdTcV3nP0QiBoD+5XXfPYJw4aSmJbcQMlytUfsLspw4oihTAHqK1tWPNG0xrut8tLZ2EcCe4pDdQcjpU8HgP3cKwjkAcsX/yYs+X+J1v38SQKeXPKYo38V1nZ8Nh1MAWr1JvZ2Q4Y81bXIHpSOVnvqWaceZfzWTeQzAiNfkuutOAsC860oAkh7aGef8ycOGcSZMSH0VoSqNTYS8Ftf1/HFF+WY1fatym+B8Lsu5Ne26U6vpqyYJzwIgD1DasFkUO1zOxRpB2PQcYx9ELetPAD4AhysJkBUdGBvuDYW6ZUJC3nqHc/OKaV5/KZ1uvamTcCD/bSZjraHU0CmlEVGUFlzXnHddOmXbbppzEf8DegCMAVgLYMddgpAA8AyAZgADAE6uJPAfk1U+b+R6xyUAAAAASUVORK5CYII=");
    width: 25px;
    height: 25px;
    opacity: 1;
    display: inline-block;
}

.sprites {
    background: url('data:image/png;base64,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');
    width: 25px;
    height: 25px;
    opacity: 1;
    display: inline-block;
}

.table-shiptype-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transform: scale(0.8);
}

#statcard {
    top: 10px;
    left: auto;
    right: 60px;
    display: none;
    z-index: var(--z-map-card);
    position: absolute;
    max-width: calc(100vw - 80px);
    background: var(--color-surface-raised);
    color: var(--color-text);
    cursor: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-strong);
    padding: 4px 6px;
}

.statcard_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--fs-xs);
    gap: 0;
    column-gap: 2px;
    row-gap: 0;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 1px 4px;
}

.stat-item[data-zero="true"] {
    display: none;
}

.stat-item + .stat-item {
    border-left: 1px solid var(--color-border-strong);
    padding-left: 6px;
}

.stat-item .shipicon,
.stat-item .staticon,
.stat-item .helicoptericon {
    flex-shrink: 0;
    margin: -4px;
}

.tablecard_inner table {
    font-size: var(--fs-2xs);
    margin: 5px 0;
    color: var(--color-text);
    border: 1px solid var(--color-panel);
}

.tablecard_inner table thead {
    background-color: var(--color-panel);
    color: var(--color-text-muted);
}

/* typography comes from .col-header in components.css */
.tablecard_inner table thead>tr>th {
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    padding: 10px 4px;
    border-collapse: collapse;
}

.tablecard_inner table>tbody>th,
.tablecard_inner table>tbody>td {
    border: none;
    margin: 0px;
    padding: 0px;
}

.tablecard_inner table>tbody>tr:nth-child(even) {
    background: var(--color-surface-alt);
}

.tablecard_inner table>tbody>tr:hover {
    background: var(--color-selected);
}

.tablecard_inner table th:nth-child(1),
.tablecard_inner table td:nth-child(1) {
    /* Flag */
    width: 28px;
}

.tablecard_inner table th:nth-child(2),
.tablecard_inner table td:nth-child(2) {
    /* Name */
    /* no width: Name flexes to absorb slack so other columns hold exact px */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tablecard_inner table th:nth-child(3),
.tablecard_inner table td:nth-child(3) {
    /* Distance */
    width: 46px;
}

.tablecard_inner table th:nth-child(4),
.tablecard_inner table td:nth-child(4) {
    /* Speed */
    width: 46px;
}

.tablecard_inner table th:nth-child(5),
.tablecard_inner table td:nth-child(5) {
    /* Type */
    width: 30px;
}

.tablecard_inner table th:nth-child(6),
.tablecard_inner table td:nth-child(6) {
    /* Last */
    width: 70px;
}

.sort-icon::after {
    content: "\25B2";
    font-size: var(--fs-2xs);
    margin-left: 2px;
    vertical-align: middle;
    color: transparent;
}

.sort-icon.ascending::after {
    content: "\25B2";
    color: var(--color-text);
}

.sort-icon.descending::after {
    content: "\25BC";
    color: var(--color-text);
}

/* Shipcard styling */

.pinned {
    /* glass edge over the blurred map; translucent white in both themes */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.opacity-50 {
    opacity: 0.5;
}

.mapcard {
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    z-index: var(--z-card);
    position: absolute;
    visibility: hidden;
    background: var(--color-surface-raised);
    color: var(--color-text);
    cursor: auto;
    border-radius: var(--radius-md);
}

.shipcard-width {
    width: 400px;
}

.mapcard.floating {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.measurecard-width {
    width: 450px;
}

#measurecard {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    top: 16px;
    left: 16px;
}

.mapcard.visible {
    visibility: visible;
}

.mapcard_content {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.mapcard_header {
    flex: 0 0 35px;
    padding: 5px;
    margin: 5px;
    margin-top: 10px;
    font-size: var(--fs-lg);
    color: var(--color-text);
    background-color: var(--color-shipcard-header);
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
}

#shipcard_header_title {
    flex: 1;
}

#shipcard_header_flag {
    flex: 0 1 auto;
    margin-right: 5px;
}

.shipcard-validated {
    border-left: 10px solid var(--color-ok-strong);
}

.shipcard-not-validated {
    border-left: 10px solid var(--color-off);
}

.shipcard-dubious {
    border-left: 10px solid var(--color-error);
}

.message-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: var(--color-alert);
    color: var(--overlay-ink);
    border-radius: var(--radius-circle);
    min-width: 16px;
    height: 16px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px var(--color-shadow);
    z-index: var(--z-map-label);
    pointer-events: none;
}

#shipcard_footer>div {
    position: relative;
}

.mapcard-footer {
    background-color: var(--color-shipcard-footer);
    color: var(--color-text);
    flex: 0 0 50px;
    display: flex;
    flex-direction: row;
    margin: 5px;
    margin-bottom: 10px;
    justify-content: center;
}

.mapcard-footer>div {
    flex: 0 1 100px;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    transition: var(--transition-hover);
}

@media (hover: hover) {
    .mapcard-footer>div:hover {
        cursor: pointer;
        background: var(--color-hover-overlay);
        transform: var(--hover-lift);
    }
}

.mapcard-footer>div>i {
    flex: 1;
    font-size: var(--fs-2xl);
    margin: auto;
    padding: 4px;
}

.mapcard-footer>div>span {
    flex: 1;
    font-size: var(--fs-2xs);
    line-height: 1;
    text-align: center;
    padding-bottom: 4px;
}

.mapcard-footer>div.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.mapcard header>span:first-child {
    flex: 1 0 0;
}

.mapcard-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 0;
    padding: 0px;
    border-radius: var(--radius-lg);
    font-size: var(--fs-3xl);
    transition: var(--transition-hover);
    cursor: pointer;
}

@media (hover: hover) {
    .mapcard-header-icon:hover {
        cursor: pointer;
        transform: var(--hover-lift);
    }
}

.mapcard-table {
    width: 100%;
    border-collapse: collapse;
}

.mapcard-table th,
.mapcard-table td {
    line-height: 14px;
    font-size: var(--fs-2xs);
    text-align: left;
    padding: 2px 5px;
}

.mapcard-table th {
    color: var(--color-text-muted);
}

.mapcard-content-row {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    padding: 10px;
    transition: var(--transition-hover);
}

.mapcard-content-row:hover {
    cursor: pointer;
}

.mapcard-content-row>div {
    overflow: hidden;
    flex: 1;
    display: flex;
    justify-content: stretch;
    flex-direction: column;
}

.mapcard-content-row>div>span:first-child {
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: var(--fs-2xs);
    line-height: 14px;
}

.mapcard-content-row>div>span:last-child {
    line-height: 20px;
    font-size: var(--fs-base);
    text-transform: initial;
}

.mapcard-content-row>div>span:last-child:empty:after {
    content: "-";
}

/* the !importants outrank icons.css, which sets masked icons to display: block */
.shipcard-tech-icon {
    font-size: var(--fs-base) !important;
    cursor: help;
    color: var(--color-text-muted);
    display: inline-block !important;
    vertical-align: text-top;
    margin-left: 2px;
    line-height: 1;
}

.shipcard-min-only {
    display: none;
}

.shipcard-min-only.visible {
    display: inherit;
}

.shipcard-row-selected {
    background-color: var(--color-shipcard-selected);
    display: flex;
    flex-direction: row;
}

/* Technical details popover */
.tech-popover {
    position: absolute;
    background: var(--color-surface-raised);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-float);
    min-width: 200px;
    max-width: 300px;
    font-size: var(--fs-sm);
    padding: 8px 12px;
}

.tech-popover > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--color-rule);
}

.tech-popover > div:last-child {
    border-bottom: none;
}

.tech-popover > div > span:first-child {
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
}

.tech-popover > div > span:last-child {
    font-weight: var(--fw-bold);
    margin-left: 12px;
}

@media only screen and (max-width: 500px) {
    .mapcard {
        left: 0;
        top: 0;
        border-radius: 0px;
    }

    .mapcard header {
        font-size: var(--fs-base);
    }

    #measurecard {
        border-radius: 0px;
        box-shadow: none;
        top: 0;
        left: 0;
    }

    #measurecard .mapcard_header {
        flex-basis: 35px;
        font-size: var(--fs-base);
    }

    .measurecard-width {
        width: 100%;
    }

    .shipcard-width {
        width: 100%;
    }
}

@media only screen and (max-height: 800px) {
    .shipcard-ismax {
        height: 100%;
    }

    .mapcard {
        left: 0;
        top: 0;
        border-radius: 0px;
    }

    .mapcard header {
        font-size: var(--fs-base);
    }
}

/* Summary tab */
.stat-tab {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 25px;
    row-gap: 25px;
    max-width: min(calc(100% - 30px), 3000px);
    margin: 0 auto;
    margin-top: 10px;
    justify-content: center;
}

@media only screen and (max-width: 2250px) {
    .stat-tab {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 5px;
    }
}

@media only screen and (max-width: 1500px) {
    .stat-tab {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 5px;
    }
}

@media only screen and (max-width: 750px) {
    .stat-tab {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        padding: 0px;
    }
}

.stat-panel-page {
    max-width: 750px;
    width: 100%;
}

.stat-panel {
    margin: 0px;
    background-color: var(--color-surface);
    padding: 0px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: none;
}

#output_stats {
    max-height: 500px;
    overflow-y: auto;
}

@media only screen and (max-width: 750px) {
    #output_stats {
        max-height: none;
        overflow-y: visible;
    }
}

.settings-bg {
    background-color: var(--color-panel);
}

.stat-panel section {
    padding: 10px;
    margin: 0 auto;
    font-size: var(--fs-base);
}

.stat-panel section div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.stat-panel section div span:first-child {
    text-align: right;
    color: var(--color-text-muted);
    padding: 5px 20px;
    display: flex;
    flex-direction: column;
}

.stat-panel section div span:last-child {
    text-align: left;
    color: var(--color-text);
    padding: 5px 20px;
    /*font-weight: 550;*/
    overflow-x: auto;
    white-space: nowrap;
    border-left: solid 1px var(--color-stat-divider);
    scrollbar-width: thin;
    /*scrollbar-color: transparent transparent;*/
}

.stat-panel section div span:last-child::-webkit-scrollbar {
    width: 0.5rem;
}

.stat-panel section div span:last-child:empty:after {
    content: "-";
}

.blue {
    color: var(--color-secondary);
}

.green {
    color: var(--color-ok-text);
}

.red {
    color: var(--color-error);
}

.grey {
    color: var(--color-text-muted);
}

.lightgrey {
    color: var(--color-text-subtle);
}

.floating-menu {
    position: fixed;
    display: none;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-menu-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    list-style-type: none;
    padding: 8px 0;
    z-index: var(--z-toast);
    font-size: var(--fs-base);
    color: var(--color-text);
    width: auto;
    margin: 0;
}

.floating-menu li {
    display: flex;
    align-items: center;
    height: 24px;
    margin: auto;
    padding: 0 16px;
    cursor: pointer;
    white-space: nowrap;
}

.floating-menu .divider {
    height: 1px;
    background-color: var(--color-menu-divider);
    margin: 0.5rem 0;
    pointer-events: none;
}

.floating-menu li:hover {
    background-color: var(--color-menu-hover);
}

.floating-menu li.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.floating-menu i {
    margin-right: 8px;
    font-size: var(--fs-lg);
    width: 16px;
}

/* Map & overlays selection dialog */
#map-menu {
    width: 300px;
    padding: 16px 18px;
}

#map-menu table {
    width: 100%;
    border-collapse: collapse;
}

#map-menu td {
    padding: 6px 0;
    vertical-align: top;
}

#map-menu td:first-child {
    white-space: nowrap;
    padding-right: 16px;
    padding-top: 9px;
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
}

#baseMapSelector {
    width: 100%;
    cursor: pointer;
}

#overlayContainer input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 9px 0 0;
    vertical-align: -3px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

#overlayContainer label {
    cursor: pointer;
    line-height: 1.9;
}

#overlayContainer label:hover {
    color: var(--color-accent);
}

/* Meteo Tooltip Styling */
.meteo-tooltip {
    margin-top: 0;
    padding: 4px 8px 6px;
    max-width: 280px;
    color: inherit;
    border-top: 1px solid currentColor;
    border-top-color: var(--color-rule);
}

/* Improved Dialog Box Styling - Preserving Original Structure */
#dialog-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    max-height: 80%;
    width: max-content;
    min-width: min(320px, 90%);
    max-width: min(90%, 900px);
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-dialog);
    overflow: hidden;
}

.dark #dialog-box {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-overlay);
}

/* .band / .band-slot / .band-title live in components.css */

/* one treatment for every icon action sitting in a header band */
.dialog-header .close_icon,
.dialog-header .dialog-header-action,
.settings_header>.close_icon {
    flex: none;
    align-self: center;
    display: flex;
    align-items: center;
    color: var(--color-icon);
    font-size: var(--fs-lg);
    margin: 0 16px 0 12px;
    cursor: pointer;
    transition: opacity var(--dur-fast) ease;
}

.dialog-header .close_icon:hover,
.dialog-header .dialog-header-action:hover,
.settings_header>.close_icon:hover {
    opacity: 0.65;
}

/* the action sits left of the close icon, so no trailing gap */
.dialog-header .dialog-header-action {
    margin-right: 0;
}

.dialog-title-hint {
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: var(--color-text-muted);
    margin-left: 6px;
}

.kv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
}

.kv-table td {
    padding: 6px 14px;
    border-top: 1px solid var(--color-border);
    vertical-align: top;
}

.kv-table tr:first-child td {
    border-top: none;
}

.kv-table .kv-key {
    color: var(--color-text-muted);
    white-space: nowrap;
    padding-left: 0;
    border-right: 1px solid var(--color-border);
}

.kv-table .kv-value {
    overflow-wrap: anywhere;
}

.kv-empty {
    color: var(--color-text-muted);
}

.dialog-message {
    padding: 15px 20px 25px;
    font-size: var(--fs-base);
    user-select: text;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
}

#dialog-overlay {
    /* above the map controls and settings panel, both of which would otherwise
       show through the modal scrim */
    z-index: var(--z-scrim);
}

/* Binary Messages Dialog Styling */
.binary-messages-list {
    padding: 10px 0;
}

.binary-message-count {
    font-size: var(--fs-base);
    color: var(--color-text);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    display: none;
    /* Hide this since we'll show count in title */
}

.binary-message-item {
    padding: 12px;
    margin-bottom: 15px;
    border-radius: var(--radius-md);
    background-color: var(--color-surface-alt);
}

.binary-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: var(--fs-base);
}

.binary-message-time {
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.binary-message-source {
    color: var(--color-active);
}

.binary-message-details {
    margin-top: 10px;
    font-size: var(--fs-base);
    background-color: var(--color-surface);
    border-radius: var(--radius-sm);
}

.binary-raw-data {
    margin-top: 10px;
}

.binary-raw-data summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    padding: 5px 0;
}

.binary-raw-data pre {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--color-surface);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Mobile Adjustments */
@media only screen and (max-width: 600px) {
    #dialog-box {
        max-width: 95%;
        max-height: 90%;
        border-radius: var(--radius-sm);
    }

    .dialog-title {
        font-size: var(--fs-lg);
        padding: 12px 15px;
    }

    .dialog-message {
        padding: 12px 15px;
        font-size: var(--fs-md);
    }

    .binary-message-item {
        padding: 8px;
    }

    .meteo-tooltip {
        max-width: 250px;
    }
}

.can-copy {
    user-select: text;
}

.showflex {
    display: flex;
}


.flash-up {
    opacity: 0;
    animation: flash var(--dur-slow) ease forwards;
}

@keyframes flash {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.color-picker {
    -webkit-appearance: none;
    border-radius: 0;
    border: none;
    width: 100px;
    height: 20px;
    cursor: pointer;
    vertical-align: middle;
    background-color: transparent;
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker::-webkit-color-swatch {
    border: none;
}

.tableside_window {
    display: flex;
    flex-direction: column;
    background-color: var(--color-panel);
    width: var(--size-panel);
    height: calc(100% - var(--size-header-tall));
    top: var(--size-header-tall);
    right: 0px;
    position: fixed;
    z-index: var(--z-panel);
    border: 1px solid var(--color-panel);
    padding: 0px;
    margin: 0px;
    transform: translateX(calc(var(--size-panel) + 2px));
    visibility: hidden;
    transition: transform var(--dur-slow) ease-out, visibility 0s linear var(--dur-slow);
}

.tableside_window.active {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur-slow) ease-out, visibility 0s;
    box-shadow: var(--shadow-panel);
}

.settings_window {
    display: flex;
    flex-direction: column;
    background-color: var(--color-panel);
    width: var(--size-panel-wide);
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    /* above the map controls: unlike the ship table, they do not slide aside
       for this panel, and it goes full width under 750px */
    z-index: var(--z-panel-top);
    border: 1px solid var(--color-panel);
    border-radius: var(--radius-md);
    padding: 0px;
    margin: 0px;
    transform: translateX(-110%);
    visibility: hidden;
    transition: transform var(--dur-slow) ease-out, visibility 0s linear var(--dur-slow);
}

.settings_window.active {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur-slow) ease-out, visibility 0s;
    box-shadow: var(--shadow-panel);
}

@media (max-width: 750px) {
    .settings_window {
        width: 100%;
        transform: translateX(-100%);
    }
}

.settings_main {
    overflow: auto;
    font-size: var(--fs-base);
    flex: 1 1 auto;
}

/* --color-control is its own light/dark pair, so no .dark override is needed */
.settings_main select,
.settings_main section div>span[data-action],
.settings_main button:not(.tab-scroll-btn),
.settings_main .color-picker {
    background-color: var(--color-control);
}

/* typography comes from .col-header in components.css */
.settings_main>header {
    margin: 18px 16px 4px;
    padding: 0 0 4px;
    max-width: none;
    width: auto;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: none;
    text-align: left;
}

/* .tab-scroll-wrap / .tab-scroll-btn live in components.css */
.settings_nav {
    position: sticky;
    top: 0;
    background: var(--color-panel);
    --tab-fade: var(--color-panel);
    z-index: var(--z-base);
}

.tab-scroll-wrap .settings_tabs {
    padding: 0 0.3rem 0 0.6rem;
}

/* .tabs / .tab live in components.css, shared with the control hub */

.settings_header .settings_tabs {
    border-bottom: none;
    padding: 0 0.3rem;
    align-self: stretch;
    align-items: stretch;
    font-size: var(--fs-base);
    min-width: 0;
}

/* the header strip sits on the swoosh, so the arrows must fade into that */
.settings_header .tab-scroll-wrap {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    --tab-fade: var(--color-band-accent);
}

.settings_header .settings_tab {
    display: flex;
    align-items: center;
}

.settings_subtabs .settings_tab {
    padding: 0.55rem 0.65rem;
}


/* .fieldset / .field / .field-label / .field-desc live in components.css;
   these are the viewer's own section chrome */
.settings_main section div {
    align-items: flex-start;
}

.settings_main section {
    margin: 0 1.25rem;
    padding: 1rem 0 0.5rem;
    border-top: 1px solid var(--color-border);
    font-size: inherit;
}

.settings_main section.st-first {
    border-top: none;
}

.settings_main .st-break {
    flex: 1 1 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

.settings_main .st-title {
    flex: 1 1 100%;
    margin: 0 0 var(--space-1) 2px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}


.settings_main section>div.third {
    flex: 0 1 calc(33.333% - 0.5rem);
    white-space: nowrap;
}

.settings_main section>div.half {
    flex: 0 1 calc(50% - 0.375rem);
    white-space: nowrap;
}

.settings_main section>div.quarter {
    flex: 0 1 calc(25% - 0.5625rem);
    white-space: nowrap;
}

.settings_main section>div.threequarter {
    flex: 1 1 calc(75% - 0.5625rem);
}

@media (max-width: 480px) {

    .settings_main section>div.half,
    .settings_main section>div.threequarter {
        flex-basis: 100%;
    }

    .settings_main section>div.third,
    .settings_main section>div.quarter {
        flex-basis: calc(50% - 0.375rem);
    }

    .settings_main section>div {
        white-space: normal;
    }

    .settings_main button {
        max-width: 100%;
    }
}

.settings_main section div span:nth-of-type(2) {
    padding: 0;
    border-left: none;
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--color-text);
}

/* .input / .select / .toggle / .slider / .btn live in components.css; these are
   the viewer's own sizing, which differs from the hub's full-width fields */
.settings_main select {
    max-width: 100%;
}

.settings_main button:not(.tab-scroll-btn),
.settings_main section div>span[data-action] {
    /* re-asserted after .settings_main section div span:nth-of-type(2), which
       zeroes padding/border-left for the generic control slot */
    padding: 8px 16px;
    border-left: 1px solid var(--color-field-border);
    width: fit-content;
    min-width: 7rem;
    max-width: 100%;
    text-align: center;
    margin: 0;
}

.settings_main select,
.settings_main input[type="range"] {
    width: 100%;
}

.settings_main input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: var(--radius-lg);
    background: var(--color-track);
}

.settings_main input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -4px;
    border-radius: var(--radius-circle);
    background: var(--color-accent);
    box-shadow: 0 1px 2px var(--color-shadow-soft);
}

.settings_main input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: var(--radius-lg);
    background: var(--color-track);
}

.settings_main input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: var(--radius-circle);
    background: var(--color-accent);
    box-shadow: 0 1px 2px var(--color-shadow-soft);
}


.settings_main .color-picker {
    width: 110px;
    height: 32px;
    padding: 4px;
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--color-surface-raised);
}

.settings_main .color-picker::-webkit-color-swatch {
    border-radius: var(--radius-md);
}

.settings_main section div>span[data-action]:hover,
.settings_main button:not(.tab-scroll-btn):hover,
.settings_main .color-picker:hover,
.settings_main select:hover {
    border-color: var(--color-accent);
}


.settings_main input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow: 0 1px 2px var(--color-shadow-soft), 0 0 0 2px var(--color-accent);
}

.settings_main input[type="range"]:hover::-moz-range-thumb {
    box-shadow: 0 1px 2px var(--color-shadow-soft), 0 0 0 2px var(--color-accent);
}

/* .band / .band-slot live in components.css, shared with the control hub */
.settings_header {
    flex-direction: row;
    position: relative;
    z-index: var(--z-sticky);
}

.settings_header .hdr-slot {
    padding: 0;
}

.tableside_window .settings_header .hdr-slot {
    padding: 0 20px 0 1rem;
}

.settings_header>.close_icon {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 16px 0 12px;
    font-size: var(--fs-lg);
    color: var(--color-icon);
    cursor: pointer;
    transition: opacity var(--dur-fast) ease;
}

.settings_header>.close_icon:hover {
    opacity: 0.65;
}

.settings_header .search-box {
    font-size: var(--fs-md);
    height: 32px;
    padding: 5px 12px 5px 34px;
    background-position: 10px center;
    margin: 0;
    background-color: var(--color-band-accent);
    max-width: 320px;
}

/* chrome, focus and placeholder come from .input; only the glyph and the
   compact sizing live here */
.search-box {
    width: 100%;
    height: 38px;
    padding: 5px 12px 5px 36px;
    margin: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 15px;
    max-width: 500px;
    font-size: var(--fs-md);
}

.ship-table-column-dropdown {
    position: relative;
    flex-shrink: 0;
    margin-left: 8px;
}

/* chrome from .btn; compact sizing to match the search box beside it */
.ship-table-columns-btn {
    gap: 7px;
    height: 38px;
    padding: 0 12px;
}

.ship-table-columns-btn .chevron {
    color: var(--color-text-muted);
}

.ship-table-column-dropdown-menu {
    display: none;
    position: fixed;
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    font-size: var(--fs-md);
    min-width: 220px;
    border: 1px solid var(--color-menu-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: var(--z-panel);
}

/* typography comes from .col-header in components.css */
.column-menu-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-menu-border);
}

.column-menu-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}

.ship-table-column-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.ship-table-column-dropdown-item:hover {
    background-color: var(--color-menu-hover);
}

.ship-table-column-dropdown-item input {
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.dark .tabulator .tabulator-footer {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
}

.dark .tabulator .tabulator-footer .tabulator-page,
.dark .tabulator .tabulator-footer .tabulator-page-size {
    background: var(--color-control);
    color: var(--color-text);
    border-color: var(--color-field-border);
}

.dark .tabulator .tabulator-footer .tabulator-page.active {
    color: var(--color-highlight);
}

.dark .tabulator .tabulator-footer .tabulator-paginator>label {
    color: var(--color-text);
}

.column-menu-footer {
    border-top: 1px solid var(--color-menu-border);
    padding: 8px;
}

/* chrome from .btn-quiet; full-width row inside the menu */
.column-menu-reset {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
}

.column-menu-reset:hover {
    background-color: var(--color-menu-hover);
    color: var(--color-accent);
}

.info-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--size-panel-narrow);
    height: 100%;
    background: var(--color-panel);
    color: var(--color-text);
    box-shadow: var(--shadow-panel);
    font-size: var(--fs-md);
    transform: translateX(100%);
    transition: transform var(--dur-slow) ease;
    z-index: var(--z-info);
    display: flex;
    flex-direction: column;
}

.info-panel.active {
    transform: translateX(0);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-slow), visibility var(--dur-slow);
    z-index: var(--z-overlay);
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* a .band in brand colors: taller, no rule under it */
.header-info-panel {
    align-items: center;
    height: var(--size-header-tall);
    background: var(--color-brand);
    border-bottom: none;
}

.header-info-panel .info-title {
    background: var(--color-brand-accent);
    font-size: var(--fs-xl);
    color: var(--color-brand-ink);
}

.header-info-panel .close_icon {
    cursor: pointer;
    border: none;
    color: var(--color-brand-ink);
    margin: 0 10px 0 12px;
    font-size: var(--fs-xl);
    padding: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    background: none;
    transition: var(--transition-hover);
}

.header-info-panel .close_icon::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.header-info-panel .close_icon:hover {
    transform: var(--hover-lift);
}

.info-panel .content {
    padding: 20px 16px;
    overflow-y: auto;
    flex: 1;
}

.quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    padding: 12px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    transition: background var(--dur-med);
    cursor: pointer;
}

.quick-link svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.quick-link svg path[fill="#d1d5db"] {
    fill: currentColor;
}

.quick-link:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
    text-decoration: none;
}

.quick-link span {
    margin-top: 4px;
}

.info-panel-section {
    margin-bottom: 22px;
}

.link-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.link-list a {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--dur-med);
}

.link-list a:last-child {
    border-bottom: none;
}

.link-list a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.link-item span {
    display: inline-flex;
    align-items: center;
}

.link-item .arrow_right_alt_icon {
    margin-left: auto;
    font-size: var(--fs-2xl);
    color: var(--color-text-muted);
}

.social-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
}

.social-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-links > span {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.social-links > a {
    display: inline-flex;
    gap: 16px;
}

.social-icons {
    display: flex;
    gap: 16px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-icon);
    transition: color var(--dur-med), transform var(--dur-med);
}

.social-icons a:hover {
    transform: var(--hover-lift);
}

.social-icons a svg path[fill="#d1d5db"] {
    fill: currentColor;
}

.social-icons a svg {
    width: 26px;
    height: 26px;
}

.log-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.log-state-indicator {
    padding: var(--space-2) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--fs-base);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.log-content-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}

.log-content {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-entry {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    align-items: flex-start;
}

.log-entry.info {
    color: var(--color-text);
}

.log-entry.warning {
    background-color: var(--color-log-warn);
    color: var(--overlay-ink);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
}

.log-entry.error {
    background-color: var(--color-log-error);
    color: var(--overlay-ink);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
}

.log-entry.error .timestamp,
.log-entry.warning .timestamp {
    color: var(--color-log-ink);
}

.log-entry.info .timestamp {
    color: var(--color-timestamp);
}

.realtime-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.realtime-tabs {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4) 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
}

.realtime-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--fs-base);
}

.realtime-filter-bar i.filter_list_icon {
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
}

.realtime-filter-bar .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

/* .realtime-filter-input joins .input / .select in components.css; the add and
   clear buttons are .btn. All three sit on the control surface. */
.realtime-filter-input,
.realtime-filter-add,
.realtime-filter-clear {
    background-color: var(--color-control);
    color: var(--color-text-strong);
}

/* primary affordance of the row: accent-bordered even at rest */
.realtime-filter-add {
    border-color: var(--color-accent);
}

.realtime-filter-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.realtime-filter-row .realtime-filter-input:nth-child(2) {
    flex: 1;
}

.realtime-filter-active {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.realtime-filter-active .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.realtime-filter-none,
.realtime-filter-hint {
    margin-top: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--fs-md);
}

.realtime-control-btn span.realtime-filter-count {
    display: none;
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: var(--radius-full);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
}

.realtime-control-btn.active span.realtime-filter-count {
    display: flex;
    background: var(--color-accent);
    color: var(--color-surface);
}

.filter-chip-kind {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--space-1) var(--space-2);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--fs-md);
}

/* one inline icon-button idiom for the chip remove and table clear */
.filter-chip button,
.realtime-clear-btn {
    padding: 0;
    margin-left: 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: opacity var(--dur-med) ease;
}

.filter-chip button {
    color: var(--color-text-muted);
}

.filter-chip button:hover {
    color: var(--color-text-strong);
}

.filter-chip button i {
    font-size: var(--fs-sm);
}

.realtime-spacer {
    flex: 1;
}

.realtime-clear-btn {
    justify-content: center;
    color: var(--color-alert);
    width: 20px;
    height: 20px;
}

.realtime-clear-btn:hover {
    opacity: 0.7;
}

.realtime-clear-btn i {
    font-size: var(--fs-base);
}

/* chrome from .btn-quiet; a fixed square with its own hover accent */
.realtime-control-btn {
    position: relative;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-med) ease, color var(--dur-med) ease;
    width: 40px;
    height: 40px;
}

.realtime-control-btn:hover {
    background: var(--color-menu-hover);
    color: var(--color-accent);
}

.realtime-control-btn span {
    font-size: var(--fs-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.realtime-background-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: var(--space-4);
    font-size: var(--fs-base);
    cursor: pointer;
    color: var(--color-text);
    user-select: none;
}

.realtime-background-toggle input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.realtime-background-toggle:hover {
    color: var(--color-accent);
}

.realtime-panel {
    flex: 1;
    overflow: auto;
    padding: var(--space-4);
}

.signal-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
}

/* typography comes from .col-header in components.css */
.signal-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-surface-raised);
    padding: var(--space-3);
    text-align: left;
    border-bottom: 2px solid var(--color-border-strong);
}

.signal-table tbody td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    white-space: nowrap;
}

.signal-table tbody tr:hover {
    background: var(--color-menu-hover);
}

.signal-table tbody td a {
    color: var(--color-accent);
    text-decoration: none;
}

.signal-table tbody td a:hover {
    text-decoration: underline;
}

.nmea-cell-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.nmea-decoder-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
    transition: background var(--dur-med) ease;
    font-size: var(--fs-base);
}

.nmea-decoder-icon:hover {
    background: var(--color-menu-hover);
}

.nmea-decoder-icon i {
    font-size: var(--fs-base);
}

.nmea-text {
    flex: 1;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.channel-indicator {
    display: flex;
    gap: 2px;
}

.channel-box {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--color-off);
    color: transparent;
    text-align: center;
    line-height: 16px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-sm);
}

.channel-box.active {
    background-color: var(--color-on);
    color: var(--color-accent-ink);
}

.nmea-mmsi {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-sm);
}

/* glass disc over the map: translucent in both themes on purpose */
.aiscatcher-logo-control {
    background: rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-circle) !important;
    cursor: pointer;
    transition: background var(--dur-slow) ease;
    width: 60px !important;
    height: 60px !important;
    padding: 5px !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

.aiscatcher-logo-control:hover {
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.aiscatcher-logo-control.disconnected svg path {
    fill: var(--color-alert) !important;
}

.aiscatcher-logo-control.connected svg path {
    fill: var(--color-secondary) !important;
}

/* NMEA Decoder Styles */
.decoder-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.decoder-panel,
.decoder-message {
    background: var(--color-surface-overlay);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.decoder-panel h3 {
    margin-top: 0;
    color: var(--color-text);
    font-size: var(--fs-base);
}

.decoder-panel p {
    color: var(--color-text-muted);
    margin-bottom: 15px;
    font-size: var(--fs-base);
}

#decoder_input {
    width: 100%;
    min-height: 150px;
    padding: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-lg);
    resize: vertical;
    /* same sheet as .decoder-panel so the field reads as part of the panel */
    background: var(--color-surface-overlay);
    color: var(--color-text);
    box-sizing: border-box;
}

#decoder_input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.decoder-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* the example is a hint, not content: keep it clearly below body text */
#decoder_input::placeholder {
    color: var(--color-text-subtle);
    opacity: 1;
}

.decoder-status {
    margin-top: 15px;
    font-size: var(--fs-base);
}

.decoder-error {
    color: var(--color-danger);
}

.decoder-success {
    color: var(--color-success);
}

.decoder-warning {
    color: var(--color-warning);
}

.decoder-info {
    color: var(--color-text-muted);
}

.decoder-output {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.decoder-message h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-rule);
    padding-bottom: 8px;
    font-size: var(--fs-base);
}

.decoder-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
}

.decoder-table tr {
    border-bottom: 1px solid var(--color-rule);
}

.decoder-table tr:last-child {
    border-bottom: none;
}

.decoder-table td {
    padding: 8px 10px;
}

.decoder-field-key {
    color: var(--color-text-muted);
    width: 25%;
    font-family: inherit;
    text-align: right;
}

.decoder-field-value {
    color: var(--color-text);
    font-family: var(--font-mono);
    width: 35%;
    border-left: solid 1px var(--color-rule);
    padding-left: 20px;
    overflow-wrap: anywhere;
}

.decoder-field-description {
    color: var(--color-text-muted);
    width: 40%;
    padding-left: 15px;
}

@media (max-width: 768px) {
    .decoder-container {
        padding: 10px;
    }

    .decoder-panel,
    .decoder-message {
        padding: 15px;
    }

    .decoder-field-key {
        width: 50%;
    }
}