/* Tools, guides and market pages. Extra rules only; base styles are in site.css. */
.tool-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; margin: 1rem 0; }
@media (min-width: 720px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
.tool-grid .card { display: flex; flex-direction: column; gap: .4rem; }
.tool-grid .card p { margin: 0; color: var(--muted); }
.tool-grid .card a.more { margin-top: auto; font-weight: 600; }
.tool-page { max-width: 760px; }
.tool-back { margin: .4rem 0 0; }
.tool-purpose { margin: .2rem 0 .4rem; font-size: 1.05rem; }
.tool-example { font-size: .9rem; color: var(--muted); margin: 0 0 1rem; }
.tool-example b { color: var(--fg); }

/* Tiles (tools index) */
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 1rem 0; }
@media (min-width: 720px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
.tile { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; min-height: 132px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg); text-decoration: none; }
.tile:hover, .tile:focus-visible { border-color: var(--accent); }
.tile.is-recent { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.tile-icon { color: var(--accent); }
.tile-name { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.tile-text { color: var(--muted); font-size: .88rem; line-height: 1.3; }

/* Result card (first on the page) */
.result-card { border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--bg-alt); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 1.2rem; }
.result-card [hidden] { display: none !important; }
.rc-empty { margin: 0; color: var(--muted); }
.rc-label { margin: 0; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.rc-big { margin: .1rem 0 .2rem; font-size: clamp(2rem, 11vw, 2.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.rc-title { margin: .1rem 0 .3rem; font-size: 1.35rem; font-weight: 800; }
.rc-sub { margin: 0 0 .6rem; }
.rc-warn { margin: .4rem 0; padding: .5rem .7rem; border: 1px solid var(--warn); border-radius: 8px; font-size: .9rem; }
.rc-warn [data-zero] { display: inline-block; margin: 0 .25rem; padding: 0 .5rem; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); font-weight: 600; }
.rc-warn [data-zero][hidden] { display: none; }
.fold { margin-top: .6rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.fold > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.fold .assump { padding-left: 1.2rem; margin: .6rem 0; font-size: .92rem; }
.fold .assump li { margin-bottom: .3rem; }
.rc-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.rc-actions .btn { min-height: 44px; }
.tyre-table th:first-child, .tyre-table td:first-child { white-space: normal; }

/* Form pieces */
.form .f-big > input, .form .f-big > select { font-size: 1.35rem; min-height: 56px; font-weight: 600; }
.form details.more { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 1.1rem; padding: 0 1rem; }
.form details.more > summary { cursor: pointer; font-weight: 600; min-height: 48px; display: flex; align-items: center; }
.form details.more[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
.form details.more > .more-body { padding-bottom: .4rem; }
.car-pick { margin: 0 0 1rem; padding: .7rem .9rem; border: 1px dashed var(--accent); border-radius: var(--radius); }
.form .row.triple.tyre-pick { margin-bottom: .6rem; }
.form fieldset > .row.tyre-pick + label { margin-top: .2rem; }

/* Value my car */
.vmc-corridor { margin: .6rem 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.vmc-corridor p { margin: 0 0 .3rem; }
.vmc-k { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.vmc-v { font-size: clamp(1.3rem, 6.5vw, 1.8rem); line-height: 1.2; overflow-wrap: anywhere; }
.vmc-detail { margin-top: .8rem; }
.vmc-detail > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.vmc-next ul { padding-left: 1.2rem; }
.vmc-next li { margin: .5rem 0; }
.vmc-next a { display: inline-block; min-height: 32px; }

/* Live bar: the headline number stays visible while the form below is filled in. */
.live-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding: .6rem 16px; background: var(--accent); color: var(--accent-fg); font-weight: 800; font-size: 1.15rem; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.live-bar[hidden] { display: none; }
@media (min-width: 720px) { .live-bar { display: none !important; } }

.field-error { display: block; color: var(--err); font-size: .85rem; font-weight: 400; }
.result { border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--bg-alt); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.2rem 0; }
.result h2 { margin-top: 0; }
.result table td.num { white-space: nowrap; }
.box-warning { border: 1px solid var(--warn); background: var(--bg-alt); border-radius: var(--radius); padding: .8rem 1rem; margin: 1rem 0; }
.box-note { border: 1px solid var(--line); background: var(--bg-alt); border-radius: var(--radius); padding: .8rem 1rem; margin: 2rem 0 1rem; font-size: .92rem; color: var(--muted); }
.example { border: 1px dashed var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin: 1rem 0; }
.example .badge { margin-left: .4rem; }
.checklist h2 { margin-top: 1.4rem; }
.checklist ul { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.checklist label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.checklist input[type=checkbox] { margin-top: .3rem; width: 1.1rem; height: 1.1rem; }
.checklist li.red label { color: var(--err); }
.guide { max-width: 700px; }
.guide h2 { margin-top: 1.8rem; }
.guide ul, .guide ol { padding-left: 1.3rem; }
.guide li { margin-bottom: .35rem; }
.guide-list { list-style: none; padding: 0; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .guide-list { grid-template-columns: repeat(2, 1fr); } }
.sample { font-size: .85rem; color: var(--muted); }
.draft-banner { margin-bottom: 1rem; }
@media print {
  .live-bar, .site-header, .site-footer, .no-print, .toolbar, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main.container { max-width: none; padding: 0; }
  .checklist li { break-inside: avoid; }
  .checklist input[type=checkbox] { -webkit-appearance: checkbox; appearance: checkbox; }
  a { color: #000; text-decoration: none; }
}

/* Guides as a blog: main column + sidebar (categories, tag cloud). */
.blog { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 2rem; }
@media (min-width: 900px) { .blog { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; } }
.guide-sidebar { display: grid; gap: var(--gap); }
.guide-sidebar h2 { font-size: 1rem; margin: 0 0 .6rem; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { margin-bottom: .4rem; }
.plain li.active > a { font-weight: 700; }
.post-meta { margin: 0 0 .3rem; font-size: .85rem; }
.post-tags { margin: .6rem 0; }
.tag { display: inline-block; margin: 0 .35rem .35rem 0; padding: .1rem .6rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--fg); background: var(--bg); line-height: 1.5; }
.tag:hover, .tag.active { border-color: var(--accent); }
.tag-cloud { margin: 0; }
.tag-cloud .tag-1 { font-size: .85rem; }
.tag-cloud .tag-2 { font-size: 1rem; }
.tag-cloud .tag-3 { font-size: 1.15rem; font-weight: 600; }
.guide-list .tag-1 { font-size: .8rem; }
.post-tools { margin: 1.5rem 0; }
.related-posts { margin: 2rem 0; max-width: 700px; }
.related-posts .guide-list { grid-template-columns: 1fr; }
/* Guides home: category cards and card rows; lists on category/tag pages stay one column on narrow screens. */
.blog-main .guide-list { grid-template-columns: 1fr; }
@media (min-width: 720px) { .blog-main .guide-row .guide-list { grid-template-columns: repeat(2, 1fr); } }
.guide-row { margin: 2rem 0; }
.guide-row h2, .blog-main > h2 { font-size: 1.2rem; margin: 0 0 .8rem; }
.cat-cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin: 1.5rem 0; }
.cat-card h2 { font-size: 1.1rem; margin: 0 0 .3rem; }
.cat-card .plain { margin: .6rem 0; }
.guide-search { display: flex; gap: .4rem; }
.guide-search input { flex: 1; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin: 1.5rem 0; }
.tag-az { columns: 2 220px; }

/* market drill-down: make and model lists */
.pick-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 18px; margin: 12px 0 18px; }
.pick-list li{ padding: 4px 0; }

/* reliability label next to a published price figure */
.rel{ font-size: .8em; padding: 1px 6px; border-radius: 8px; border: 1px solid currentColor; white-space: nowrap; }
.rel-high{ color: #1f7a3d; }
.rel-medium{ color: #9a6b00; }
.rel-low{ color: #a33; }
/* generation list of a model: generations without enough data stay visible but quiet */
.gen-table .gen-empty td{ color: var(--muted); }
.gen-table .gen-empty td:first-child{ font-weight: 600; }