/* Shared styles for the spec-lookup tools — Bolt Pattern Finder and OEM Tire
   Size Lookup. One dataset, one visual language. Theme tokens only. */

@font-face { font-family:"Barlow Cond Fallback"; src:local("Arial Narrow"),local("Roboto Condensed"),local("Arial"); size-adjust:90%; ascent-override:88%; descent-override:20%; line-gap-override:0%; }
@font-face { font-family:"Inter Fallback"; src:local("Arial"); ascent-override:90.44%; descent-override:22.52%; line-gap-override:0%; size-adjust:107.12%; }
.sp-page { font-family:"Inter","Inter Fallback",system-ui,sans-serif; display:block; }
.sp-page .t-display, .sp-page .t-h2, .sp-answer__big, .sp-pattern__name, .sp-glance dd { font-family:"Barlow Condensed","Barlow Cond Fallback",system-ui,sans-serif; }

/* ---- Picker ---- */
.sp-tool { background:var(--color-bg-elevated); border:1px solid var(--color-line); border-radius:14px; padding:1.4rem 1.5rem; }
.sp-picker { display:grid; grid-template-columns:1fr; gap:.9rem; align-items:end; }
@media (min-width:760px){ .sp-picker { grid-template-columns:1fr 1fr 1fr auto; gap:1rem; } }
.sp-cell { display:flex; flex-direction:column; gap:.4rem; }
.sp-cell > span { font-size:.78rem; color:var(--color-ink-2); font-weight:600; }
.sp-select { width:100%; height:3rem; border:1px solid var(--color-line-strong); border-radius:.55rem; background:var(--color-bg); color:var(--color-ink); padding:0 .8rem; font-size:.95rem; }
.sp-select:disabled { opacity:.55; cursor:not-allowed; }
.sp-select:focus { outline:2px solid var(--color-amber-500); outline-offset:1px; }
.sp-go { height:3rem; }
.sp-hint { font-size:.82rem; color:var(--color-ink-muted); margin-top:.9rem; }

/* ---- Headline answer ---- */
.sp-answer { border:1px solid var(--color-amber-300); background:var(--color-amber-50); border-radius:16px; padding:1.5rem 1.7rem; }
.sp-answer.is-empty { border-color:var(--color-line); background:var(--color-bg-subtle); }
.sp-answer__big { font-weight:900; font-size:clamp(2.6rem,7vw,4rem); line-height:1; color:var(--color-amber-700); margin-top:.3rem; }
.sp-answer__sub { font-size:.9rem; color:var(--color-ink-2); margin-top:.3rem; }
.sp-answer__placeholder { color:var(--color-ink-muted); font-size:1rem; }
.sp-specs { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin-top:1.4rem; }
@media (min-width:620px){ .sp-specs { grid-template-columns:repeat(4,1fr); } }
.sp-specs > div { display:flex; flex-direction:column; gap:.15rem; }
.sp-specs dt { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--color-ink-muted); font-weight:700; }
.sp-specs dd { font-size:1.05rem; font-weight:700; color:var(--color-ink); font-family:"JetBrains Mono",monospace; }
.sp-answer__links { display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.3rem; }
.sp-disclaimer { font-size:.82rem; color:var(--color-ink-muted); line-height:1.6; max-width:76ch; }

/* ---- At-a-glance strip (pattern page) ---- */
.sp-glance { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
@media (min-width:620px){ .sp-glance { grid-template-columns:repeat(4,1fr); } }
.sp-glance > div { border:1px solid var(--color-line); border-radius:12px; background:var(--color-bg-elevated); padding:.9rem 1.1rem; }
.sp-glance dt { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--color-ink-muted); font-weight:700; }
.sp-glance dd { font-size:1.8rem; font-weight:800; line-height:1.1; margin-top:.15rem; }

/* ---- Pattern tiles ---- */
.sp-patterns { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; }
.sp-pattern { display:flex; flex-direction:column; gap:.1rem; border:1px solid var(--color-line); border-radius:12px; background:var(--color-bg-elevated); padding:.9rem 1rem; text-decoration:none; transition:border-color .12s ease, transform .12s ease; }
.sp-pattern:hover { border-color:var(--color-amber-500); transform:translateY(-1px); }
.sp-pattern__name { font-weight:800; font-size:1.4rem; line-height:1.1; color:var(--color-ink); }
.sp-pattern__in { font-size:.78rem; color:var(--color-ink-2); font-family:"JetBrains Mono",monospace; }
.sp-pattern__count { font-size:.72rem; color:var(--color-ink-muted); margin-top:.3rem; font-weight:600; }

/* ---- Shared-trucks list ---- */
.sp-boregroup__h { display:flex; align-items:center; gap:.6rem; font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:1.35rem; }
.sp-boregroup__n { font-size:.7rem; font-family:"Inter",sans-serif; font-weight:700; background:var(--color-bg-subtle); color:var(--color-ink-2); border-radius:999px; padding:.15rem .55rem; }
.sp-shared { display:grid; grid-template-columns:1fr; gap:.7rem; }
@media (min-width:600px){ .sp-shared { grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .sp-shared { grid-template-columns:repeat(3,1fr); } }
.sp-shared__item { display:flex; flex-direction:column; gap:.15rem; border:1px solid var(--color-line); border-radius:11px; background:var(--color-bg-elevated); padding:.8rem 1rem; text-decoration:none; transition:border-color .12s ease; }
.sp-shared__item:hover { border-color:var(--color-amber-500); }
.sp-shared__name { font-weight:700; color:var(--color-ink); }
.sp-shared__meta { font-size:.78rem; color:var(--color-ink-muted); font-family:"JetBrains Mono",monospace; }

/* ---- Chart ---- */
.sp-filterbar { display:flex; gap:.8rem; }
.sp-filter { flex:1 1 auto; max-width:34rem; }
.sp-filter__input { width:100%; height:3rem; border:1px solid var(--color-line-strong); border-radius:.55rem; background:var(--color-bg); color:var(--color-ink); padding:0 .9rem; font-size:.95rem; }
.sp-filter__input:focus { outline:2px solid var(--color-amber-500); outline-offset:1px; }
.sp-tablewrap { border:1px solid var(--color-line); border-radius:14px; background:var(--color-bg-elevated); overflow-x:auto; }
.sp-table { width:100%; border-collapse:collapse; font-size:.92rem; min-width:640px; }
.sp-table th { text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--color-ink-muted); font-weight:700; padding:.7rem .9rem; border-bottom:1px solid var(--color-line-strong); white-space:nowrap; }
.sp-table td { padding:.75rem .9rem; border-bottom:1px solid var(--color-line); color:var(--color-ink-2); vertical-align:top; }
.sp-table tbody tr:last-child td { border-bottom:0; }
.sp-table tbody tr:hover { background:var(--color-bg-subtle); }
.sp-dim { color:var(--color-ink-muted); font-size:.82rem; }
.sp-verify { color:var(--color-amber-600); font-weight:800; cursor:help; }
.sp-noterow td { font-size:.84rem; color:var(--color-ink-muted); line-height:1.6; padding-top:0; background:var(--color-bg-subtle); }
.sp-noterow:hover { background:var(--color-bg-subtle); }
.sp-empty { padding:1.2rem; color:var(--color-ink-muted); font-size:.92rem; }
.hidden { display:none; }
@media (max-width:640px){
	.sp-tablewrap { overflow-x:visible; }
	.sp-table { min-width:0; }
	.sp-table thead { display:none; }
	.sp-table tbody tr { display:block; border-bottom:1px solid var(--color-line); padding:.5rem 0; }
	.sp-table tbody tr:last-child { border-bottom:0; }
	.sp-table td { display:flex; justify-content:space-between; gap:1rem; border:0; padding:.3rem .9rem; }
	.sp-table td::before { content:attr(data-th); font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:var(--color-ink-muted); font-weight:700; flex:0 0 auto; }
	.sp-noterow td { display:block; }
	.sp-noterow td::before { display:block; margin-bottom:.2rem; }
}

/* ---- Steps ---- */
.sp-steps { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:760px){ .sp-steps { grid-template-columns:1fr 1fr; gap:1.2rem; } }
.sp-steps li { display:flex; gap:.9rem; border:1px solid var(--color-line); border-radius:12px; background:var(--color-bg-elevated); padding:1rem 1.1rem; }
.sp-steps li > span { flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--color-amber-500); color:#fff; font-weight:800; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; }
.sp-steps h3 { font-weight:700; font-size:1rem; margin-bottom:.25rem; }
.sp-steps p { font-size:.9rem; line-height:1.6; color:var(--color-ink-2); }

/* ---- Next tools ---- */
.sp-next { display:grid; grid-template-columns:1fr; gap:.9rem; }
@media (min-width:640px){ .sp-next { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .sp-next { grid-template-columns:repeat(4,1fr); } }
.sp-next__item { display:block; text-decoration:none; }

/* ---- FAQ ---- */
.sp-faq { display:flex; flex-direction:column; gap:.5rem; }
.sp-faq__item { border:1px solid var(--color-line); border-radius:11px; background:var(--color-bg-elevated); padding:.85rem 1.1rem; }
.sp-faq__item summary { cursor:pointer; font-weight:700; color:var(--color-ink); list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.sp-faq__item summary::-webkit-details-marker { display:none; }
.sp-faq__item summary::after { content:"+"; color:var(--color-amber-600); font-weight:800; font-size:1.2rem; flex:0 0 auto; }
.sp-faq__item[open] summary::after { content:"−"; }
.sp-faq__item p { margin-top:.6rem; font-size:.93rem; line-height:1.65; }

/* ---- Tire-specific bits ---- */
.sp-sizes { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.8rem; }
.sp-size { display:flex; flex-direction:column; gap:.15rem; border:1px solid var(--color-line); border-radius:12px; background:var(--color-bg-elevated); padding:.9rem 1rem; text-decoration:none; transition:border-color .12s ease, transform .12s ease; }
.sp-size:hover { border-color:var(--color-amber-500); transform:translateY(-1px); }
.sp-size__name { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:1.15rem; color:var(--color-ink); }
.sp-size__meta { font-size:.75rem; color:var(--color-ink-muted); }
.sp-tirechips { display:flex; flex-wrap:wrap; gap:.4rem; }
.sp-tirechip { display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--color-line-strong); border-radius:999px; padding:.3rem .7rem; font-family:"JetBrains Mono",monospace; font-size:.82rem; color:var(--color-ink-2); text-decoration:none; }
.sp-tirechip:hover { border-color:var(--color-amber-500); color:var(--color-amber-700); }
.sp-tirechip--stock { background:var(--color-amber-50); border-color:var(--color-amber-300); color:var(--color-amber-700); }