@import "tailwindcss";

@theme {
    --color-latency-excellent: #22c55e;
    --color-latency-good: #84cc16;
    --color-latency-moderate: #eab308;
    --color-latency-poor: #f97316;
    --color-latency-bad: #ef4444;
    --color-latency-offline: #6b7280;
}

body {
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---- Minimum tap targets ----------------------------------------------
   Every interactive control is at least 44x44 CSS px (Apple HIG, WCAG 2.2
   SC 2.5.5). Not scoped to a breakpoint or to `pointer: coarse`: a large
   phone in landscape is above the 768px breakpoint and still a touch
   device. */

/* The button grows to 44x44 while the negative margins keep its layout
   footprint at the 16x16 of the icon inside it, so row height and the
   icon's position are unchanged. */
.pin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.875rem;
}

/* A select paints its own background and border, so it has to actually be
   44 tall rather than borrow the trick above. */
#interval-select {
    min-height: 2.75rem;
}

/* The tappable target for #debug-toggle is the label wrapping it. */
.debug-toggle-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
}

.sparkline-container {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0) 100%
    );
}

/* ---- Mobile responsive layout (portrait / narrow viewports) ---- */
@media (max-width: 768px) {
    /* Header: stack title and controls vertically */
    header .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    header .flex.flex-col.items-end {
        align-items: flex-start !important;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* Pause button: smaller on mobile, but not below the tap-target floor */
    #pause-btn {
        padding: 0.5rem 1rem;
        min-height: 2.75rem;
    }

    #pause-btn svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    #pause-text {
        font-size: 0.875rem;
    }

    /* Summary box: wrap into a grid for readability */
    #summary {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
        justify-content: center;
        line-height: 1.6;
    }

    /* Hide the pipe separators on mobile */
    #summary .text-gray-600.mx-3 {
        display: none;
    }

    /* Host row: stack vertically */
    .host-row .flex.items-center.gap-4 {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    /* Info section: full width, remove fixed width */
    .host-row .w-\[420px\] {
        width: 100% !important;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    /* Host name row with dot */
    .host-row .flex.items-center.gap-2.min-w-\[200px\] {
        min-width: 0;
    }

    /* Latency value: slightly smaller on mobile */
    .host-row .latency-value {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    /* Sparkline: full width below the info */
    .host-row .sparkline-container {
        width: 100%;
        flex-shrink: 0;
    }

    /* Pin button: inline with the host info */
    .host-row .pin-btn {
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
    }

    .host-row {
        position: relative;
    }

    /* Footer legend: wrap nicely */
    footer p {
        line-height: 1.8;
    }
}