/* Nizhenets website panel — app styles ("Nöbet" design system, 2026-10-07)
   Load order: /nz/fonts.css → /nz/tokens.css → /nz/base.css → /nz/components.css → /site.css.
   Only tokens from /nz/tokens.css are used; the kit files are never edited.
   Elements whose className/textContent is rewritten by JS (.badge, .dot-state, .green/.red, #messageCount,
   everything uptime.js creates inside #uptimeRows) are styled through their existing selectors here. */

/* ---------- 1. Frame: masthead (header.top), page width ---------- */
.top.nz-masthead { grid-template-columns: auto minmax(0, 1fr) auto; }
.brand {
    grid-column: 1; grid-row: 1;
    font-family: var(--nz-font-serif); font-size: var(--nz-text-lg); font-weight: 500; line-height: 1.3;
    letter-spacing: -0.01em; color: var(--nz-ink); white-space: nowrap;
}
.brand i { font-style: normal; color: var(--nz-accent); }
.top-actions, .actions {
    grid-column: 2; grid-row: 1; justify-self: end; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--nz-space-2);
    padding: var(--nz-space-2) 0;
}
.top .nz-theme-toggle { grid-column: 3; grid-row: 1; }
.top .back {
    grid-column: 2; grid-row: 1; justify-self: end;
    padding: 8px 10px; border-radius: var(--nz-radius-control);
    font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-ink-2); text-decoration: none; white-space: nowrap;
}
.top .back:hover { color: var(--nz-ink); background: var(--nz-raised); }
.logout-form { margin: 0; }
.live {
    display: inline-flex; align-items: center; gap: 8px; padding: 0 6px;
    font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); white-space: nowrap;
}
.pulse {
    flex: none; width: 10px; height: 10px; border-radius: 50%;
    background: var(--nz-lamp-glow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nz-lamp-glow) 22%, transparent);
}
.message-button { gap: 0; }
.message-count {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px;
    border-radius: var(--nz-radius-pill); background: var(--nz-accent); color: var(--nz-accent-ink);
    font-size: var(--nz-text-xs); font-weight: 600; line-height: 1;
}
.message-count[hidden] { display: none; }

/* ---------- 2. Shared: honeypot, notices, badges, state dots, threads, form labels ---------- */
/* Spam trap field — must stay off-screen and unreachable. */
.hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.system-notice, .login-error, .alert, .notice {
    padding: var(--nz-space-3) var(--nz-space-4); border-radius: var(--nz-radius-control);
    border: 1px solid var(--nz-line); border-left-width: 3px; background: var(--nz-surface);
    font-size: var(--nz-text-sm); line-height: 1.5; color: var(--nz-ink);
}
.system-notice { margin: 0 0 var(--nz-space-6); }
.login-error { margin-bottom: var(--nz-space-4); }
.alert { margin: var(--nz-space-4) 0; }
.notice { margin-bottom: var(--nz-space-4); }
.system-notice.success, .alert.success, .notice { border-left-color: var(--nz-ok); }
.system-notice.error, .login-error, .alert, .notice.error { border-left-color: var(--nz-bad); }

/* Lamp + text badges. .badge/.uptime-state are rewritten by JS; .status/.mail-status are server-rendered. */
.badge, .uptime-state, .status, .mail-status {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 2px 10px 2px 8px; border-radius: var(--nz-radius-pill);
    border: 1px solid var(--nz-line); background: var(--nz-surface);
    font-size: var(--nz-text-xs); font-weight: 500; line-height: 1.6; color: var(--nz-ink-2);
}
.badge::before, .uptime-state::before, .status::before, .mail-status::before {
    content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--nz-line-strong);
}
.badge.up, .uptime-state.up, .mail-status { color: var(--nz-ok); background: var(--nz-ok-soft); border-color: transparent; }
.badge.up::before, .uptime-state.up::before, .mail-status::before { background: var(--nz-ok); border-color: var(--nz-ok); }
.badge.down, .uptime-state.down { color: var(--nz-bad); background: var(--nz-bad-soft); border-color: transparent; }
.badge.down::before, .uptime-state.down::before { background: var(--nz-bad); border-color: var(--nz-bad); }
.badge.wait, .mail-status.setup { color: var(--nz-warn); background: var(--nz-warn-soft); border-color: transparent; }
.badge.wait::before, .mail-status.setup::before { background: transparent; border-color: var(--nz-warn); }
.status { text-transform: capitalize; }

/* State dots written by the dashboard script (statusText). */
.dot-state { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.green { color: var(--nz-ok); }
.red { color: var(--nz-bad); }
.amber { color: var(--nz-warn); }

/* Conversation threads (contact tracking page and messages). */
.thread { display: grid; gap: var(--nz-space-3); margin: var(--nz-space-5) 0; }
.message {
    max-width: 85%; padding: var(--nz-space-3) var(--nz-space-4);
    border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-raised);
}
.message.admin { margin-left: auto; background: var(--nz-accent-soft); border-color: transparent; }
.message-head { display: flex; justify-content: space-between; gap: var(--nz-space-4); margin-bottom: 6px; font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.message-head strong { font-weight: 500; color: var(--nz-ink); }
.message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--nz-text-md); line-height: var(--nz-leading); }

/* Form labels (kit inputs carry .nz-input/.nz-textarea/.nz-select classes in the markup). */
.login-form label, .contact-page form label, .messages-page label {
    display: block; margin: var(--nz-space-4) 0 6px;
    font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2);
}
label .login-foot, label .note { display: inline; margin: 0; font-weight: 400; color: var(--nz-ink-3); }
/* Captcha widget (kit /nz/captcha.css): breathing room above it, below the last field. */
.login-form .nz-captcha, .contact-page form .nz-captcha { margin-top: var(--nz-space-4); }
/* The kit draws the select chevron with a data: SVG; this site's CSP (default-src 'self', no data:) blocks it,
   so the chevron is drawn with two gradients instead. */
.nz-select {
    background-image: linear-gradient(45deg, transparent 50%, var(--nz-ink-2) 50%), linear-gradient(135deg, var(--nz-ink-2) 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% - 1px), calc(100% - 12px) calc(50% - 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Field hints written by contact.js under the public form fields (character counter, minimum while too short). */
.field-hint { margin-top: 6px; font-size: var(--nz-text-xs); line-height: 1.4; color: var(--nz-ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.field-hint.is-short { color: var(--nz-warn); }
.field-hint.is-full { color: var(--nz-bad); }

/* Three-item summary strips: three equal columns, two below 600px with the odd last item spanning the row
   (no empty grey cell). */
.uptime-highlights.nz-stats, .meta.nz-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 3. Public page (signed out: contact request + sign in) ---------- */
.public-page .login-shell { padding-block: var(--nz-space-8) var(--nz-space-12); }
.public-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: var(--nz-space-6); align-items: start; }
.login-card {
    min-width: 0; padding: var(--nz-space-6);
    border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface);
}
.login-card .brand { display: block; margin-bottom: var(--nz-space-5); font-size: var(--nz-text-md); color: var(--nz-ink-2); }
.login-kicker, .kicker, .eyebrow { margin-bottom: var(--nz-space-2); font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); }
.login-card h1 { margin: 0 0 var(--nz-space-3); font-size: var(--nz-text-2xl); }
.login-copy, .copy { margin: 0 0 var(--nz-space-5); max-width: var(--nz-measure); font-size: var(--nz-text-md); color: var(--nz-ink-2); }
.login-submit { width: 100%; min-height: 40px; margin-top: var(--nz-space-5); }
.login-foot { margin: var(--nz-space-4) 0 0; font-size: var(--nz-text-xs); color: var(--nz-ink-3); }

/* ---------- 4. Dashboard ---------- */
.dashboard-page .shell { --nz-content: 1400px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr); gap: var(--nz-space-8); align-items: end; margin-bottom: var(--nz-space-10); }
.hero h1 { margin: 0 0 var(--nz-space-3); max-width: 18ch; font-size: var(--nz-text-3xl); line-height: 1.12; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--nz-ink-2); }
.hero p { margin: 0; max-width: var(--nz-measure); font-size: var(--nz-text-md); color: var(--nz-ink-2); }
.summary { padding: var(--nz-space-2) var(--nz-space-5); border-radius: var(--nz-radius-plate); background: var(--nz-raised); }
.summary-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--nz-space-4);
    padding: 10px 0; border-bottom: 1px solid var(--nz-line); font-size: var(--nz-text-sm);
}
.summary-row:last-child { border-bottom: 0; }
.summary-row span { color: var(--nz-ink-2); }
.summary-row strong { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#machine, #checkedAt { font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); }
/* dashboard.js adds body.status-stale (and .red on #dataAge) when the status cache is older than 150 s. */
.status-stale .pulse { background: var(--nz-bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nz-bad) 22%, transparent); }
.refresh-button { white-space: nowrap; }

/* Availability history */
.uptime-panel { margin: 0 0 var(--nz-space-10); }
.uptime-heading {
    display: flex; justify-content: space-between; align-items: flex-end; gap: var(--nz-space-6);
    margin-bottom: var(--nz-space-5); padding-bottom: var(--nz-space-4); border-bottom: 1px solid var(--nz-line);
}
.uptime-heading h2 { margin: 0 0 6px; font-size: var(--nz-text-xl); }
.uptime-heading p { margin: 0; max-width: var(--nz-measure); font-size: var(--nz-text-sm); color: var(--nz-ink-2); }
.uptime-legend { display: flex; flex-wrap: wrap; gap: var(--nz-space-4); font-size: var(--nz-text-xs); color: var(--nz-ink-2); white-space: nowrap; }
.uptime-legend span { display: inline-flex; align-items: center; gap: 6px; }
.uptime-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--nz-line-strong); }
.uptime-legend i.up { background: var(--nz-ok); }
.uptime-legend i.down { background: var(--nz-bad); }
.uptime-highlights { margin-bottom: var(--nz-space-5); }
.uptime-highlights > div { display: flex; flex-direction: column; }
.uptime-highlights span { margin-bottom: 4px; font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.uptime-highlights strong { font-size: var(--nz-text-2xl); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.uptime-highlights small { margin-top: 4px; font-size: var(--nz-text-xs); color: var(--nz-ink-3); }
.uptime-table { min-width: 880px; table-layout: fixed; }
.uptime-table th:nth-child(1) { width: 20%; }
.uptime-table th:nth-child(2) { width: 12%; }
.uptime-table th:nth-child(3) { width: 14%; }
.uptime-table th:nth-child(4) { width: 40%; }
.uptime-table th:nth-child(5) { width: 14%; }
.uptime-table th small { display: block; margin-top: 2px; font-size: var(--nz-text-xs); font-weight: 400; color: var(--nz-ink-3); }
.timeline-heading { display: flex; justify-content: space-between; gap: 8px; }
.uptime-service { display: block; font-weight: 500; color: var(--nz-ink); text-decoration: none; }
.uptime-service::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
    background: var(--service-accent, var(--nz-accent)); vertical-align: 1px;
}
.uptime-service:hover { color: var(--nz-accent); }
.uptime-category { display: block; margin-top: 2px; font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.uptime-percent { display: block; font-size: var(--nz-text-md); font-weight: 500; font-variant-numeric: tabular-nums; }
.uptime-coverage { display: block; margin-top: 2px; font-size: var(--nz-text-xs); color: var(--nz-ink-3); }
.uptime-checked { display: block; margin-top: 4px; font-size: var(--nz-text-xs); color: var(--nz-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.uptime-bars { display: flex; align-items: stretch; gap: 2px; width: 100%; height: 24px; }
.uptime-bars span { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: var(--nz-line); }
.uptime-bars span.up { background: var(--nz-ok); }
.uptime-bars span.down { background: var(--nz-bad); }
.uptime-bars span.unknown { background: var(--nz-line); }
.uptime-bars span:hover { opacity: 0.7; }
.uptime-outages { font-size: var(--nz-text-xs); }
.uptime-outages summary { cursor: pointer; font-weight: 500; color: var(--nz-bad); }
.uptime-outages ol { margin: 8px 0 0; padding-left: 18px; max-height: 140px; overflow-y: auto; line-height: 1.5; color: var(--nz-ink-2); }
.uptime-outages li { margin: 0 0 6px; }
.uptime-empty { color: var(--nz-ink-3); }
.uptime-loading { padding: var(--nz-space-6) !important; text-align: center; color: var(--nz-ink-2); }
.uptime-note { margin: var(--nz-space-3) 0 0; font-size: var(--nz-text-xs); line-height: 1.5; color: var(--nz-ink-3); }

/* Service plates */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nz-space-4); }
.card { position: relative; min-width: 0; }
.card.full { grid-column: 1 / -1; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--nz-space-4); margin-bottom: var(--nz-space-4); }
.card-title { display: flex; align-items: center; gap: var(--nz-space-3); min-width: 0; }
.icon {
    display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--nz-radius-control);
    background: var(--nz-accent-soft); color: var(--nz-accent);
    font-family: var(--nz-font-serif); font-size: var(--nz-text-lg); font-weight: 500;
}
.card h2 { margin: 0 0 2px; font-size: var(--nz-text-lg); }
.card-sub { font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.metrics {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: var(--nz-space-4);
    border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control); background: var(--nz-line); overflow: hidden;
}
.metric { min-width: 0; padding: 10px 12px; background: var(--nz-surface); }
.metric span { display: block; margin-bottom: 2px; font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.metric strong { display: block; font-size: var(--nz-text-md); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proxy-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--nz-space-6); }
.detail { display: flex; justify-content: space-between; gap: var(--nz-space-4); padding: 8px 0; border-bottom: 1px solid var(--nz-line); font-size: var(--nz-text-sm); }
.detail span { color: var(--nz-ink-2); }
.detail b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.panel-link { margin-top: var(--nz-space-4); }
.category-heading {
    grid-column: 1 / -1; margin: var(--nz-space-6) 0 0; padding-bottom: var(--nz-space-3); border-bottom: 1px solid var(--nz-line);
    font-family: var(--nz-font-serif); font-size: var(--nz-text-xl); font-weight: 500; letter-spacing: -0.01em; color: var(--nz-ink);
}
.flow { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; align-items: center; gap: var(--nz-space-2); margin-bottom: var(--nz-space-4); }
.node { padding: var(--nz-space-4); border-radius: var(--nz-radius-control); background: var(--nz-raised); text-align: center; }
.node strong { display: block; margin-bottom: 2px; font-size: var(--nz-text-sm); font-weight: 500; }
.node small { font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.arrow { text-align: center; font-size: var(--nz-text-xl); color: var(--nz-ink-3); }
.footer { display: flex; justify-content: space-between; gap: var(--nz-space-5); margin-top: var(--nz-space-8); font-size: var(--nz-text-xs); color: var(--nz-ink-3); }

/* ---------- 5. Messages page ---------- */
.layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: var(--nz-space-5); align-items: start; }
.panel { min-width: 0; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface); overflow: hidden; }
.panel-head { padding: var(--nz-space-4) var(--nz-space-5); border-bottom: 1px solid var(--nz-line); }
.panel-head h1 { margin: 0; font-size: var(--nz-text-xl); }
.panel-head p { margin: 4px 0 0; font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.panel-head .shortcut-hint { margin-top: 8px; color: var(--nz-ink-3); }
.shortcut-hint kbd {
    display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid var(--nz-line-strong); border-bottom-width: 2px;
    border-radius: 4px; background: var(--nz-raised); font-size: var(--nz-text-xs); line-height: 1.5; text-align: center; color: var(--nz-ink);
}
.empty small { display: block; margin-top: 6px; font-size: var(--nz-text-xs); color: var(--nz-ink-3); }
.ticket-list { max-height: calc(100vh - 220px); overflow: auto; }
.ticket-row { display: block; padding: var(--nz-space-3) var(--nz-space-5); border-bottom: 1px solid var(--nz-line); color: var(--nz-ink); text-decoration: none; }
.ticket-row:last-child { border-bottom: 0; }
.ticket-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--nz-line); }
.ticket-item:last-child { border-bottom: 0; }
.ticket-item .ticket-row { flex: 1; min-width: 0; border-bottom: 0; padding-left: var(--nz-space-2); }
.ticket-item:hover, .ticket-item.active { background: var(--nz-raised); }
.ticket-check, .bulk-all input { width: 16px; height: 16px; margin: 0 0 0 var(--nz-space-4); align-self: center; flex: none; accent-color: var(--nz-lamp-glow); cursor: pointer; }
.bulk-bar { padding: var(--nz-space-3) var(--nz-space-4); border-bottom: 1px solid var(--nz-line); display: grid; gap: var(--nz-space-2); }
.bulk-all { display: flex; align-items: center; gap: var(--nz-space-2); font-size: var(--nz-text-xs); color: var(--nz-ink-2); cursor: pointer; margin: 0; }
.bulk-all input { margin-left: 0; }
.bulk-actions { display: flex; flex-wrap: wrap; gap: var(--nz-space-2); }
.bulk-actions button:disabled { opacity: .45; cursor: not-allowed; }
.ticket-row:hover { background: var(--nz-raised); }
.ticket-row.active { background: var(--nz-raised); box-shadow: inset 3px 0 0 var(--nz-lamp-glow); }
.ticket-row strong { display: block; font-size: var(--nz-text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-row small { display: flex; justify-content: space-between; gap: var(--nz-space-3); margin-top: 4px; font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.unread { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--nz-lamp-glow); vertical-align: 1px; }
.content { padding: var(--nz-space-5); }
.subject-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--nz-space-5); }
.subject-row h2 { margin: 0; font-size: var(--nz-text-xl); overflow-wrap: anywhere; }
.metadata { display: flex; flex-wrap: wrap; gap: 6px var(--nz-space-4); margin: var(--nz-space-2) 0 var(--nz-space-5); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.reply-box { margin-top: var(--nz-space-5); padding-top: var(--nz-space-5); border-top: 1px solid var(--nz-line); }
.messages-page label { margin: 0 0 6px; }
.reply-actions, .status-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-space-2); margin-top: var(--nz-space-3); }
.reply-actions { justify-content: flex-end; }
.empty { padding: var(--nz-space-12) var(--nz-space-6); text-align: center; font-size: var(--nz-text-sm); color: var(--nz-ink-2); }
.messages-page form { margin: 0; }
.mail-card { margin-bottom: var(--nz-space-5); border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface); overflow: hidden; }
.mail-card summary {
    display: flex; justify-content: space-between; align-items: center; gap: var(--nz-space-4);
    padding: var(--nz-space-4) var(--nz-space-5); cursor: pointer; list-style: none;
    font-size: var(--nz-text-sm); font-weight: 500;
}
.mail-card summary::-webkit-details-marker { display: none; }
.mail-card summary small { font-size: var(--nz-text-xs); font-weight: 400; color: var(--nz-ink-2); }
.mail-card-body { padding: var(--nz-space-4) var(--nz-space-5) var(--nz-space-5); border-top: 1px solid var(--nz-line); }
.mail-card p { margin: 0 0 var(--nz-space-3); max-width: var(--nz-measure); font-size: var(--nz-text-sm); line-height: 1.5; color: var(--nz-ink-2); }
.mail-card p.mail-warning { color: var(--nz-bad); }
.mail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nz-space-3); }
.mail-card .mail-submit { margin-top: var(--nz-space-4); }
.email-delivery { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-space-2); margin-top: var(--nz-space-3); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.email-delivery.sent { color: var(--nz-ok); }
.email-delivery.failed { color: var(--nz-bad); }

/* ---------- 6. Contact page ---------- */
.contact-page .shell { --nz-content: 820px; }
.contact-page h1 { margin: 0 0 var(--nz-space-3); font-size: var(--nz-text-2xl); overflow-wrap: anywhere; }
.tracking {
    display: block; width: 100%; margin-top: var(--nz-space-3); padding: var(--nz-space-3) var(--nz-space-4);
    border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control); background: var(--nz-raised);
    color: var(--nz-ink); font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); overflow-wrap: anywhere; text-decoration: none;
}
.tracking:hover { color: var(--nz-accent); }
.meta { margin: var(--nz-space-5) 0; }
.meta > div { display: flex; flex-direction: column; }
.meta span { margin-bottom: 4px; font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.meta strong { font-size: var(--nz-text-md); font-weight: 500; font-variant-numeric: tabular-nums; }
.contact-page form .nz-button { margin-top: var(--nz-space-4); }
.note { margin: var(--nz-space-4) 0 0; font-size: var(--nz-text-xs); line-height: 1.5; color: var(--nz-ink-2); }

/* ---------- 7. Responsive ---------- */
@media (max-width: 980px) {
    .proxy-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; align-items: start; gap: var(--nz-space-6); }
    .uptime-heading { flex-direction: column; align-items: flex-start; gap: var(--nz-space-3); }
}
@media (max-width: 840px) {
    .grid { grid-template-columns: 1fr; }
    .card.full { grid-column: auto; }
    .flow { grid-template-columns: 1fr; }
    .arrow { transform: rotate(90deg); }
    .layout { grid-template-columns: 1fr; }
    .ticket-list { max-height: 340px; }
    .shortcut-hint { display: none; }
    .public-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .top.nz-masthead { position: static; padding-block: var(--nz-space-2); }
    .top-actions, .actions { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: flex-start; padding: 0 0 var(--nz-space-2); }
    /* 16px keeps iOS Safari from zooming the public forms on focus. */
    .login-form .nz-input, .login-form .nz-textarea, .contact-page .nz-input, .contact-page .nz-textarea,
    .messages-page .nz-input, .messages-page .nz-select, .messages-page .nz-textarea { font-size: 16px; }
    .message { max-width: 94%; }
    .mail-grid { grid-template-columns: 1fr; }
    .mail-card summary { flex-direction: column; align-items: flex-start; gap: var(--nz-space-2); }
    .content { padding: var(--nz-space-4); }
    .login-card { padding: var(--nz-space-5) var(--nz-space-4); }
}
@media (max-width: 600px) {
    .uptime-highlights.nz-stats, .meta.nz-stats, .metrics, .proxy-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uptime-highlights > .nz-stat:last-child:nth-child(odd), .meta > .nz-stat:last-child:nth-child(odd), .metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .hero h1 { font-size: var(--nz-text-2xl); }
    .metric strong { white-space: normal; }
    .details { grid-template-columns: 1fr; }
    .footer { flex-direction: column; gap: 6px; }
    .panel-link { width: 100%; }
}

/* Round 2: long-term availability, incident list, alerts card, inbox filters */
.uptime-bars span.partial { background: var(--nz-warn); }
.uptime-long { margin-top: var(--nz-space-8); }
.uptime-long h3 { margin: var(--nz-space-6) 0 var(--nz-space-3); font-size: var(--nz-text-lg); }
.uptime-long h3:first-child { margin-top: 0; }
.uptime-long-table { min-width: 760px; table-layout: fixed; }
.uptime-long-table th:nth-child(1) { width: 20%; }
.uptime-long-table th:nth-child(2), .uptime-long-table th:nth-child(3) { width: 10%; }
.uptime-long-table th:nth-child(4) { width: 18%; }
.uptime-long-table th:nth-child(5) { width: 42%; }
.uptime-long-table th small { display: block; margin-top: 2px; font-size: var(--nz-text-xs); font-weight: 400; color: var(--nz-ink-3); }
.uptime-days { gap: 1px; }
.uptime-spark { display: block; width: 120px; max-width: 100%; height: 28px; fill: var(--nz-accent); stroke: var(--nz-accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.uptime-spark polyline { fill: none; }
.uptime-incident-table { min-width: 560px; }
.alerts-card { margin-top: var(--nz-space-6); }
.alerts-card label { display: block; margin: var(--nz-space-3) 0 6px; font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); }
.alerts-card label.check-row { display: flex; align-items: center; gap: var(--nz-space-2); margin: 0 0 var(--nz-space-2); font-size: var(--nz-text-sm); color: var(--nz-ink); cursor: pointer; }
.alerts-card .check-row input { width: 16px; height: 16px; accent-color: var(--nz-lamp-glow); }
.alert-test-form { margin-top: var(--nz-space-3); }
.inbox-filter { padding: var(--nz-space-3) var(--nz-space-4); border-bottom: 1px solid var(--nz-line); display: grid; gap: var(--nz-space-2); }
.inbox-filter .filter-row { display: flex; gap: var(--nz-space-2); }
.inbox-filter .filter-row > :first-child { flex: 1; min-width: 0; }
.inbox-filter .filter-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-space-2); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.inbox-filter .filter-links a { color: var(--nz-ink-2); }
.inbox-filter .filter-links a[aria-current="true"] { color: var(--nz-ink); font-weight: 600; }
.ticket-status { display: inline-block; margin-left: 6px; font-size: var(--nz-text-xs); font-weight: 400; color: var(--nz-ink-3); }
@media (max-width: 760px) {
    .inbox-filter .filter-row { flex-wrap: wrap; }
}
/* NOBET VISUAL 20261011 START */
/* Nöbet / Architecture of connection — shared visual layer, 2026-10-11.
   Master source. Distributed by visual-20261011/build_visuals.py; never edit generated copies.
   Artwork is decorative. Controls, text, state classes and all form contracts stay in the app. */
:root {
  --nz-canvas: #eaf0e9;
  --nz-surface: #f8faf6;
  --nz-raised: #e0e9df;
  --nz-line: #cbd7cb;
  --nz-line-strong: #9faf9f;
  --nz-ink: #1d302b;
  --nz-ink-2: #52685b;
  --nz-ink-3: #596a60;
  --nz-accent: #286d5e;
  --nz-accent-hover: #205747;
  --nz-accent-soft: #dcece1;
  --nz-radius-plate: 20px;
  --nz-radius-control: 10px;
  --nv-art-day: url("/art/nobet-day.jpg?v=20261011");
  --nv-art-night: url("/art/nobet-night.jpg?v=20261011");
  --nv-art: var(--nv-art-day);
  --nv-shadow: 0 12px 32px -22px #31543d55, 0 1px 0 #ffffffa6 inset;
  --nv-shadow-large: 0 30px 80px -36px #294b386b, 0 1px 0 #ffffffb3 inset;
  --nv-grid: #36684708;
  --nv-hero-wash: #f0f5ed;
  --nv-hero-ink: #20372c;
  --nv-metal: #b99450;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --nz-accent-ink: #122b21;
  --nz-canvas: #162725;
  --nz-surface: #203430;
  --nz-raised: #2a4039;
  --nz-line: #38524a;
  --nz-line-strong: #597669;
  --nz-ink: #e8efe4;
  --nz-ink-2: #aec2b3;
  --nz-ink-3: #93ac9c;
  --nz-accent: #8acbb1;
  --nz-accent-hover: #a1d8c1;
  --nz-accent-soft: #29463b;
  --nv-art: var(--nv-art-night);
  --nv-shadow: 0 16px 36px -25px #030c0799, 0 1px 0 #c9ebc710 inset;
  --nv-shadow-large: 0 32px 80px -36px #020905cf, 0 1px 0 #d9efd014 inset;
  --nv-grid: #a0c49a05;
  --nv-hero-wash: #192e27;
  --nv-hero-ink: #e8efe4;
  --nv-metal: #d6b875;
}
:root[data-theme="black"] {
  color-scheme: dark;
  --nz-accent-ink: #04110f;
  --nz-canvas: #0a0a0a;
  --nz-surface: #121212;
  --nz-raised: #1b1b1b;
  --nz-line: #2a2a2a;
  --nz-line-strong: #6b6b6b;
  --nz-ink: #ededed;
  --nz-ink-2: #b3b3b3;
  --nz-ink-3: #8f8f8f;
  --nz-accent: #5ec2b5;
  --nz-accent-hover: #80d4c9;
  --nz-accent-soft: #0f2a27;
  --nv-art: var(--nv-art-night);
  --nv-shadow: 0 16px 36px -25px #000000d9, 0 1px 0 #ffffff0d inset;
  --nv-shadow-large: 0 32px 80px -36px #000000f2, 0 1px 0 #ffffff12 inset;
  --nv-grid: #ffffff05;
  --nv-hero-wash: #0f0f0f;
  --nv-hero-ink: #ededed;
  --nv-metal: #d6b875;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="black"]) {
    color-scheme: dark; --nz-accent-ink: #122b21;
    --nz-canvas: #162725; --nz-surface: #203430; --nz-raised: #2a4039;
    --nz-line: #38524a; --nz-line-strong: #597669;
    --nz-ink: #e8efe4; --nz-ink-2: #aec2b3; --nz-ink-3: #93ac9c;
    --nz-accent: #8acbb1; --nz-accent-hover: #a1d8c1; --nz-accent-soft: #29463b;
    --nv-art: var(--nv-art-night);
    --nv-shadow: 0 16px 36px -25px #030c0799, 0 1px 0 #c9ebc710 inset;
    --nv-shadow-large: 0 32px 80px -36px #020905cf, 0 1px 0 #d9efd014 inset;
    --nv-grid: #a0c49a05; --nv-hero-wash: #192e27; --nv-hero-ink: #e8efe4; --nv-metal: #d6b875;
  }
}
body {
  background-color: var(--nz-canvas);
  background-image: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--nz-accent) 9%, transparent), transparent 58%), linear-gradient(var(--nv-grid) 1px, transparent 1px), linear-gradient(90deg, var(--nv-grid) 1px, transparent 1px);
  background-size: 100% 900px, 48px 48px, 48px 48px;
  background-repeat: no-repeat, repeat, repeat;
}
.nz-masthead { background: color-mix(in srgb, var(--nz-surface) 94%, transparent); border-bottom-color: var(--nz-line); box-shadow: 0 3px 18px #122d1907; }
:is(.nz-button,.button,.primary-button,.secondary-button) { border-radius: var(--nz-radius-control); }
:is(.nz-button.is-primary,.button.primary,.button-primary,.primary-button) { box-shadow: 0 3px 9px #0b33291a, 0 1px 0 #ffffff1f inset; }
:is(.nz-input,.nz-select,.nz-textarea) { background: color-mix(in srgb, var(--nz-surface) 94%, var(--nz-canvas)); }
:is(.nz-plate,.nz-dialog) { box-shadow: var(--nv-shadow); }
:is(.nz-stats) { border: 1px solid var(--nz-line); border-radius: 16px; background: var(--nz-surface); padding: 16px 0; box-shadow: var(--nv-shadow); }
.nz-table thead th { background: var(--nz-raised); }
/* One rail treatment across the three dense applications; semantic status colors are preserved. */
:is(.shared-sidebar,.app-rail,.sidebar) {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--nz-accent-soft) 80%, var(--nz-surface)), var(--nz-surface) 290px);
  border-right-color: var(--nz-line);
}
:is(.shared-brand,.app-rail>.brand,.sidebar>.brand) { border-bottom: 1px solid var(--nz-line); padding-bottom: 22px; margin-bottom: 14px; }
:is(.shared-mark,.brand-mark,.card-mark) { box-shadow: 0 0 0 5px color-mix(in srgb, var(--nz-accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--nz-accent) 26%, transparent); }
:is(.shared-nav a.active,.nz-rail-nav a.active,.nav-item.active) { border-radius: 10px; background: var(--nz-accent-soft); box-shadow: inset 3px 0 var(--nv-metal); }
@media (max-width: 600px) { :root { --nz-radius-plate: 16px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; } }

/* Website: image-led entry, service overview and correspondence. */
.public-page .login-shell { padding-top: 40px; }
.public-grid { gap: 28px; align-items: start; }
.login-card { padding: 30px; box-shadow: var(--nv-shadow); }
.login-card:not(.contact-card) { overflow: hidden; }
.login-card:not(.contact-card)::before { content: ""; display: block; height: 192px; margin: -30px -30px 28px; background: var(--nv-art) 72% 55% / cover; border-bottom: 1px solid var(--nz-line); }
.contact-card { border-top: 3px solid var(--nv-metal); }
.contact-card h1 { font-size: clamp(28px, 3vw, 38px); max-width: 16ch; }
.login-kicker { color: var(--nz-accent); }
.login-form :is(input:not([type="hidden"]),textarea) { min-height: 42px; }
.dashboard-page .hero {
  position: relative; isolation: isolate; overflow: hidden; padding: 34px;
  border: 1px solid var(--nz-line); border-radius: 24px; min-height: 320px;
  grid-template-columns: minmax(0,1.25fr) minmax(270px,.75fr); align-items: end;
  background: var(--nv-hero-wash); box-shadow: var(--nv-shadow-large);
}
.dashboard-page .hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,var(--nv-hero-wash) 0%,color-mix(in srgb,var(--nv-hero-wash) 93%,transparent) 34%,transparent 85%), var(--nv-art) right 47% / auto 160% no-repeat; }
.hero h1 { font-size: clamp(30px,3.5vw,46px); color: var(--nv-hero-ink); }
.hero h1 em { color: var(--nz-accent); }
.hero p { max-width: 49ch; }
.hero .summary { background: color-mix(in srgb,var(--nz-surface) 93%,transparent); border: 1px solid var(--nz-line); border-radius: 14px; padding: 15px 18px; backdrop-filter: blur(12px); }
:is(.card,.uptime-panel,.panel) { box-shadow: var(--nv-shadow); }
.card { border-top: 3px solid color-mix(in srgb,var(--accent,var(--nz-accent)) 65%,var(--nz-line)); }
.card .icon { border: 1px solid var(--nz-line); border-radius: 12px; padding: 9px; background: var(--nz-accent-soft); }
.uptime-heading { padding-bottom: 20px; }
.uptime-highlights { margin-bottom: 20px; }
.messages-page .panel-head { background: linear-gradient(90deg,var(--nz-surface) 25%,color-mix(in srgb,var(--nz-surface) 94%,transparent)),var(--nv-art) right 42% / 520px auto; padding: 24px; }
.contact-page .shell > :is(.panel,.card) { border-top: 3px solid var(--nv-metal); }
@media (max-width: 760px) {
  .public-page .login-shell { padding-top: 22px; }
  .login-card { padding: 22px; }
  .login-card:not(.contact-card)::before { height: 170px; margin: -22px -22px 24px; }
  .dashboard-page .hero { padding: 24px; grid-template-columns: minmax(0,1fr); gap: 24px; }
  .dashboard-page .hero::before { opacity: .34; background-size: auto, auto 100%; }
}

/* NOBET VISUAL 20261011 END */

/* Main-site settings and incident history pagination (2026-10-12). */
.incident-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:16px 0 4px; }
.incident-page-status { margin:0; color:var(--nz-ink-2); font-size:var(--nz-text-sm); font-variant-numeric:tabular-nums; }
.incident-page-controls, .incident-page-numbers { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.incident-page-numbers .nz-button { min-width:36px; justify-content:center; }
.incident-page-numbers [aria-current="page"] { color:var(--nz-accent); border-color:var(--nz-accent); background:var(--nz-accent-soft); }
.incident-page-numbers > span { padding:0 3px; color:var(--nz-ink-2); }
.settings-shell { --nz-content:960px; }
.settings-heading { margin-bottom:28px; }
.settings-heading h1 { margin:0 0 10px; font:500 var(--nz-text-3xl)/1.15 var(--nz-font-serif); }
.settings-heading p { margin:0; color:var(--nz-ink-2); }
.settings-card-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:20px 24px; }
.settings-card-heading h2 { margin:0; font:500 var(--nz-text-lg)/1.3 var(--nz-font-serif); }
.settings-page .alerts-card { margin-top:0; }
.settings-page .mail-grid > div { min-width:0; }
.settings-page .mail-grid input:not([type="checkbox"]) { width:100%; }
@media (max-width:600px) {
    .incident-page-controls { display:grid; grid-template-columns:1fr 1fr; width:100%; }
    .incident-page-numbers { grid-column:1 / -1; grid-row:1; justify-content:center; }
    .incident-page-status { width:100%; text-align:center; }
    .settings-page .mail-grid { grid-template-columns:1fr; }
    .settings-page .nz-input { font-size:16px; }
    .settings-card-heading { padding:16px; }
}