/* ikvaa.com — the visitor chip on the home page and the /client page.
   Builds on whois/style.css: same variables, same cards and tables. */

/* ------------------------------------------------------------------ chip
   One pill, four segments: country · IPv4 · IPv6 · your connection. The address
   segments are buttons that copy; the outer ones link to /client. */

.client-chip-row { margin-top: 18px; }

.client-chip {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: 12.5px;
    line-height: 1.3;
    overflow: hidden;
    vertical-align: middle;
}

.client-seg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 7px 13px;
    border: 0;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background .16s ease, color .16s ease;
}
.client-seg:first-child { border-left: 0; }
.client-seg:hover, .client-seg:focus-visible {
    background: var(--accent-soft);
    color: var(--text);
    text-decoration: none;
    outline: none;
}
.client-seg[disabled] { cursor: default; }
.client-seg[disabled]:hover { background: transparent; color: var(--text-muted); }

.client-seg-country { font-weight: 650; letter-spacing: .04em; }
.client-seg-country .flag { font-size: 15px; line-height: 1; letter-spacing: 0; }

.client-seg small {
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.client-seg code {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text);
    white-space: nowrap;
}
.client-seg code.pending, .client-seg code.none { color: var(--text-faint); }
.client-seg code.none { font-style: italic; }
.client-seg .copy-icon { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-faint); }
.client-seg:hover .copy-icon { color: var(--accent-text); }
.client-seg[disabled] .copy-icon { visibility: hidden; }

/* Brief confirmation after a copy: the label says so, the segment goes green. */
.client-seg.is-copied, .client-seg.is-copied:hover { background: var(--good-soft); color: var(--good); }
.client-seg.is-copied small, .client-seg.is-copied .copy-icon, .client-seg.is-copied code { color: var(--good); }

.client-seg-more { color: var(--accent-text); font-weight: 600; white-space: nowrap; }
.client-seg-more .arrow { display: inline-block; transition: transform .16s ease; }
.client-seg-more:hover .arrow { transform: translateX(2px); }

@media (max-width: 640px) {
    /* Country and the link share the top row; each address gets its own. */
    .client-chip { display: grid; grid-template-columns: auto 1fr; width: 100%; border-radius: 16px; }
    .client-seg-country { grid-column: 1; grid-row: 1; }
    .client-seg-more { grid-column: 2; grid-row: 1; justify-content: flex-end; }
    .client-seg-copy { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); justify-content: center; }
    .client-seg code { white-space: normal; overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------ page */

.client-page .result { margin-top: 30px; }
.client-page .client-title { font-family: var(--font); letter-spacing: -.02em; word-break: normal; }
.client-page .result-head .topbar-link { align-self: center; }
.client-page .card-value .flag { font-size: 18px; margin-right: 2px; }
.client-page .card-value code { font-family: inherit; }
.client-page .card-value code.pending, .client-page .card-value code.none { color: var(--text-faint); font-weight: 500; }
.client-page .card-value code.none { font-style: italic; }

.client-page table.kv td.mono { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.client-page table.kv td .note { color: var(--text-faint); font-size: 12px; font-family: var(--font); }
.client-page table.kv td.faint, .client-page .faint { color: var(--text-faint); }
.client-page table.kv.headers th { width: 28%; font-family: var(--mono); font-size: 13px; }
.client-page .section-head .count {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-faint);
}
.client-page .footer code { font-family: var(--mono); color: var(--text-muted); }

@media (max-width: 640px) {
    .client-page table.kv th { width: 38%; white-space: normal; }
}

/* ----------------------------------------------------------------- ports
   The port picker and result table, on /client and on an address page. */

.ports-intro { margin: 10px 0 12px; color: var(--text-muted); font-size: 13.5px; }
.ports-intro code { font-family: var(--mono); color: var(--text); }

.port-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.port-pick {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font: inherit;
    font-family: var(--mono);
    font-size: 12.5px;
    cursor: pointer;
    transition: all .16s ease;
}
.port-pick small { font-family: var(--font); font-size: 10.5px; color: var(--text-faint); }
.port-pick:hover { border-color: var(--border-strong); color: var(--text); }
.port-pick[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.port-pick[aria-pressed="true"] small { color: var(--accent-text); }

.ports-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.ports-form input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-family: var(--mono);
    font-size: 13px;
}
.ports-form input:focus { outline: none; border-color: var(--accent); }
.ports-form button { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.ports-form button[disabled] { opacity: .6; cursor: default; }
.ports-status { font-size: 12.5px; color: var(--text-muted); }

.ports-table th { width: 30%; }
.ports-table .port-no { font-family: var(--mono); color: var(--text); }
.ports-table .port-svc { margin-left: 6px; font-size: 12px; color: var(--text-faint); }
.ports-table .pill { font-family: var(--mono); font-size: 12px; }
.ports-table .port-ms { margin-left: 10px; font-size: 12px; color: var(--text-faint); }
.ports-note { margin-top: 12px; }