/* Component layer: one semantic contract shared by PC, tablet and mobile. */
html { scroll-behavior: smooth; }
body { min-width: 320px; overflow-x: hidden; }
.page { min-height: 100vh; overflow-x: clip; }
.container { width: min(var(--ui-content-max), calc(100% - (var(--ui-gutter) * 2))); }
.hero h1, .section-head h2, .section-head p { text-wrap: balance; }
.hero h1 { max-inline-size: 100%; }
.hero h1 > span, .version { vertical-align: middle; }
.card { border-radius: var(--ui-radius-card); box-shadow: var(--ui-shadow-card); }
.service, .ip-card, .metric, .project, .stats > div, .check-label, .policy label, .dropdown-trigger, .drop { border-radius: var(--ui-radius-control); }
.service, .ip-card, .metric, .project, .stats > div { min-inline-size: 0; }
.metric strong, .ip-values b, .project, .stats strong { overflow-wrap: anywhere; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { box-shadow: var(--ui-focus); }
.table-wrap { overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.table-wrap:focus-within { box-shadow: var(--ui-focus); }
.dropdown-menu { overscroll-behavior: contain; }
.link-result input { text-overflow: ellipsis; }
#analyze[aria-busy=true]{display:inline-flex;align-items:center;justify-content:center;gap:8px}
#analyze[aria-busy=true]::before{content:'';width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:analyze-spin .72s linear infinite}
@keyframes analyze-spin{to{transform:rotate(360deg)}}

/* V4 Stage 1 family status is a dedicated presentation component. */
.family-status-row{display:flex;justify-content:center;gap:10px;margin:10px auto 0;max-width:900px}
.family-status{display:inline-flex!important;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:6px 12px;border:1px solid #d7e1ef;border-radius:999px;background:#f7f9fc;color:#536172;font-size:12px;line-height:1;cursor:pointer}
.family-status span{font-weight:700}.family-status strong{font-size:12px;font-weight:700}.family-status[aria-pressed="true"]{box-shadow:0 0 0 2px rgba(40,100,180,.12)}
.family-status.normal{background:#eef8f1;border-color:#cde8d5;color:#26733b}.family-status.low{background:#f3f8ed;border-color:#dae8c7;color:#587423}.family-status.medium{background:#fff7e6;border-color:#f0d49a;color:#946200}.family-status.high{background:#fff0f0;border-color:#edc4c4;color:#a83a3a}.family-status.detecting{background:#eef5ff;border-color:#cfe0f6;color:#3d6fa5}.family-status.failed{background:#fff0f0;border-color:#edc4c4;color:#a83a3a}.family-status.unknown{background:#f7f9fc;color:#697586}
.family-status[hidden]{display:inline-flex!important}

/* IPv4 and IPv6 are the first two node controls and share the project visual language. */
.node-family-project.active{border-color:#c5daf6;background:#f4f9ff;color:var(--primary)}
.subscription-family{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 14px}
.subscription-family label{color:var(--muted);font-size:12px;font-weight:650}
.subscription-family select{min-height:42px;padding:8px 34px 8px 12px;font-weight:600;background:#fff}

@media (max-width: 1119px) and (min-width: 700px) {
  .container { width: calc(100% - (var(--ui-gutter-tablet) * 2)); }
}
@media (max-width: 699px) {
  .container { width: calc(100% - (var(--ui-gutter-mobile) * 2)); }
  .hero h1 { max-inline-size: 20ch; margin-inline: auto; }
  .version { display: table; margin: var(--ui-space-2) auto 0; }
  .section-head h2 { max-inline-size: 18ch; margin-inline: auto; }
  .section-head p { max-inline-size: 42ch; }
  .metric strong { max-inline-size: 100%; }
  .table-wrap { border-radius: var(--ui-radius-control); }
  .link-result input { min-width: 0; }
  .family-status-row{gap:8px;margin-top:8px}.family-status{flex:1;max-width:150px;min-height:40px;padding:8px 10px}
  .subscription-family{margin-bottom:12px}.subscription-family select{min-height:44px}
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #analyze[aria-busy=true]::before{animation:none;} }
.project.stage-locked,.project.stage-locked:hover{cursor:not-allowed;background:#f5f7fa;border-color:#e1e6ed;color:#8b97a7;box-shadow:none;transform:none;opacity:.82}
.project span,.project small{white-space:nowrap}.project.stage-locked small{color:#98a4b3}
.dropdown-trigger.stage-locked,.dropdown-trigger.stage-locked:hover,.policy label.stage-locked{cursor:not-allowed;background:#f5f7fa;border-color:#e1e6ed;color:#8b97a7;box-shadow:none;opacity:.82}
.dropdown-option.stage-locked,.dropdown-option.stage-locked:hover,.dropdown-option.stage-locked:focus{cursor:not-allowed;background:#f7f8fa;color:#98a4b3;font-weight:500}