/* /tools/ index. Scoped to .tix, same as every other Eleventy-built page, so
   the 139 crawled pages are untouched. Surface treatment matches the spoke
   calculator: soft greys, 16px radii, elevation only on hover. */

.tix {
	--tix-blue:#0099CC; --tix-blue-dk:#0483ae;
	--tix-dark:#151a1f; --tix-grey:#5d6773; --tix-grey-soft:#8a95a1;
	--tix-line:#e3e8ee; --tix-line-soft:#eef1f5; --tix-bg:#f6f8fa;
}

/* .bdr only draws its border from 640px up, so match that breakpoint and leave
   the edge-to-edge phone treatment the rest of the site uses. */
@media (min-width:640px) {
	section.tix.bdr {
		border:1px solid var(--tix-line);
		border-radius:16px;
		box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 22px -12px rgba(16,24,40,.16);
		overflow:hidden;
	}
}
.tix .border-bottom { border-color:var(--tix-line-soft) !important; }

.tix-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }

/* The whole card is the link target: the anchor stretches over it, so the
   pointer works anywhere while the accessible name stays the heading text. */
.tix-card {
	position:relative; padding:18px 18px 15px;
	background:#fff; border:1px solid var(--tix-line); border-radius:14px;
	transition:border-color .16s, box-shadow .16s, transform .16s;
}
.tix-card:hover {
	border-color:#cfd8e2; transform:translateY(-1px);
	box-shadow:0 1px 2px rgba(16,24,40,.04), 0 14px 26px -18px rgba(16,24,40,.45);
}

.tix-card-t { margin:0; font-size:17px !important; font-weight:700; letter-spacing:-.012em; }
.tix-card-t a {
	color:var(--tix-dark); text-decoration:none;
	/* Stretched hit area. z-index keeps it under nothing else in the card. */
	position:static;
}
.tix-card-t a::after { content:""; position:absolute; inset:0; border-radius:14px; }
.tix-card:hover .tix-card-t a { color:var(--tix-blue-dk); }
.tix-card-t a:focus-visible { outline:0; }
.tix-card:focus-within {
	border-color:var(--tix-blue); box-shadow:0 0 0 3px rgba(0,153,204,.16);
}

/* A chevron that reads as "this opens" without spending a whole row on a CTA. */
.tix-card-t::after {
	content:""; position:absolute; right:18px; top:20px; width:8px; height:8px;
	border-right:2px solid var(--tix-grey-soft); border-top:2px solid var(--tix-grey-soft);
	transform:rotate(45deg); transition:border-color .16s, transform .16s;
}
.tix-card:hover .tix-card-t::after { border-color:var(--tix-blue); transform:rotate(45deg) translate(2px,-2px); }

.tix-card-b { margin:7px 34px 0 0; font-size:14px; line-height:1.6; color:#333a41; }

.tix-tags { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }
.tix-tags span {
	font-size:11px; font-weight:600; color:var(--tix-grey);
	background:var(--tix-bg); border-radius:999px; padding:3px 9px;
}

.tix-note { margin:16px 0 0; font-size:13px; line-height:1.6; color:var(--tix-grey-soft); }

@media (max-width:575.98px) {
	.tix-card { padding:16px; }
	.tix-card-t { font-size:16px !important; }
	.tix-card-b { margin-right:26px; }
}