/* HostCritiq inner-page UX layer. Loaded after hc.css; uses its tokens only.
   Scope: provider directory, provider profile, plan cards, application picks. */

/* ---------- brand monogram (providers/apps without a verified logo) ---------- */
.hc-brand-fallback {
    --mono-h: 210;
    background: linear-gradient(140deg, hsl(var(--mono-h) 70% 96%), hsl(calc(var(--mono-h) + 30) 65% 89%));
    border-color: hsl(var(--mono-h) 40% 82%);
    color: hsl(var(--mono-h) 55% 30%);
}
body[data-theme="dark"] .hc-brand-fallback {
    background: linear-gradient(140deg, hsl(var(--mono-h) 35% 18%), hsl(calc(var(--mono-h) + 30) 40% 13%));
    border-color: hsl(var(--mono-h) 30% 28%);
    color: hsl(var(--mono-h) 80% 80%);
}
.hc-monogram { font: 700 .95rem/1 var(--sans); letter-spacing: -.03em; }
.hc-brand-large .hc-monogram { font-size: 1.6rem; }
.hc-plan-prov .hc-monogram, .hc-rank-row .hc-monogram { font-size: .74rem; }

/* ---------- shared bits ---------- */
.hc-est {
    display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: 6px;
    background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn);
    font: 600 .66rem/1.2 var(--mono); font-style: normal; letter-spacing: .02em; vertical-align: .3em;
}
.hc-est-key { color: var(--warn); font-weight: 700; }

/* ---------- provider directory ---------- */
.hc-prov-guide {
    display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding: 11px 12px; border-radius: 12px;
    border: 1px dashed var(--line-2); color: var(--mute); font-size: .8rem;
}
.hc-prov-guide .icon { color: var(--acc-text); }
.hc-head-split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.hc-dir-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-dir-kpis dd { font-size: 1.55rem; }
@media (max-width: 900px) { .hc-head-split { grid-template-columns: 1fr; } }
.hc-dir-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: 18px 0 14px; }
.hc-dir-bar .data-note { margin: 0; }

.hc-prov-rich { position: relative; gap: 16px; padding: 22px 22px 20px; overflow: hidden; isolation: isolate; }
.hc-prov-rich::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: -1;
    background: linear-gradient(90deg, var(--acc), var(--c2)); opacity: 0; transition: opacity var(--t);
}
.hc-prov-rich:hover { box-shadow: var(--shadow); }
.hc-prov-rich:hover::before { opacity: 1; }
.hc-prov-rich .hc-prov-top { align-items: center; }
.hc-prov-id { min-width: 0; flex: 1; }
.hc-prov-id h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-prov-domain { display: block; margin-top: 2px; color: var(--mute); font: 450 .76rem/1.2 var(--mono); }
.hc-prov-arrow {
    display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
    border: 1px solid var(--line); color: var(--mute); transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.hc-prov-rich:hover .hc-prov-arrow { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); transform: rotate(-45deg); }
.hc-prov-blurb {
    margin: 0; color: var(--ink-2); font-size: .88rem; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hc-prov-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: auto 0 0;
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line);
}
.hc-prov-stats > div { padding: 10px 12px; background: var(--bg-2); min-width: 0; }
.hc-prov-stats dt { color: var(--mute); font: 500 .64rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.hc-prov-stats dd { margin: 6px 0 0; font: 650 1rem/1.1 var(--mono); letter-spacing: -.04em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-prov-stats dd small { color: var(--mute); font: 450 .72rem/1 var(--sans); letter-spacing: 0; }
.hc-prov-stats dd .is-muted { color: var(--mute); font-weight: 450; }
.hc-prov-stats > div:nth-child(2) dd { color: var(--acc-text); }
.hc-prov-rich .hc-tags { margin-top: -2px; }

.hc-dir-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.hc-dir-next-card {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-l);
    border: 1px solid var(--line); background: var(--s1); color: var(--ink); text-decoration: none;
    transition: border-color var(--t), transform var(--t);
}
.hc-dir-next-card:hover { border-color: var(--acc-line); transform: translateY(-2px); }
.hc-dir-next-card > .icon:first-child { width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: var(--acc-soft); color: var(--acc-text); }
.hc-dir-next-card div { flex: 1; min-width: 0; }
.hc-dir-next-card b { display: block; font-size: .95rem; }
.hc-dir-next-card span { display: block; color: var(--mute); font-size: .82rem; margin-top: 2px; }
.hc-dir-next-card > .icon:last-child { color: var(--mute); transition: transform var(--t), color var(--t); }
.hc-dir-next-card:hover > .icon:last-child { color: var(--acc-text); transform: translateX(3px); }
@media (max-width: 900px) { .hc-dir-next { grid-template-columns: 1fr; } }

/* ---------- plan cards ---------- */
/* Value over label in a 2x2 grid: no truncation of "160 GB" / "4 TB" at card widths. */
.hc-plan .hc-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-plan .hc-spec { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 10px 12px; }
.hc-plan .hc-spec b { order: 0; font-size: 1rem; white-space: nowrap; overflow: visible; }
.hc-plan .hc-spec span { order: 1; display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; }
.hc-plan .hc-spec span .icon { width: 12px; height: 12px; color: var(--acc-text); }
.hc-plan:hover { box-shadow: var(--shadow); }
.hc-plan-price { align-items: center; }
.hc-plan-price > div { min-width: 0; }
.hc-plan .hc-price { white-space: nowrap; }
.hc-plan-cta {
    display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border-radius: 999px;
    border: 1px solid var(--line-2); color: var(--ink); font-size: .8rem; font-weight: 600; text-decoration: none;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.hc-plan-cta .icon { transition: transform var(--t); }
.hc-plan-cta:hover, .hc-plan:hover .hc-plan-cta { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.hc-plan-cta:hover .icon { transform: translateX(2px); }

/* ---------- provider profile ---------- */
.hc-profile-nav {
    position: sticky; top: 76px; z-index: 20; margin: 24px 0 28px; padding: 6px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--s1);
    box-shadow: 0 10px 30px -22px rgba(10, 12, 16, .45); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
}
.hc-profile-nav::-webkit-scrollbar { display: none; }
.hc-profile-nav a { flex: none; padding: 9px 16px; border: 0; background: transparent; white-space: nowrap; font-weight: 550; color: var(--ink-2); }
.hc-profile-nav a:hover { background: var(--s3); color: var(--ink); }
.hc-profile-nav a:first-child { background: var(--ink); color: var(--bg); }
@media (max-width: 580px) {
    .hc-profile-nav { top: 64px; border-radius: 16px; }
    .hc-profile-nav a { flex: none; text-align: left; }
}
[id^="provider-"][id$="-heading"], #ladder-title, #provider-decision-title, #provider-runs-title { scroll-margin-top: 150px; }

/* Cheapest plan per app: name, price, plan — each on its own line, with a relative price bar. */
.hc-runs-count { margin: 0; color: var(--mute); font-size: .88rem; }
.hc-runs-count b { color: var(--ink); font-family: var(--mono); }
.hc-runs-v2 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hc-runs-v2 li {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 8px 10px;
    padding: 12px 14px 16px; border-radius: 14px; background: var(--s1); overflow: hidden;
    transition: border-color var(--t), transform var(--t);
}
.hc-runs-v2 li:hover { border-color: var(--acc-line); transform: translateY(-1px); }
.hc-run-app { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-weight: 650; font-size: .9rem; text-decoration: none; }
.hc-run-app:hover { color: var(--acc-text); }
.hc-run-app .hc-brand-mark { width: 26px; height: 26px; padding: 4px; border-radius: 7px; }
.hc-run-app .hc-monogram { font-size: .62rem; }
.hc-runs-v2 .hc-run-price { align-self: center; font: 650 .95rem/1 var(--mono); white-space: nowrap; }
.hc-runs-v2 .hc-run-price small { color: var(--mute); font: 450 .72rem/1 var(--sans); }
.hc-runs-v2 .hc-run-price .hc-est { vertical-align: .1em; }
.hc-run-plan { grid-column: 1 / -1; color: var(--mute); font-size: .78rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-run-plan:hover { color: var(--ink); text-decoration: underline; }
.hc-run-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--run, 10%); border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--acc), var(--c6)); opacity: .85; }

/* ---------- application page: ranked cheapest plans ---------- */
.hc-rank { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--s1); overflow: hidden; }
.hc-rank-row {
    display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) minmax(150px, 220px) 40px; align-items: center; gap: 16px;
    padding: 16px 20px; border-top: 1px solid var(--line); transition: background var(--t);
}
.hc-rank-row:first-child { border-top: 0; }
.hc-rank-row:hover { background: var(--s2); }
.hc-rank-row.is-top { background: linear-gradient(90deg, var(--acc-soft), transparent 60%); }
.hc-rank-n { color: var(--mute); font: 600 .8rem/1 var(--mono); }
.hc-rank-row.is-top .hc-rank-n { color: var(--acc-text); }
.hc-rank-row .hc-brand-mark { width: 44px; height: 44px; padding: 7px; }
.hc-rank-main { min-width: 0; }
.hc-rank-prov { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--mute); font-size: .8rem; }
.hc-rank-main h3 { margin: 3px 0 6px; font-size: 1rem; }
.hc-rank-main h3 a { color: var(--ink); text-decoration: none; }
.hc-rank-main h3 a:hover { color: var(--acc-text); }
.hc-rank-specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hc-rank-specs li { padding: 3px 8px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); color: var(--mute); font-size: .76rem; }
.hc-rank-specs b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.hc-rank-price { display: grid; gap: 4px; justify-items: end; text-align: right; }
.hc-rank-price b { font: 650 1.2rem/1 var(--mono); letter-spacing: -.04em; }
.hc-rank-price b small { color: var(--mute); font: 450 .74rem/1 var(--sans); letter-spacing: 0; }
.hc-rank-price span { color: var(--mute); font-size: .72rem; }
.hc-rank-bar { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--s3); position: relative; overflow: hidden; }
.hc-rank-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--bar, 10%); border-radius: inherit; background: linear-gradient(90deg, var(--acc), var(--c6)); }
.hc-rank-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); color: var(--mute); transition: background var(--t), color var(--t), border-color var(--t); }
.hc-rank-row:hover .hc-rank-go { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
@media (max-width: 720px) {
    .hc-rank-row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "logo main main" "logo price go"; gap: 10px 12px; padding: 14px 16px; }
    .hc-rank-n { display: none; }
    .hc-rank-row .hc-brand-mark { grid-area: logo; align-self: start; width: 36px; height: 36px; padding: 6px; }
    .hc-rank-main { grid-area: main; }
    .hc-rank-price { grid-area: price; justify-items: start; text-align: left; }
    .hc-rank-go { grid-area: go; }
}

/* ---------- footer ---------- */
.footer-links li { line-height: 1.35; }

/* CSP forbids inline style attributes: monogram hues come from 12 classes, bars are SVG. */
.hc-mono-0 { --mono-h: 8; } .hc-mono-1 { --mono-h: 38; } .hc-mono-2 { --mono-h: 68; } .hc-mono-3 { --mono-h: 98; } .hc-mono-4 { --mono-h: 128; } .hc-mono-5 { --mono-h: 158; } .hc-mono-6 { --mono-h: 188; } .hc-mono-7 { --mono-h: 218; } .hc-mono-8 { --mono-h: 248; } .hc-mono-9 { --mono-h: 278; } .hc-mono-10 { --mono-h: 308; } .hc-mono-11 { --mono-h: 338; } 
.hc-run-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: none; opacity: 1; border-radius: 0; }
.hc-run-bar rect { fill: var(--acc); }
body[data-theme="light"] .hc-run-bar rect { fill: #9cc83a; }
.hc-rank-bar { display: block; width: 100%; height: 4px; background: none; overflow: visible; }
.hc-rank-bar::after { content: none; }
.hc-rank-bar .bg { fill: var(--s3); }
.hc-rank-bar .fg { fill: var(--c6); }
.hc-rank-row.is-top .hc-rank-bar .fg { fill: var(--acc-text); }

/* per-app tiles: stacked so long app names never collide with the price */
.hc-runs-v2 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hc-runs-v2 li { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 6px; padding: 14px 14px 16px; }
.hc-run-app { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-runs-v2 .hc-run-price { align-self: start; text-align: left; font-size: 1.05rem; }
.hc-run-plan { grid-column: auto; }

/* ---------- size chips (AI model directory) ---------- */
.hc-chips { display: flex; gap: 6px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.hc-chips::-webkit-scrollbar { display: none; }
.hc-chips a {
    flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--s1);
    color: var(--ink-2); font-size: .82rem; font-weight: 550; text-decoration: none; white-space: nowrap;
    transition: border-color var(--t), background var(--t), color var(--t);
}
.hc-chips a:hover { border-color: var(--line-2); color: var(--ink); }
.hc-chips a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---------- AI model rows: weights memory column ---------- */
.hc-model { grid-template-columns: 96px minmax(0, 1fr) 190px auto; }
.hc-model-mem { display: grid; gap: 6px; }
.hc-model-mem dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line); }
.hc-model-mem dl > div { padding: 6px 9px; background: var(--bg-2); }
.hc-model-mem dt { color: var(--mute); font: 500 .6rem/1 var(--mono); letter-spacing: .07em; }
.hc-model-mem dd { margin: 4px 0 0; font: 650 .88rem/1 var(--mono); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.hc-model-mem dd small { color: var(--mute); font: 450 .66rem/1 var(--sans); letter-spacing: 0; }
.hc-mem-tier {
    justify-self: start; padding: 3px 8px; border-radius: 6px; font: 600 .68rem/1.3 var(--mono);
    background: color-mix(in srgb, var(--ok) 11%, transparent); color: var(--ok);
}
.hc-mem-tier.is-multi { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.hc-mem-tier.is-unknown { background: var(--s3); color: var(--mute); }
@media (max-width: 1100px) { .hc-model { grid-template-columns: 84px minmax(0, 1fr) 170px; } .hc-model-actions { grid-column: 1 / -1; justify-content: flex-end; } }
@media (max-width: 760px) {
    .hc-model { grid-template-columns: 72px minmax(0, 1fr); }
    .hc-model-mem { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .hc-model-actions { justify-content: space-between; }
}

/* ---------- GPU offers ---------- */
.hc-gpu-kpis { margin: 0 0 24px; }
.hc-gpu-kpis dd { font-size: 1.5rem; }
.hc-gpu-kpis .hc-kpi-note { margin: 8px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-gpu .hc-plan-prov .hc-brand-mark { width: 26px; height: 26px; padding: 4px; border-radius: 7px; }
.hc-gpu .hc-plan-prov .hc-monogram { font-size: .62rem; }
.hc-gpu small.hc-gpu-pergb { color: var(--ink-2); font-family: var(--mono); font-size: .72rem; }

/* ---------- AI model profile: architecture grid ---------- */
.hc-archgrid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hc-archgrid dd { overflow-wrap: break-word; font-size: 1rem; }
@media (max-width: 760px) {
    .hc-gpu-kpis, .hc-dir-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-gpu-kpis > div, .hc-dir-kpis > div { padding: 16px; min-width: 0; }
    .hc-gpu-kpis dd { font-size: 1.25rem; }
}

/* ---------- plan detail: fill the main column with decision content ---------- */
.hc-bigspecs { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 760px) { .hc-bigspecs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.detail-grid > .hc-stack > .hc-card .section-heading { margin-bottom: 14px; }
.detail-grid > .hc-stack > .hc-card h2 { font-size: 1.25rem; }

.hc-costgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.hc-costgrid > div { padding: 14px 16px; background: var(--bg-2); }
.hc-costgrid dt { color: var(--mute); font: 500 .66rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.hc-costgrid dd { margin: 8px 0 0; font: 650 1.35rem/1 var(--mono); letter-spacing: -.04em; color: var(--ink); }
.hc-costgrid dd small { color: var(--mute); font: 450 .74rem/1 var(--sans); letter-spacing: 0; }
.hc-costgrid > div:first-child dd { color: var(--acc-text); }
.hc-costcard .data-note { margin: 0; }

.hc-altlist { list-style: none; margin: 0 0 12px; padding: 0; }
.hc-altlist li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.hc-altlist li:first-child { border-top: 0; padding-top: 0; }
.hc-altlist .hc-brand-mark { width: 40px; height: 40px; padding: 7px; }
.hc-alt-main { min-width: 0; display: grid; gap: 2px; }
.hc-alt-main span { color: var(--mute); font-size: .78rem; }
.hc-alt-main a { color: var(--ink); font-weight: 650; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-alt-main a:hover { color: var(--acc-text); text-decoration: underline; }
.hc-alt-main small { color: var(--mute); font-size: .78rem; }
.hc-alt-price { display: grid; justify-items: end; gap: 4px; text-align: right; }
.hc-alt-price b { font: 650 1.02rem/1 var(--mono); letter-spacing: -.03em; white-space: nowrap; }
.hc-alt-price b small { color: var(--mute); font: 450 .7rem/1 var(--sans); letter-spacing: 0; }
.hc-alt-price span { padding: 2px 7px; border-radius: 6px; font: 600 .7rem/1.4 var(--mono); background: var(--s3); color: var(--mute); white-space: nowrap; }
.hc-alt-price span.is-save { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.hc-alt-price span.is-more { background: color-mix(in srgb, var(--warn) 11%, transparent); color: var(--warn); }

.hc-lineup { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hc-lineup a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(80px, 1fr) auto; gap: 14px; align-items: center; padding: 9px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background var(--t); }
.hc-lineup a:hover { background: var(--s2); }
.hc-lineup .is-current a { background: var(--acc-soft); box-shadow: inset 0 0 0 1px var(--acc-line); }
.hc-lineup-name { min-width: 0; display: grid; }
.hc-lineup-name b { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-lineup-name small { color: var(--mute); font-size: .74rem; }
.hc-lineup .hc-ladder-bar { width: 100%; height: 8px; }
.hc-lineup-price { font: 600 .86rem/1 var(--mono); white-space: nowrap; text-align: right; }
@media (max-width: 560px) {
    .hc-lineup a { grid-template-columns: minmax(0, 1fr) auto; }
    .hc-lineup .hc-ladder-bar { display: none; }
    .hc-altlist li { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
    .hc-altlist .hc-brand-mark { width: 34px; height: 34px; padding: 6px; }
}
.hc-lineup a { grid-template-columns: minmax(0, 1fr) minmax(90px, 36%) 92px; }
@media (max-width: 560px) { .hc-lineup a { grid-template-columns: minmax(0, 1fr) auto; } }