/* ==========================================================================
   Subnet Calculator — page-specific bits only. The test card shell, numbered
   steps, bulleted lists and reference table come from tool-shared.css (loaded
   alongside this file); the address/CIDR form, CIDR quick-picks and result
   grid are new here, built from the same tokens (colors, radii, shadows,
   type) as the rest of the site — no new palette.
   ========================================================================== */

/* ---------- Form ---------- */

.pv-sn-form {
	max-width: 760px;
	margin: 0 auto;
	text-align: left;
}

.pv-sn-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 160px;
	gap: 14px;
	margin-bottom: 16px;
}

.pv-sn-field label {
	display: block;
	margin: 0 0 8px;
	color: var(--pv-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -.005em;
}

.pv-sn-input {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1px solid var(--pv-line);
	border-radius: var(--pv-r-sm);
	background: #fff;
	color: var(--pv-ink);
	font-family: var(--pv-mono);
	font-size: 15.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.pv-sn-input::placeholder { color: var(--pv-line); font-weight: 500; }
.pv-sn-input:hover { border-color: #d7dae1; }
.pv-sn-input:focus {
	outline: none;
	border-color: var(--pv-cyan);
	box-shadow: 0 0 0 3px rgba(14, 165, 196, .14);
}
.pv-sn-input[aria-invalid="true"] {
	border-color: #d63c3c;
	box-shadow: 0 0 0 3px rgba(214, 60, 60, .1);
}
.pv-sn-input::-webkit-outer-spin-button,
.pv-sn-input::-webkit-inner-spin-button { margin-left: 6px; }

.pv-sn-cidr {
	position: relative;
	display: flex;
	align-items: center;
}
.pv-sn-cidr__slash {
	position: absolute;
	left: 16px;
	color: var(--pv-muted);
	font-family: var(--pv-mono);
	font-size: 15.5px;
	font-weight: 700;
	pointer-events: none;
}
.pv-sn-cidr .pv-sn-input { padding-left: 30px; }

@media (max-width: 560px) {
	.pv-sn-row { grid-template-columns: 1fr; }
}

/* ---------- CIDR quick-pick chips ---------- */

.pv-sn-presets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}
.pv-sn-presets__label {
	margin-right: 2px;
	color: var(--pv-muted);
	font-size: 12px;
	font-weight: 700;
}
.pv-sn-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 14px;
	border: 1px solid var(--pv-line);
	border-radius: 999px;
	background: var(--pv-soft-2);
	color: var(--pv-ink-2);
	font-family: var(--pv-mono);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pv-sn-chip:hover { border-color: #d7dae1; background: #fff; }
.pv-sn-chip.is-active {
	border-color: var(--pv-ink);
	background: var(--pv-ink);
	color: #fff;
}

/* ---------- Results ---------- */

.pv-sn-results { margin-top: 26px; text-align: left; }

.pv-sn-results__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--pv-line-2);
}
.pv-sn-results__cidr {
	margin: 0;
	font-family: var(--pv-mono);
	font-size: clamp(16px, 3vw, 19px);
	font-weight: 700;
	color: var(--pv-ink);
	overflow-wrap: anywhere;
}

.pv-sn-badge--private {
	border-color: rgba(18, 183, 106, .3);
	background: rgba(18, 183, 106, .12);
	color: var(--pv-green);
}

.pv-sn-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.pv-sn-cell {
	padding: 14px 16px;
	border: 1px solid var(--pv-line-2);
	border-radius: 14px;
	background: var(--pv-soft-2);
}
.pv-sn-cell__k {
	margin: 0 0 6px;
	color: var(--pv-muted);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.pv-sn-cell__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.pv-sn-cell__v {
	margin: 0;
	color: var(--pv-ink);
	font-family: var(--pv-mono);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

.pv-sn-copy {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--pv-line);
	border-radius: 10px;
	background: #fff;
	color: var(--pv-ink-2);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pv-sn-copy:hover { border-color: var(--pv-ink); color: var(--pv-ink); }
.pv-sn-copy.is-copied { border-color: var(--pv-green); background: rgba(18, 183, 106, .12); color: var(--pv-green); }
.pv-sn-copy .pv-ico { width: 14px; height: 14px; }

.pv-sn-note {
	margin: 16px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--pv-line-2);
	border-radius: 14px;
	background: #fff;
	color: var(--pv-ink-2);
	font-size: 13px;
	line-height: 1.6;
}

@media (max-width: 780px) {
	.pv-sn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.pv-sn-grid { grid-template-columns: 1fr; }
}

/* ---------- Worked example (static, in the CIDR section) ---------- */

.pv-sn-example { max-width: 760px; margin: 22px auto 0; }
.pv-sn-example__title {
	margin: 0 0 12px;
	font-family: var(--pv-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--pv-muted);
}

/* ---------- Reference table footnotes ---------- */

.pv-sn-table-note {
	max-width: 760px;
	margin: 14px auto 0;
	color: var(--pv-muted);
	font-size: 12.5px;
	line-height: 1.7;
}