body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
    /* stop iOS Safari inflating text in scrollable blocks (log view) */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: var(--font-sans);
    /* color-scheme makes the UA default ink pure white in dark and pure black
       in light; without this every element that does not name a token inherits
       that instead of the theme's body ink */
    color: var(--color-text);
    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:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
}

@media (hover: hover) {
    a:hover {
        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);
}

@media (hover: 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);
}

@media (hover: hover) {
    .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;
    }
}

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

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

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

.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;
}

@media (hover: hover) {
    .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;
}

@media (hover: hover) {
    .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;
}

@media (hover: hover) {
    .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: auto;
    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;
}

body.ticker-bottom .ticker-side svg {
    transform: rotate(180deg);
}

body.ticker-bottom #ticker {
    top: auto;
    bottom: 0;
    border-bottom-width: 0;
    border-top-width: 2px;
}

body.ticker-open #replaybar {
    bottom: calc(14px + var(--map-inset-bottom));
}

#map-attribution-foldout,
.map-attribution-note {
    bottom: var(--map-inset-bottom);
}

/* Where the free map starts and ends, derived once. Registered as lengths so
   script.js reads back px rather than the calc() this is written as. */
@property --map-inset-top {
    syntax: "<length>";
    inherits: true;
    initial-value: 10px;
}

@property --map-inset-bottom {
    syntax: "<length>";
    inherits: true;
    initial-value: 10px;
}

@property --map-inset-right {
    syntax: "<length>";
    inherits: true;
    initial-value: 10px;
}

@property --map-table {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

:root {
    --map-inset-top: var(--size-map-gap);
    --map-inset-bottom: var(--size-map-gap);
    /* the bar spans the map, so it steps aside for the table only */
    --map-table: 0px;
    --map-inset-right: var(--size-map-gap);
}

body.table-open {
    --map-table: var(--size-panel);
    --map-inset-right: calc(var(--size-map-gap) + var(--size-panel));
}

body.ticker-open:not(.ticker-bottom) {
    --map-inset-top: calc(var(--size-map-gap) + var(--size-ticker));
}

body.ticker-open.ticker-bottom {
    --map-inset-bottom: calc(var(--size-map-gap) + var(--size-ticker));
}

@media (hover: hover) {
}

@media (prefers-reduced-motion: reduce) {
}

@media only screen and (max-width: 500px) {
    body.ticker-open:not(.ticker-bottom) #measurecard {
        top: 0;
    }

    :root {
        --size-ticker: 36px;
    }
}

@media (hover: hover) {
    /* a tap leaves :hover applied on touch, so an untoggled button kept looking on */
    @media (hover: hover) {
    }
}

.map-attribution-foldout {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow, 400ms) ease;
    position: absolute;
    right: 54px;
    bottom: 10px;
    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.visible {
    opacity: 1;
    pointer-events: auto;
}

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

.map-attribution-note {
    font-size: var(--fs-2xs);
    line-height: 1.4;
    color: var(--color-text-muted);
}

.map-attribution-note 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-xs);
    background: var(--color-tooltip-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--color-ticker-border);
    color: var(--color-ticker-ink);
    text-align: center;
    border-radius: 0;
    padding: 6px 8px;
    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;
}

.tooltip-card:last-child {
    margin-bottom: 0;
}

.tooltip-sub,
.tooltip-dim {
    color: var(--color-ticker-muted);
    opacity: 0.85;
}

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

#hover-info div span:not(.tooltip-dim) {
    font-size: var(--fs-2xl);
}


.filter-empty {
    display: none;
    position: absolute;
    top: calc(var(--map-inset-top) + 50px);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-card);
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 16px;
    border-radius: var(--radius-2xl);
    background: var(--overlay-bg);
    color: var(--overlay-ink);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-sm);
}

.filter-empty.visible {
    display: flex;
}

.filter-empty button {
    padding: 2px 12px;
    border: none;
    border-radius: var(--radius-2xl);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.count-filtered {
    color: var(--color-accent);
    font-weight: 600;
}


.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: var(--map-inset-top);
    left: auto;
    right: 60px;
    transform: translateX(calc(-1 * var(--map-table)));
    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;
    transition: transform var(--dur-slow) ease-out;
}

.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"] {
    opacity: 0.35;
}

.stat-item.stat-off {
    opacity: 0.4;
}

.stat-item.stat-off span:last-child {
    text-decoration: line-through;
}

.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 {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.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: 8px 4px;
    white-space: nowrap;
    border-collapse: collapse;
}

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

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

.tablecard_inner table th:nth-child(1),
.tablecard_inner table td:nth-child(1) {
    /* Name: absorbs the slack so the rest hold exact px */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

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

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

.tablecard_inner table th.num,
.tablecard_inner table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tablecard_inner table>tbody>tr {
    border-bottom: 1px solid var(--color-border);
}

.tablecard_inner table>tbody>tr.stale>td {
    color: var(--color-text-muted);
}

.tablecard_inner table>tbody>tr.selected {
    background: var(--color-selected);
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.tablecard_inner table thead th span {
    font-size: 0.9em;
    font-weight: var(--fw-normal);
    opacity: 0.7;
}

.tablecard_inner .row-relay {
    margin-left: 4px;
    color: var(--color-text-muted);
}

.table-pager[hidden] {
    display: none;
}

.table-pager {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    font-size: var(--fs-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.table-pager button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
}

.table-pager button:disabled {
    opacity: 0.3;
    cursor: default;
}

@media (hover: hover) {
    .table-pager button:not(:disabled):hover {
        background: var(--color-hover);
    }
}

.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);
}

/* Targetcard styling */

.pinned {
    /* glass edge over the blurred map; an inset ring, not a border, so pinning
       cannot grow the box and push a full-height card off a small screen */
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.opacity-50 {
    opacity: 0.5;
}

.targetcard-width {
    width: 400px;
}

#targetcard.flush-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#targetcard.flush-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#targetcard.flush-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#targetcard.flush-bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.measurecard-width {
    width: 450px;
}

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

.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;
}

@media (hover: hover) {
}

@media (hover: hover) {
}

@media (hover: hover) {
}

/* a row whose first field needs the room of two columns, so the field beside it
   still lines up with the third column of the rows above and below */
.row-wide-first>div:first-child { flex: 2; }

/* 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);
    /* Capped by the targetcard's own stacking context (--z-card), so a token above
       that is a promise the DOM cannot keep. This only has to clear its
       siblings inside the card. */
    z-index: var(--z-sticky);
    min-width: 200px;
    max-width: 300px;
    font-size: var(--fs-sm);
    padding: 8px 12px;
}

.dim-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.dim-hull {
    fill: var(--color-accent);
    fill-opacity: .10;
    stroke: var(--color-accent);
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.dim-axis {
    stroke: var(--color-text-subtle);
    stroke-width: .9;
    stroke-dasharray: 4 4;
}

.dim-ext { stroke: var(--color-text-subtle); stroke-width: .7; stroke-dasharray: 2 2; }
.dim-arrow { stroke: var(--color-text-muted); stroke-width: .9; }

.dim-t {
    fill: var(--color-text-muted);
    font-size: 9.5px;
    font-family: inherit;
}

.spd-line {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.spd-axis { stroke: var(--color-text-subtle); stroke-width: .9; }
.spd-grid { stroke: var(--color-rule); stroke-width: .8; stroke-dasharray: 3 3; }

@media (hover: hover) {
}

@media (hover: hover) {
}

/* folded by the user, or empty for this vessel */
.sec-collapsed,
.sec-empty { display: none !important; }

.hist-wrap { display: block; width: 100%; }

/* Reported changes as a timeline: a rail down the left, one entry per change,
   with what it was and what it became. */
.tl {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 10px 12px 8px 28px;
}

.tl::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: var(--color-rule);
}

.tl-item {
    position: relative;
    padding: 9px 0 11px;
}

.tl-item + .tl-item { border-top: 1px solid var(--color-rule); }

.tl-dot {
    position: absolute;
    left: -17px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-targetcard-edge);
}

.tl-head {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.tl-title {
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: var(--fs-2xs);
    letter-spacing: .04em;
}

.tl-time {
    color: var(--color-text-subtle);
    font-size: var(--fs-2xs);
    white-space: nowrap;
}

.tl-vals {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tl-pill {
    color: var(--color-text);
    font-size: var(--fs-sm);
}

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

.tl-arrow { color: var(--color-text-subtle); font-size: var(--fs-sm); }

.tl-firstseen {
    color: var(--color-text-subtle);
    font-size: var(--fs-2xs);
    font-style: italic;
}

.chart-grad-top { stop-color: var(--color-accent); stop-opacity: .28; }
.chart-grad-bottom { stop-color: var(--color-accent); stop-opacity: .02; }

.dim-note {
    display: block;
    padding: 10px 2px;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-align: center;
}

.dim-origin { fill: var(--color-antenna); }
.dim-origin-ring { fill: none; stroke: var(--color-antenna); stroke-width: 1; opacity: .5; }
.dim-origin-line { stroke: var(--color-text-subtle); opacity: .6; }
.dim-origin-t { fill: var(--color-text-muted); }

.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) {

    #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%;
    }

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

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

/* 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_devices .device-row {
    cursor: pointer;
}

#stat_devices .device-value {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 34px;
}

#stat_devices .device-value .info_icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-text-muted);
}

@media (hover: hover) {
    #stat_devices .device-row:hover .info_icon {
        background-color: var(--color-text);
    }
}

.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);
}

/* Map & overlays selection dialog */


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

.overlay-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    margin-bottom: 6px;
}

.overlay-row .map-attribution-note {
    grid-column: 2;
    margin-top: -2px;
}

.overlay-dim {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    margin-left: 2px;
}

.overlay-dim .slider {
    width: 100%;
    margin: 0;
}

.overlay-dim-value {
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: var(--color-text-muted);
    min-width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.overlay-row.overlay-off .overlay-dim {
    display: none;
}

.settings_main #overlayContainer .overlay-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    margin: 0;
    padding: 8px 2px;
    border-bottom: 1px solid var(--color-rule);
}

.settings_main #overlayContainer .overlay-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.settings_main #overlayContainer .overlay-row:first-child {
    padding-top: 0;
}

.settings_main #overlayContainer .overlay-row > input[type="checkbox"] {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
}

.settings_main #overlayContainer .overlay-row > label {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    margin: 0;
    font-size: var(--fs-base);
}

.settings_main section > div.st-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: stretch;
    align-items: flex-start;
    column-gap: var(--space-3);
    row-gap: 14px;
    margin: 4px 0 2px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--color-nest-1);
}

.settings_main section > div.st-group > div {
    flex: 1 1 100%;
    margin: 0;
}

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

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

.settings_main section div > span.st-wide {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

.settings_main #baseMapSelector {
    width: 100%;
}

.settings_main #basemap_credit {
    margin: 1px 0 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.settings_main #overlayContainer .overlay-row > .map-attribution-note {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.settings_main #overlayContainer .overlay-row > .overlay-dim {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
}

.settings_main #overlayContainer .overlay-dim > span {
    grid-column: 2;
    justify-self: end;
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
}

.settings_main #overlayContainer .overlay-row .overlay-dim input[type="range"] {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.settings_main #overlayContainer .overlay-row.overlay-off > .overlay-dim {
    display: none;
}

.settings_main section div#overlayContainer {
    display: block;
    align-self: stretch;
    margin: 4px 0 2px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-nest-2);
}

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

@media (hover: hover) {
    #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);
}

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

/* same treatment as .dialog-header .close_icon in components.css */
.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;
}

@media (hover: hover) {
    .settings_header>.close_icon:hover {
        opacity: 0.65;
    }
}

.dialog-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
}

.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;
}

/* 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-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;
}

.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: 0;
    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 section div.filter-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-self: stretch;
    gap: 2px 20px;
    margin: 4px 0 2px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-nest-2);
}

.settings_main section div.filter-checks,
.settings_main section div#overlayContainer {
    border: none;
}

.settings_main section div button.st-danger {
    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-field-border));
    color: color-mix(in srgb, var(--color-danger) 75%, var(--color-text));
}

@media (hover: hover) {
    .settings_main section div button.st-danger:hover {
        border-color: var(--color-danger);
        background: color-mix(in srgb, var(--color-danger) 8%, transparent);
    }
}

.settings_main section div>span[data-action] {
    align-self: flex-start;
    width: fit-content;
    grid-template-columns: minmax(7rem, max-content);
}

.settings_main section div.filter-allnone {
    flex-direction: row;
    align-self: flex-start;
    gap: 8px;
    margin: 6px 0 0;
}

.settings_main section div.filter-allnone button {
    padding: 0;
    font-size: var(--fs-sm);
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    width: auto;
}

@media (hover: hover) {
    .settings_main section div.filter-allnone button:hover {
        text-decoration: underline;
    }
}

.filter-check {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-base);
    white-space: nowrap;
    cursor: pointer;
    padding: 7px 6px;
    margin: 0 -6px;
    border-radius: var(--radius-sm);
}

@media (hover: hover) {
    .filter-check:hover {
        background: var(--color-band-accent);
    }
}

.settings_main .filter-check input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: auto;
    width: 15px;
    height: 15px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.settings_main .filter-check input[type="checkbox"]::before,
.settings_main .filter-check input[type="checkbox"]::after {
    content: none;
}

.filter-check .shipicon,
.filter-check .staticon,
.filter-check .helicoptericon {
    flex: none;
    margin: -2px 2px;
}

.settings_main section.st-off {
    display: none;
}

.filter-topbar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 12px;
}

#filter_summary,
.settings_main section div span.st-note {
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: var(--color-text-muted);
    margin-bottom: 0;
}

#filter_summary.filter-on {
    color: var(--color-accent);
    font-weight: 600;
}

.settings_main section div.dualrange {
    align-self: stretch;
    display: block;
    margin: 0;
}

.settings_main section div.dr-track {
    display: block;
    position: relative;
    height: 24px;
    margin: 0;
}

.settings_main section div.dr-fill {
    margin: 0;
}

.dr-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    height: 8px;
    border-radius: var(--radius-lg);
    background: var(--color-track);
}

.dr-fill {
    position: absolute;
    top: 8px;
    height: 8px;
    border-radius: var(--radius-lg);
    background: var(--color-accent);
    opacity: 0.25;
}

.dr-track input[type="range"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    background: none;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.dr-track input[type="range"]::-webkit-slider-runnable-track {
    background: none;
    border: none;
    height: 24px;
}

.dr-track input[type="range"]::-moz-range-track {
    background: none;
    border: none;
    height: 24px;
}

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

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

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

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

.settings_main button:not(.tab-scroll-btn) {
    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;
    /* the swoosh eats 25% of the width at the bottom edge: the last tab needs
       that much room or its underline is clipped */
    padding: 0 4.6rem 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 [hidden] {
    display: none;
}

.settings_main section {
    margin: 0 1.25rem;
    padding: 1rem 0 0.25rem;
    font-size: inherit;
}

@media (max-width: 560px) {
    .settings_main section {
        margin: 0 0.5rem;
    }

    .settings_main section > div.st-group {
        padding: 8px 9px;
    }
}

.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 0 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.st-group>div.half,
    .settings_main section>div.threequarter {
        flex-basis: 100%;
    }

    .settings_main section>div.third,
    .settings_main section div.st-group>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%;
}

/* range-input track/thumb styling is shared with the hub in components.css */

/* Preview of the speed palette: the gradient the map draws tracks with. The
   generic field rule would make a stretching column of it, hence the sizing.
   The margins pad the 14px band out to the 28px box of the slider beside it,
   so both columns' descriptions sit on the same line. */
.settings_main .speed-legend {
    flex: 0 0 auto;
    width: 100%;
    height: 12px;
    margin: 7px 0;
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-md);
}

/* border/radius/shadow come from the shared field styling in components.css */
.settings_main .color-picker {
    width: 110px;
    height: 32px;
    padding: 4px;
    background: var(--color-surface-raised);
}

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

@media (hover: hover) {
    .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);
    }
}

/* .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 .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;
}

.tableside_window .settings_header .search-box {
    width: 32px;
    max-width: none;
    padding: 5px 0 5px 31px;
    background-position: 7px center;
    background-color: transparent;
    cursor: pointer;
    transition: width var(--dur-med) ease, background-color var(--dur-med) ease,
        border-color var(--dur-med) ease, box-shadow var(--dur-med) ease;
}

.tableside_window .settings_header .search-box:not(:placeholder-shown) {
    width: min(260px, 100%);
    padding-right: 12px;
    background-color: var(--color-band-accent);
    cursor: text;
}

.tableside_window .settings_header .search-box:focus {
    width: min(260px, 100%);
    padding-right: 12px;
    background-color: var(--color-band-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    cursor: text;
}

@media (hover: hover) {
    .tableside_window .settings_header .search-box:hover {
        background-color: var(--color-band-accent);
    }
}

/* 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;
}

@media (max-width: 700px) {
    .ship-table-columns-btn span {
        display: none;
    }

    .ship-table-columns-btn {
        gap: 4px;
        padding: 0 10px;
    }
}

#shipTableFilterBtn {
    margin-left: auto;
}

.search-container .search-box {
    margin-right: 12px;
}

#shipTableFilterBtn.filter-on {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.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;
}

@media (hover: hover) {
    .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);
}

@media (hover: hover) {
    .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%;
}

@media (hover: hover) {
    .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;
}

@media (hover: hover) {
    .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;
}

@media (hover: hover) {
    .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);
}

@media (hover: hover) {
    .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;
    justify-content: center;
    transition: opacity var(--dur-med) ease;
    color: var(--color-alert);
    width: 20px;
    height: 20px;
}

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

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

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

.realtime-spacer {
    flex: 1;
}

@media (hover: hover) {
    .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;
}

@media (hover: hover) {
    .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;
}

@media (hover: hover) {
    .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;
}

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

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

@media (hover: hover) {
    .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);
}

@media (hover: hover) {
    .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;
}

@media (hover: hover) {
    .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%;
    }
}
/* ---------------------------------------------------------------------------
   Replay transport bar — a floating capsule pinned to the bottom of the map.
   Hidden until the replay feature is opened.
   --------------------------------------------------------------------------- */

#replaybar {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: var(--z-card);

    display: none;
    align-items: center;
    gap: 12px;

    width: min(460px, calc(100% - 32px));
    padding: 8px 14px;
    box-sizing: border-box;

    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-surface-raised) 82%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);

    opacity: 0;
    transition: opacity 160ms ease, transform 160ms ease;
}

#replaybar.visible {
    display: flex;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#replaybar button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}

#replaybar button:not(.replaybar-speed) {
    width: var(--size-hit);
    height: var(--size-hit);
}

#replaybar button:disabled {
    opacity: 0.4;
    cursor: default;
}

#replaybar i {
    font-size: var(--size-icon);
}

/* one button, three glyphs — which shows depends on state on #replaybar */
.replay-icon-pause,
.replay-icon-wait {
    display: none;
}

#replaybar.playing .replay-icon-play {
    display: none;
}

#replaybar.playing .replay-icon-pause {
    display: block;
}

#replaybar.loading .replay-icon-play,
#replaybar.loading .replay-icon-pause {
    display: none;
}

#replaybar.loading .replay-icon-wait {
    display: block;
    animation: replay-spin 900ms linear infinite;
}

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

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

/* #replaybar i sets the size by id, so this has to outrank it */
#replaybar .replaybar-labels i {
    font-size: var(--size-icon-sm);
}

.replaybar-labels.on {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    border-radius: var(--radius-full);
}

/* one button, two glyphs — open label when on, slashed when off */
.replay-icon-labels-on {
    display: none;
}

.replaybar-labels.on .replay-icon-labels-on {
    display: block;
}

.replaybar-labels.on .replay-icon-labels-off {
    display: none;
}

.replaybar-time {
    flex-shrink: 0;
    min-width: 52px;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    text-align: center;
    user-select: none;
}

/* the wall-clock stamp is the wider of the two, and can carry a date */
#replayElapsed {
    min-width: 76px;
    color: var(--color-text);
}

/* the track is a thin rail that thickens on hover, Apple-style */
.replaybar-track {
    position: relative;
    flex: 1;
    height: 20px;
    display: flex;
    align-items: center;
}

.replaybar-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-text) 18%, transparent);
    transition: height 120ms ease;
}

.replaybar-fill {
    position: absolute;
    left: 0;
    width: 0;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--cyan-500);
    pointer-events: none;
    transition: height 120ms ease;
}

@media (hover: hover) {
    .replaybar-track:hover::before,
    .replaybar-track:hover .replaybar-fill {
        height: 6px;
    }
}

/* the real input sits transparent on top so it keeps native drag behaviour */
.replaybar-track input[type="range"] {
    position: relative;
    width: 100%;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.replaybar-track input[type="range"]:disabled {
    cursor: default;
}

.replaybar-track input[type="range"]::-webkit-slider-runnable-track {
    height: 20px;
    background: transparent;
}

.replaybar-track input[type="range"]::-moz-range-track {
    height: 20px;
    background: transparent;
}

.replaybar-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: var(--radius-circle);
    background: var(--color-text);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transition: opacity 120ms ease;
}

.replaybar-track input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: var(--radius-circle);
    background: var(--color-text);
    opacity: 0;
    transition: opacity 120ms ease;
}

.replaybar-track input[type="range"]:active::-webkit-slider-thumb {
    opacity: 1;
}

@media (hover: hover) {
    .replaybar-track:hover input[type="range"]:not(:disabled)::-webkit-slider-thumb {
        opacity: 1;
    }
}

.replaybar-track input[type="range"]:active::-moz-range-thumb {
    opacity: 1;
}

@media (hover: hover) {
    .replaybar-track:hover input[type="range"]:not(:disabled)::-moz-range-thumb {
        opacity: 1;
    }
}

.replaybar-speed {
    min-width: 34px;
    height: 22px;
    padding: 0 6px;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

/* Touch has no hover, so a thumb that only appears on hover is a handle the
   user can never see. Show it always, and make it big enough to grab. */
@media (hover: none) {

    .replaybar-track input[type="range"]::-webkit-slider-thumb,
    .replaybar-track input[type="range"]::-moz-range-thumb {
        opacity: 1;
    }

    .replaybar-track input[type="range"]::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
        margin-top: 2px;
    }

    .replaybar-track input[type="range"]::-moz-range-thumb {
        width: 16px;
        height: 16px;
    }

    .replaybar-track::before,
    .replaybar-fill {
        height: 6px;
    }
}

/* On a phone the capsule becomes a bar across the foot of the map: full width,
   flat against the bottom edge, clear of the home indicator. */
@media (max-width: 560px) {
    #replaybar {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        gap: 6px;
        padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        transform: translateY(8px);
    }

    #replaybar.visible {
        transform: translateY(0);
    }

    /* touch targets, not pointer targets */
    .replaybar-play {
        width: 40px;
        height: 40px;
    }

    #replaybar svg {
        width: 24px;
        height: 24px;
    }

    .replaybar-close svg {
        width: 20px;
        height: 20px;
    }

    .replaybar-time {
        min-width: 38px;
        font-size: 10px;
    }

    #replayElapsed {
        min-width: 38px;
    }

    .replaybar-speed {
        min-width: 32px;
        height: 28px;
        font-size: var(--fs-xs);
    }

}