/* The tools index, in the site's 2026 look: the hero card from global.css, then
   one card per tool in the home page's language: white, round, a soft shadow, a
   pastel blob in one corner whose hue changes card by card, a sticker badge, pill
   facts, an indigo button. git-sim leads as a wide card with its graph beside the
   text; the others share a two-column grid. Weights stop at 700 (the heaviest the
   site font ships). */

main.tools-page .hero-card .lead { max-width: 760px; }

.tools-wrap { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }

.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.tool-card.featured, .tool-card.wide { grid-column: 1 / -1; }

/* the card */
.tool-card { --hue: var(--ic-accent); --hue-soft: var(--ic-accent-soft); --hue-ink: var(--ic-accent-ink); --hue-line: var(--ic-accent-line); --blob: #c4b5fd;
	position: relative; overflow: hidden; color: var(--ic-text); border-radius: 22px; padding: 26px 28px 28px;
	/* a light wash of the card's own hue, fading to white, so the cards read apart */
	background: linear-gradient(165deg, color-mix(in srgb, var(--hue-soft) 75%, var(--ic-card)) 0%, var(--ic-card) 62%);
	border: 1px solid color-mix(in srgb, var(--hue-line) 55%, transparent);
	box-shadow: var(--ic-shadow-card); border-bottom: 6px solid var(--hue-line);
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; transition: box-shadow .2s, transform .2s; }
.tool-card:hover { box-shadow: var(--ic-shadow-hover); transform: translateY(-3px) rotate(-.3deg); }
.tool-card::before { content: ""; position: absolute; z-index: 0; width: 260px; height: 260px; border-radius: 50%; right: -90px; top: -120px; background: var(--blob); opacity: .34; pointer-events: none; transition: transform .3s; }
.tool-card:nth-child(even)::before { right: auto; left: -100px; top: auto; bottom: -130px; }
.tool-card:hover::before { transform: scale(1.08); }
.tool-card > * { position: relative; z-index: 1; }
.tool-card.featured { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 34px; padding: 34px 36px 36px; }
/* a wide card: the picture on the left, the text beside it */
.tool-card.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 34px; padding: 30px 34px 32px; }

/* hues, card by card */
.tool-card.git-sim { --hue: var(--ic-accent); --hue-soft: var(--ic-accent-soft); --hue-ink: var(--ic-accent-ink); --hue-line: var(--ic-accent-line); --blob: #c4b5fd; }
.tool-card.git-dummy { --hue: var(--ic-emerald); --hue-soft: var(--ic-em-soft); --hue-ink: var(--ic-em-ink); --hue-line: var(--ic-em-line); --blob: var(--ic-em-line); }
.tool-card.git-story { --hue: var(--ic-amber); --hue-soft: var(--ic-amber-soft); --hue-ink: var(--ic-amber-ink); --hue-line: var(--ic-amber-line); --blob: #fde047; }
.tool-card.git-tagup { --hue: var(--ic-rose); --hue-soft: var(--ic-rose-soft); --hue-ink: var(--ic-rose-ink); --hue-line: var(--ic-rose-line); --blob: #fda4af; }
.tool-card.git-sim-viewer { --hue: var(--ic-sky); --hue-soft: var(--ic-sky-soft); --hue-ink: var(--ic-sky-ink); --hue-line: var(--ic-sky-line); --blob: var(--ic-sky-line); }
.tool-card.codecard { --hue: var(--ic-sky); --hue-soft: var(--ic-sky-soft); --hue-ink: var(--ic-sky-ink); --hue-line: var(--ic-sky-line); --blob: var(--ic-sky-line); }

/* stickers */
.tool-card .sticker { position: absolute; right: 18px; top: 18px; z-index: 2; /* above the card's content, below the nav's menus */ transform: rotate(4deg); color: var(--ic-ink); background: #f59e0b; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(245,158,11,.9); }
.tool-card .sticker.featured { background: #10b981; color: #fff; box-shadow: 0 8px 18px -8px rgba(16,185,129,.8); transform: rotate(3deg); }

/* text */
.tool-kicker { display: inline-block; margin: 0 0 12px; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .14em; text-transform: uppercase; color: var(--hue-ink); background: var(--hue-soft); border: 1px solid var(--hue-line); border-radius: 999px; padding: 7px 11px; }
.tool-card h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--ic-ink); text-transform: none; text-align: left; }
.tool-card.featured h2 { font-size: 34px; }
main.tools-page .tool-card h2 a { color: inherit !important; text-decoration: none !important; }
main.tools-page .tool-card h2 a:hover { color: var(--hue) !important; }
.tool-blurb { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--ic-text-2); }
.tool-card.featured .tool-blurb { font-size: 17px; }
.tool-blurb strong { color: var(--ic-ink); font-weight: 700; }

/* pill facts */
.tool-facts { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tool-facts li { font: 600 12px/1 sans-serif; font-family: inherit; color: var(--hue-ink); background: var(--hue-soft); border: 1px solid var(--hue-line); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }

/* actions */
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
main.tools-page .tool-actions a.button { display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--hue); color: #fff !important; font-weight: 700; font-size: 14.5px; line-height: 1; text-decoration: none !important; box-shadow: 0 10px 20px -12px var(--hue); transition: transform .15s, box-shadow .15s, filter .15s; }
main.tools-page .tool-actions a.button:hover { color: #fff !important; filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 14px 26px -12px var(--hue); }
main.tools-page .tool-actions a.button.ghost { background: transparent; color: var(--hue-ink) !important; box-shadow: inset 0 0 0 1.5px var(--hue-line); }
main.tools-page .tool-actions a.button.ghost:hover { color: var(--hue) !important; box-shadow: inset 0 0 0 1.5px var(--hue); filter: none; }
.tool-install { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: 600 12.5px/1 "Cascadia Mono", Menlo, Consolas, monospace; color: #e5e7eb; background: var(--ic-kicker-bg); border-radius: 10px; padding: 10px 12px; white-space: nowrap; }
.tool-install::before { content: "$"; color: #a5b4fc; }

/* the picture: a dark screen for the graphs, a plain rounded frame for covers */
main.tools-page .tool-visual { display: block; border-radius: 16px; overflow: hidden; text-decoration: none !important; box-shadow: 0 16px 34px -18px rgba(30,27,75,.5); transition: transform .2s, box-shadow .2s; }
main.tools-page .tool-visual:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -18px rgba(30,27,75,.55); }
.tool-visual img { display: block; width: 100%; height: auto; }
.tool-visual.screen { background: #0d1117; padding: 10px; }
/* the graphs git-sim draws come in both themes: the page shows the one that matches */
.tool-visual .light-only { display: none; }
:root:not([data-theme="dark"]) .tool-visual .light-only { display: block; }
:root:not([data-theme="dark"]) .tool-visual .dark-only { display: none; }
:root:not([data-theme="dark"]) .tool-visual.screen:has(.light-only) { background: #f6f8fa; box-shadow: 0 16px 34px -18px rgba(30,27,75,.35), inset 0 0 0 1px var(--ic-rule); }
.tool-visual.screen img { border-radius: 8px; }
.tool-card:not(.featured) .tool-visual { order: -1; }

/* the small line under the grid */
.tools-fine { margin: 30px auto 0; text-align: center; font-size: 14px; color: var(--ic-muted); }
main.tools-page .tools-fine a { color: var(--ic-accent) !important; font-weight: 600; }
main.tools-page .tools-fine a:hover { color: var(--ic-accent-ink) !important; }

@media (max-width: 960px) {
	.tool-card.featured, .tool-card.wide { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px 26px 30px; }
	.tool-card.featured .tool-visual { order: -1; }
	.tool-card.featured h2 { font-size: 30px; }
}
@media (max-width: 720px) {
	.tool-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.tool-card, .tool-card.featured { padding: 22px 18px 24px; border-radius: 18px; }
	.tool-card h2, .tool-card.featured h2 { font-size: 24px; }
	.tool-card.featured .tool-blurb { font-size: 16px; }
	.tool-install { margin-left: 0; }
}