/* ============================================================
   Virtualaw marketplace: /marketplace/ and /marketplace/<plugin>/.
   Built on the site system (ink, paper, ochre, cyan; Inter Tight and
   JetBrains Mono; hairline rules). Loaded only on marketplace requests.
   ============================================================ */

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

.mkt { --mkt-radius: 12px; }
.mkt .mkt-amt, .mkt .mkt-was, .mkt .mkt-th-sites, .mkt .mkt-from { font-variant-numeric: tabular-nums; }

/* ---- hero ---- */
.mkt-hero { padding-bottom: 40px; }
.mkt-hero h1 { max-width: 20ch; }
.mkt-facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }
.mkt-facts li { display: inline-flex; align-items: center; gap: 9px; }
.mkt-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mkt-back { display: flex; width: max-content; gap: 8px; margin-bottom: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); text-decoration: none; }
.mkt-back:hover { color: var(--ink); }
.mkt-back + .kicker { display: block; }
.mkt-lead { margin: 14px 0 0; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); font-weight: 500; max-width: 34ch; }
.mkt-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }
.mkt-from { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }

/* ---- buttons ---- */
.mkt-btn { justify-content: center; }
.mkt-btn.is-soon { background: transparent; color: var(--ink-mute); border: 1px dashed var(--rule-strong); cursor: default; }
.mkt-btn.is-soon:hover { background: transparent; border-color: var(--rule-strong); }

/* ---- the all-plugins license ---- */
.mkt-bundle-band { border-top: 0; padding-top: 24px; }
.mkt-bundle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; align-items: center; border: 1px solid var(--ink); border-radius: 16px; padding: 36px; background: var(--paper); box-shadow: 0 1px 0 var(--ink), 0 18px 40px oklch(0.22 0.012 250 / 0.07); }
.mkt-bundle-copy h2 { font-weight: 600; font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: -0.03em; margin: 12px 0 0; }
.mkt-bundle-copy h2 em { color: var(--accent-ink); }
.mkt-bundle-copy p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; margin: 14px 0 0; max-width: 46ch; }
.mkt-save b { color: var(--ink); font-weight: 600; }
.mkt-includes { font-family: var(--mono); font-size: 12px !important; line-height: 1.7 !important; color: var(--ink-soft); }
.mkt-includes span { display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 2px; }

/* ---- license cards ---- */
.mkt-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mkt-buy .mkt-tiers { max-width: 900px; }
.mkt-tiers:has(> .mkt-tier:only-child) { grid-template-columns: minmax(0, 320px); }
.mkt-tier { display: flex; flex-direction: column; border: 1px solid var(--rule-strong); border-radius: var(--mkt-radius); padding: 20px 18px 18px; background: var(--paper); transition: border-color 200ms var(--ease), transform 300ms var(--ease); }
.mkt-tier:hover { border-color: var(--ink); }
.mkt-tier:first-child { border-color: var(--ink); background: var(--paper-tint); }
.mkt-tier-label { margin: 0; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.mkt-tier-sites { margin: 3px 0 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); }
.mkt-tier-price { margin: 18px 0 16px; line-height: 1.1; }
.mkt-tier-price .mkt-amt { font-weight: 600; font-size: 30px; letter-spacing: -0.03em; color: var(--ink); }
.mkt-tier-price .mkt-per { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.mkt-tier-price .mkt-was { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-mute); margin-bottom: 2px; }
.mkt-tier .mkt-btn { margin-top: auto; width: 100%; padding: 12px 14px; font-size: 14px; }

/* ---- the price ledger ---- */
.mkt-catalog { padding-top: 64px; }
.mkt-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule-strong); border-radius: var(--mkt-radius); overflow: hidden; background: var(--paper); }
.mkt-table thead th { text-align: left; vertical-align: bottom; padding: 14px 18px; background: var(--paper-tint); border-bottom: 1px solid var(--rule-strong); font-weight: 400; }
.mkt-th-label { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.mkt-th-sites { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.mkt-table thead .mkt-col-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.mkt-table tbody th, .mkt-table tbody td { padding: 18px; border-bottom: 1px solid var(--rule); vertical-align: middle; text-align: left; font-weight: 400; }
.mkt-table tbody tr:last-child > * { border-bottom: 0; }
.mkt-row { transition: background 200ms var(--ease); }
.mkt-row:hover { background: var(--paper-tint); }
.mkt-col-name { width: 38%; }
.mkt-col-go { width: 1%; white-space: nowrap; text-align: right !important; }
.mkt-table .mkt-col-name { position: relative; padding-left: 58px !important; }
.mkt-glyph { display: inline-flex; color: var(--ink); }
.mkt-glyph svg { display: block; width: 100%; height: 100%; }
.mkt-glyph .acc { stroke: var(--accent); }
.mkt-glyph .acc-fill { fill: var(--accent); }
.mkt-ix { position: absolute; left: 14px; top: 16px; width: 32px; height: 32px; }
.mkt-hero-glyph { display: flex; width: 76px; height: 76px; padding: 14px; margin-bottom: 22px; border: 1px solid var(--rule-strong); border-radius: 18px; background: var(--paper-tint); box-shadow: inset 0 -3px 0 oklch(0.66 0.16 65 / 0.35); }
.mkt-hero-glyph + .kicker { display: block; }
.mkt-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mkt-name a { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.mkt-name a:hover { color: var(--accent-ink); text-decoration: underline; }
.mkt-role { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.mkt-table td .mkt-amt { font-weight: 600; font-size: 15px; color: var(--ink); }
.mkt-table td .mkt-per { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.mkt-table td .mkt-was { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.mkt-ext .mkt-ext-note, .mkt-free-cell { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.mkt-ext .mkt-ext-note { margin-left: 8px; }
.mkt-go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.mkt-go .arrow { transition: transform 240ms var(--ease); }
.mkt-go:hover { color: var(--accent-ink); }
.mkt-go:hover .arrow { transform: translateX(3px); }
.mkt-chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; color: var(--accent-ink); background: oklch(0.66 0.16 65 / 0.14); }
.mkt-chip.is-free { color: var(--cyan); background: oklch(0.50 0.12 230 / 0.10); }
.mkt-fine { max-width: 76ch; margin: 18px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-mute); }
.mkt-upsell { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-soft); }

/* ---- plugin page ---- */
.mkt-spec-band { padding-top: 56px; }
.mkt-spec { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
.mkt-h { margin: 0 0 18px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.mkt-feats { list-style: none; margin: 0; padding: 0; }
.mkt-feats li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.45; color: var(--ink); }
.mkt-feats li:first-child { border-top: 1px solid var(--rule); }
.mkt-feats li::before { content: "+"; position: absolute; left: 4px; top: 11px; font-family: var(--mono); color: var(--accent-ink); }
.mkt-specs { margin: 0; border: 1px solid var(--rule-strong); border-radius: var(--mkt-radius); overflow: hidden; }
.mkt-specs > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--rule); }
.mkt-specs > div:nth-child(odd) { background: var(--paper-tint); }
.mkt-specs > div:last-child { border-bottom: 0; }
.mkt-specs dt { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.mkt-specs dd { margin: 0; font-size: 14.5px; color: var(--ink); }
.mkt-buy { background: var(--paper-tint); }
.mkt-buy .mkt-tier { background: var(--paper); }
.mkt-buy .mkt-tier:first-child { background: var(--paper); }
.mkt-dossier .sec-head { margin-bottom: 26px; }
.mkt-points { list-style: none; counter-reset: mkt; margin: 0; padding: 0; max-width: 820px; }
.mkt-points li { counter-increment: mkt; position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.mkt-points li:first-child { border-top: 1px solid var(--rule); }
.mkt-points li::before { content: counter(mkt, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--mono); font-size: 12px; color: var(--accent-ink); }
.mkt-points.is-steps li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; }
.mkt-points b { color: var(--ink); font-weight: 600; }
.mkt-others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); border-top: 1px solid var(--rule); }
.mkt-others li { border-bottom: 1px solid var(--rule); }
.mkt-others a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; padding: 16px 18px 16px 0; text-decoration: none; }
.mkt-others a > :not(.mkt-o-glyph) { grid-column: 2; }
.mkt-o-glyph { grid-row: 1 / span 3; width: 30px; height: 30px; margin-top: 2px; }
.mkt-o-name { font-weight: 600; font-size: 16px; color: var(--ink); }
.mkt-o-role { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.mkt-o-price { font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; }
.mkt-others a:hover .mkt-o-name { color: var(--accent-ink); text-decoration: underline; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
	.mkt-bundle { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
}
@media (max-width: 820px) {
	.mkt-spec { grid-template-columns: 1fr; gap: 40px; }
	.mkt-points.is-steps li { grid-template-columns: 1fr; gap: 4px; }

	/* the ledger stacks: one card per plugin, tier prices labelled */
	.mkt-table, .mkt-table tbody, .mkt-table tr, .mkt-table th, .mkt-table td { display: block; width: 100%; }
	.mkt-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mkt-table tbody th, .mkt-table tbody td { border-bottom: 0; padding: 4px 18px; }
	.mkt-table tbody tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
	.mkt-table tbody tr:last-child { border-bottom: 0; }
	.mkt-table .mkt-col-name { padding: 4px 18px 10px 58px !important; }
	.mkt-ix { top: 4px; }
	.mkt-table td[data-label] { display: flex; align-items: baseline; gap: 4px; padding-left: 58px; }
	.mkt-table td[data-label]::before { content: attr(data-label); margin-right: auto; padding-right: 16px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); }
	.mkt-table td[data-label] .mkt-was { display: inline; margin-right: 6px; }
	.mkt-table .mkt-ext, .mkt-table .mkt-free-cell { padding-left: 58px; }
	.mkt-col-go { text-align: left !important; padding: 10px 18px 0 58px !important; }
}
@media (max-width: 600px) {
	.mkt-tiers { grid-template-columns: 1fr; }
	.mkt-tiers:has(> .mkt-tier:only-child) { grid-template-columns: 1fr; }
	.mkt-bundle { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.mkt-row, .mkt-tier, .mkt-go .arrow { transition: none; }
}