/* Network monitor — dark "console" aesthetic. All variables scoped to
   .ping-app so the navbar (rendered by layouts.app above) keeps its own
   color tokens and the monitor's tokens don't leak to the rest of the
   page. The body keeps its layout colors; only the .ping-app subtree
   gets the dark monitor palette.
   Source: https://github.com/erkantaylan/fun/blob/master/ping.html */

.ping-app {
    --bg: #0f1115;
    --panel: #161922;
    --panel-2: #1c2030;
    --border: #262a37;
    --text: #e6e8ee;
    --text-dim: #8a8f9c;
    --text-faint: #5a6070;
    --accent: #5b8dee;
    --good: #2dbd6e;
    --warn: #e8a93b;
    --bad: #e8534a;
    --unknown: #6b7280;
    --radius: 10px;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    padding: 20px 18px 40px;
    border-radius: 8px;
    margin-top: 1rem;
}
.ping-app * { box-sizing: border-box; }

.ping-app header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.ping-app h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    color: var(--text);
}
.ping-app .subtitle { color: var(--text-dim); font-size: 13px; margin: 0; }

.ping-app .controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.ping-app button, .ping-app select {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ping-app button:hover, .ping-app select:hover { background: var(--panel-2); border-color: #3a3f50; }
.ping-app button.primary { background: var(--accent); border-color: var(--accent); color: white; }
.ping-app button.primary:hover { background: #4a7cd8; border-color: #4a7cd8; }
.ping-app button:disabled { opacity: 0.5; cursor: not-allowed; }

.ping-app .self-test {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ping-app .self-test .label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ping-app .self-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.ping-app .verdict {
    font-size: 13px;
    color: var(--text-dim);
    flex: 1;
    min-width: 200px;
}
.ping-app .verdict.warning { color: var(--warn); }
.ping-app .verdict.danger { color: var(--bad); }
.ping-app .verdict.ok { color: var(--good); }

.ping-app .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
/* List layout — single column, one site per row. Category headers
   still get full-width via grid-column: 1/-1. */
.ping-app .grid--list {
    grid-template-columns: 1fr;
}
.ping-app .grid--list .card {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto 120px auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
}
.ping-app .grid--list .card-head { margin-bottom: 0; display: contents; }
.ping-app .grid--list .latency {
    margin-bottom: 0;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
}
.ping-app .grid--list .latency > div:first-child { white-space: nowrap; }
.ping-app .grid--list .sparkline { height: 24px; }
.ping-app .grid--list .meta {
    margin-top: 0;
    grid-column: 1 / -1;
    color: var(--text-faint);
    font-size: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}
.ping-app .grid--list .data-meta { display: none; }
@media (max-width: 720px) {
    /* On narrow screens list mode falls back to a stacked layout. */
    .ping-app .grid--list .card { grid-template-columns: 1fr; }
    .ping-app .grid--list .card-head { display: flex; }
}

.ping-app .card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 0;
    transition: border-color 0.15s;
}
.ping-app .card.checking { border-color: var(--accent); }
.ping-app .card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.ping-app .site-name {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ping-app .favicon {
    width: 16px; height: 16px;
    border-radius: 3px;
    background: var(--panel-2);
    flex-shrink: 0;
}
.ping-app .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ping-app .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ping-app .status-up    { background: rgba(45,189,110,0.15); color: var(--good); }
.ping-app .status-up    .dot { background: var(--good); box-shadow: 0 0 8px rgba(45,189,110,0.6); }
.ping-app .status-slow  { background: rgba(232,169,59,0.15); color: var(--warn); }
.ping-app .status-slow  .dot { background: var(--warn); box-shadow: 0 0 8px rgba(232,169,59,0.6); }
.ping-app .status-down  { background: rgba(232,83,74,0.15); color: var(--bad); }
.ping-app .status-down  .dot { background: var(--bad); }
.ping-app .status-pending { background: rgba(91,141,238,0.12); color: var(--accent); }
.ping-app .status-pending .dot { background: var(--accent); animation: ping-pulse 1s infinite; }
.ping-app .status-unknown { background: rgba(107,114,128,0.15); color: var(--text-dim); }
.ping-app .status-unknown .dot { background: var(--unknown); }

@keyframes ping-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ping-app .latency {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.ping-app .latency .num {
    color: var(--text);
    font-size: 20px;
    font-weight: 500;
}
.ping-app .latency .unit { color: var(--text-faint); font-size: 11px; }

.ping-app .sparkline {
    height: 36px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin-top: 4px;
}
.ping-app .bar {
    flex: 1;
    min-width: 2px;
    background: var(--text-faint);
    border-radius: 1px;
    transition: height 0.3s;
    position: relative;
}
.ping-app .bar.b-good { background: var(--good); }
.ping-app .bar.b-slow { background: var(--warn); }
.ping-app .bar.b-bad  { background: var(--bad); }
.ping-app .bar.b-empty { background: rgba(107,114,128,0.2); }

.ping-app .meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 8px;
    font-family: var(--mono);
}
.ping-app .data-meta { margin-top: 4px; }
.ping-app .data-meta .real { color: var(--good); }

.ping-app .totals-bar {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}
.ping-app .stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ping-app .stat .stat-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ping-app .stat .stat-val {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--mono);
    color: var(--text);
}
.ping-app .stat .stat-val .unit { font-size: 11px; color: var(--text-faint); font-weight: 400; margin-left: 2px; }

.ping-app .legend {
    display: flex;
    gap: 18px;
    margin-top: 24px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-dim);
}
.ping-app .legend-item { display: flex; align-items: center; gap: 6px; }

.ping-app .note {
    margin-top: 18px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.6;
}
.ping-app .note strong { color: var(--text); }

.ping-app .toolbar-group {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ping-app label.checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
}
.ping-app label.checkbox input { cursor: pointer; }

.ping-app .category {
    grid-column: 1 / -1;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    font-weight: 600;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.ping-app .category:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Modal — escapes the .ping-app box via position:fixed but inherits the
   palette via being inside .ping-app for cascade. */
.ping-app .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    padding: 40px 20px;
    overflow-y: auto;
}
.ping-app .modal-backdrop.open { display: flex; }
.ping-app .modal {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    padding: 20px 22px;
    color: var(--text);
}
.ping-app .modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.ping-app .modal-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.ping-app .modal-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 22px;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 6px;
}
.ping-app .modal-close:hover { background: var(--panel-2); color: var(--text); }

.ping-app .add-form {
    display: grid;
    grid-template-columns: 1fr 2fr 1.2fr auto;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.ping-app .add-form input {
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    min-width: 0;
}
.ping-app .add-form input:focus {
    outline: none;
    border-color: var(--accent);
}
.ping-app .site-list {
    max-height: 50vh;
    overflow-y: auto;
    margin: 0 -6px;
    padding: 0 6px;
}
.ping-app .site-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    gap: 10px;
}
.ping-app .site-row:hover { background: var(--panel-2); }
.ping-app .site-row .info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.ping-app .site-row .info img { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.ping-app .site-row .info .name { font-weight: 500; font-size: 13px; }
.ping-app .site-row .info .url { font-size: 11px; color: var(--text-faint); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ping-app .site-row .cat-pill { font-size: 11px; color: var(--text-dim); background: var(--panel-2); padding: 2px 8px; border-radius: 4px; flex-shrink: 0; }
.ping-app .site-row:hover .cat-pill { background: var(--bg); }
.ping-app .remove-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-faint);
    padding: 4px 9px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
}
.ping-app .remove-btn:hover { color: var(--bad); border-color: var(--bad); background: rgba(232,83,74,0.08); }

.ping-app .modal-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-dim);
}

@media (max-width: 560px) {
    .ping-app .add-form { grid-template-columns: 1fr; }
}

/* Ping page goes edge-to-edge — the network monitor wants full viewport
   width, not the 48rem reading-width cap that the rest of the site uses
   for prose. :has() opts main out only when the ping app is rendered;
   other pages keep the narrow container. */
main:has(.ping-app) {
    max-width: none;
    padding-left: 1rem;
    padding-right: 1rem;
}