/* "Tool page (R1)" template: the Gear Spec Finder page's look for the top of a tool page (hero
   panel, then the tool on the light ground). Loaded after tool-page.css, only on R1 pages; every
   rule is scoped to body.ph-tool-page-r1 or .ph-tp.ph-r1, so the original Tool page template and
   the rest of the site are untouched. The sections below the tool (guide, FAQ, feedback, cards)
   keep the original template's dark band. Fonts: see THIRD-PARTY-NOTICES.txt. */

@font-face { font-family: "PH Inter Tight"; src: url(fonts/inter-tight-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PH Inter Tight"; src: url(fonts/inter-tight-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PH Inter Tight"; src: url(fonts/inter-tight-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PH JetBrains Mono"; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PH JetBrains Mono"; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

/* R1 tokens, light (default) and dark (the reader's choice, html[data-ph-mode="dark"]) */
body.ph-tool-page-r1 {
	--r1-bg: #e4e3dd; --r1-panel: #fbfbf9; --r1-rule: #1a1a18; --r1-line: #c9c7bf; --r1-text: #141414; --r1-muted: #5c5b56; --r1-soft: #33322f;
	--r1-accent: #a35600; --r1-orange: #f7a42a; --r1-ok: #1f9d55;
	--r1-sans: "PH Inter Tight", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
	--r1-mono: "PH JetBrains Mono", "JetBrains Mono", Consolas, monospace;
}
html[data-ph-mode="dark"] body.ph-tool-page-r1 {
	--r1-bg: #0a0a0a; --r1-panel: #111111; --r1-rule: #2b2b29; --r1-line: #34342f; --r1-text: #ecebe6; --r1-muted: #8f8e88; --r1-soft: #c9c8c2;
	--r1-accent: #f7a42a; --r1-ok: #3ccf7e;
}

/* The light ground behind the hero and the tool; the original sections below keep their dark band */
body.ph-tool-page-r1 #main { background: var(--r1-bg); }
.ph-tp.ph-r1 { background: var(--r1-bg); }
.ph-tp.ph-r1 .ph-tp-sec:not(.ph-r1-desk) { background: var(--ph-night); }

/* Hero panel */
.ph-tp.ph-r1 .ph-r1-hero {
	width: min(var(--ph-wrap), calc(100% - 32px)); margin: 24px auto 0; padding: 32px 32px 28px;
	background: var(--r1-panel); border: 1px solid var(--r1-rule); color: var(--r1-text);
	font: 400 16px/1.4 var(--r1-sans); display: grid; gap: 28px;
}
.ph-tp.ph-r1 .ph-r1-hero > *, .ph-tp.ph-r1 .ph-r1-hero-top > *, .ph-tp.ph-r1 .ph-r1-pitch > * { margin: 0; }
.ph-tp.ph-r1 .ph-r1-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; container-type: inline-size; }
/* The title sizes itself to the room it has, so each line typed (Shift+Enter between them) stays
   on one line at every width (Sean: "Pedal Power / Calculator" on two lines). The size fits a line
   of about 11 capitals beside the numbers column (about 260px); a page with a longer line sets a
   smaller --r1-title-fit (the line's width in ems) on the hero block. */
.ph-tp.ph-r1 .ph-r1-hero { --r1-title-fit: 6.4; }
.ph-tp.ph-r1 .ph-r1-hero h1 {
	font: 600 clamp(36px, calc((100cqi - 260px) / var(--r1-title-fit)), 150px)/.84 var(--r1-sans); letter-spacing: -.05em; text-transform: uppercase; color: var(--r1-text); margin: 0;
}
/* the last word of the title, small and grey under the big lines: type it in italics (Ctrl+I) */
.ph-tp.ph-r1 .ph-r1-hero h1 em {
	display: block; margin-top: 18px; font: 500 28px/1.1 var(--r1-sans); letter-spacing: -.015em; text-transform: none; color: var(--r1-muted); font-style: normal;
}

/* The numbers ([ph_tool_stats]) */
.ph-tp.ph-r1 .ph-r1-nums { display: grid; gap: 20px; justify-items: end; text-align: right; padding-top: 6px; }
.ph-tp.ph-r1 .ph-r1-num b { display: block; font: 400 48px/1 var(--r1-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--r1-text); }
.ph-tp.ph-r1 .ph-r1-num span { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px;
	font: 400 11px/1.2 var(--r1-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--r1-muted); }
.ph-tp.ph-r1 .ph-r1-num.hot b { color: var(--r1-accent); }
.ph-tp.ph-r1 .ph-r1-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--r1-ok); flex: none; }

/* The pitch line and the dark-mode switch */
.ph-tp.ph-r1 .ph-r1-pitch { border-top: 1px solid var(--r1-rule); padding-top: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.ph-tp.ph-r1 .ph-r1-lede { max-width: 30em; font: 400 28px/1.2 var(--r1-sans); letter-spacing: -.015em; color: var(--r1-muted); text-wrap: balance; }
.ph-tp.ph-r1 .ph-r1-lede strong { color: var(--r1-text); font-weight: 500; }
.ph-tp.ph-r1 a.ph-r1-link { color: var(--r1-text); text-decoration: none; white-space: nowrap; font-weight: 500; padding: 0 2px; margin: 0 -2px;
	background-image: linear-gradient(var(--r1-orange), var(--r1-orange)), linear-gradient(color-mix(in srgb, var(--r1-orange) 38%, transparent), color-mix(in srgb, var(--r1-orange) 38%, transparent));
	background-repeat: no-repeat; background-size: 100% 1px, 0% 100%; background-position: 0 100%, 0 100%; transition: background-size .35s ease; }
.ph-tp.ph-r1 a.ph-r1-link:hover, .ph-tp.ph-r1 a.ph-r1-link:focus-visible { background-size: 100% 1px, 100% 100%; outline: none; }
.ph-tp.ph-r1 .ph-r1-tg { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px 12px; min-height: 44px;
	border: 1px solid var(--r1-line); font: 500 11px var(--r1-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--r1-muted); white-space: nowrap; }
.ph-tp.ph-r1 .ph-r1-tg:hover, .ph-tp.ph-r1 .ph-r1-tg:focus-visible { border-color: var(--r1-text); color: var(--r1-text); }
.ph-tp.ph-r1 .ph-r1-tg:focus-visible { outline: 2px solid var(--r1-orange); outline-offset: 2px; }
.ph-tp.ph-r1 .ph-r1-sw { position: relative; width: 26px; height: 14px; border: 1px solid currentColor; border-radius: 7px; flex: none; }
.ph-tp.ph-r1 .ph-r1-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transition: transform .15s; }
.ph-tp.ph-r1 .ph-r1-tg[aria-pressed="true"] { color: var(--r1-text); }
.ph-tp.ph-r1 .ph-r1-tg[aria-pressed="true"] .ph-r1-sw::after { transform: translateX(12px); background: var(--r1-orange); }
.ph-tp.ph-r1 .ph-r1-disclosure { margin-top: -8px; font: 400 13px/1.45 var(--r1-sans); color: var(--r1-muted); }

/* The tool, straight on the ground: no card, strip or glow ([ph_tool frame="plain"]) */
.ph-tp.ph-r1 .ph-r1-desk { padding: 12px 16px; } /* 12px above and below the tool: one 12px gap between every panel, as on the Gear Spec Finder pages (Sean, 2026-11-09) */
.ph-tp.ph-r1 .ph-tp-unit--plain { background: none; border-radius: 0; padding: 0; box-shadow: none; }
.ph-tp.ph-r1 .ph-tp-unit--plain::before { display: none; }

/* An R1 section below the tool (e.g. "How we check", as Gear Spec Finder's "How we count"): a light
   panel like the hero, title over a rule, text on the left and a diagram on the right. A group with
   the class ph-r1-sec; inside it a heading, then a group ph-r1-cols holding a text group and the
   diagram (a Custom HTML block built from the ph-r1-diag parts below). It flips with Dark mode. */
.ph-tp.ph-r1 .ph-r1-sec {
	width: min(var(--ph-wrap), calc(100% - 32px)); margin: 0 auto 12px; background: var(--r1-panel); border: 1px solid var(--r1-rule);
	color: var(--r1-text); font: 400 14px/1.6 var(--r1-sans); scroll-margin-top: 16px;
}
.ph-tp.ph-r1 .ph-r1-sec:last-child { margin-bottom: 60px; }
.ph-tp.ph-r1 .ph-r1-sec > h2 {
	margin: 0; padding: 26px 24px 20px; border-bottom: 1px solid var(--r1-rule);
	font: 600 48px/.92 var(--r1-sans); letter-spacing: -.04em; text-transform: uppercase; color: var(--r1-text);
}
.ph-tp.ph-r1 .ph-r1-cols { display: grid; grid-template-columns: minmax(0, 46em) minmax(0, 1fr); gap: 32px; padding: 22px 24px 26px; align-items: start; }
.ph-tp.ph-r1 .ph-r1-cols > * { margin: 0; min-width: 0; }
.ph-tp.ph-r1 .ph-r1-sec p, .ph-tp.ph-r1 .ph-r1-sec li { color: var(--r1-soft); }
.ph-tp.ph-r1 .ph-r1-sec p { margin: 0 0 12px; }
.ph-tp.ph-r1 .ph-r1-sec ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.ph-tp.ph-r1 .ph-r1-sec a { color: var(--r1-text); text-decoration-color: var(--r1-orange); text-underline-offset: 3px; }

/* Numbered points, as Gear Spec Finder's "How we choose" (Sean, 2026-11-09, for "How we check"): a
   ph-r1-sec group holding a heading, an optional intro paragraph (class ph-r1-intro) as a strip
   under it, then a numbered List block with the class ph-r1-steps. Each item's bold start (Ctrl+B)
   is its title; the numbers 01, 02 and so on come from the CSS. All in one row (as many cells as points), two across on
   tablets (an odd last point spans both), one on phones. */
.ph-tp.ph-r1 .ph-r1-sec:has(> .ph-r1-steps) { overflow: hidden; }
.ph-tp.ph-r1 .ph-r1-sec > .ph-r1-intro { margin: 0; padding: 14px 24px 16px; border-bottom: 1px solid var(--r1-rule); font-size: 15px; line-height: 1.5; }
.ph-tp.ph-r1 .ph-r1-sec ol.ph-r1-steps { list-style: none; counter-reset: ph-r1-step; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
	margin: 0 -1px -1px 0 !important; padding: 0 !important; }
.ph-tp.ph-r1 .ph-r1-steps > li { counter-increment: ph-r1-step; margin: 0 !important; padding: 22px 22px 24px; min-width: 0;
	border-right: 1px solid var(--r1-rule); border-bottom: 1px solid var(--r1-rule); font-size: 14px; line-height: 1.5; }
.ph-tp.ph-r1 .ph-r1-steps > li::before { content: counter(ph-r1-step, decimal-leading-zero); display: block; margin-bottom: 12px;
	font: 400 28px/1 var(--r1-mono); letter-spacing: -.02em; color: var(--r1-muted); }
.ph-tp.ph-r1 .ph-r1-steps > li > strong:first-child { display: block; margin-bottom: 8px; font: 600 18px/1.2 var(--r1-sans); letter-spacing: -.015em;
	color: var(--r1-text); text-wrap: balance; }

/* FAQ, folded (Sean, 2026-11-09: option B of the mockups): the Gear Spec Finder pages' ruled grid,
   two across, but each question folds. A ph-r1-sec group with the extra class ph-r1-faq, a heading,
   then a group ph-r1-faq-grid holding one Details block (class ph-r1-qa) per question: the question
   is the Details summary, the answer its paragraphs. One across on phones; flips with Dark mode.
   The small "FAQ" label right of the heading comes from the CSS, so the heading stays plain. */
.ph-tp.ph-r1 .ph-r1-faq { overflow: hidden; }
.ph-tp.ph-r1 .ph-r1-faq > h2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.ph-tp.ph-r1 .ph-r1-faq > h2::after { content: "FAQ"; font: 400 11px/1 var(--r1-mono); letter-spacing: .08em; color: var(--r1-muted); }
.ph-tp.ph-r1 .ph-r1-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin: 0 -1px -1px 0 !important; }
.ph-tp.ph-r1 .ph-r1-qa { margin: 0 !important; padding: 0; border-right: 1px solid var(--r1-line); border-bottom: 1px solid var(--r1-line); min-width: 0; align-self: stretch; }
.ph-tp.ph-r1 .ph-r1-qa > summary { margin: 0 !important; list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 16px 24px; font: 600 17px/1.3 var(--r1-sans); letter-spacing: -.01em; text-transform: none; color: var(--r1-text); }
.ph-tp.ph-r1 .ph-r1-qa > summary::-webkit-details-marker { display: none; }
.ph-tp.ph-r1 .ph-r1-qa > summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center;
	border: 1px solid var(--r1-line); font: 400 18px/1 var(--r1-mono); color: var(--r1-muted); }
.ph-tp.ph-r1 .ph-r1-qa[open] > summary::after { content: "\2212"; border-color: var(--r1-orange); color: var(--r1-text); }
.ph-tp.ph-r1 .ph-r1-qa > summary:hover { background: rgba(247, 164, 42, .08); }
.ph-tp.ph-r1 .ph-r1-qa > summary:focus-visible { outline: 2px solid var(--r1-orange); outline-offset: -2px; }
.ph-tp.ph-r1 .ph-r1-qa p { margin: 0 24px 8px !important; font-size: 15px; line-height: 1.55; color: var(--r1-soft); }
.ph-tp.ph-r1 .ph-r1-qa p:last-child { margin-bottom: 18px !important; }

/* Diagram parts: a struck-out label, a row of jacks (rings; .hot = orange, .pair = a dashed group
   that shares one figure), a row of callouts, and the result in big orange numbers */
.ph-tp.ph-r1 .ph-r1-diag { display: grid; gap: 22px; align-content: start; }
.ph-tp.ph-r1 .ph-r1-diag .k { margin: 0 0 6px; font: 500 13px/1.2 var(--r1-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--r1-muted); }
.ph-tp.ph-r1 .ph-r1-diag .struck { margin: 0; font: 400 52px/1 var(--r1-mono); letter-spacing: -.03em; color: var(--r1-muted); text-decoration: line-through; text-decoration-color: var(--r1-text); text-decoration-thickness: 3px; }
.ph-tp.ph-r1 .ph-r1-diag .panel { border: 1.5px solid var(--r1-text); padding: 18px 16px 12px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.ph-tp.ph-r1 .ph-r1-diag .grp { display: flex; gap: 8px; align-items: flex-end; }
.ph-tp.ph-r1 .ph-r1-diag .jack { display: grid; justify-items: center; gap: 6px; font: 500 12px/1 var(--r1-mono); letter-spacing: .06em; color: var(--r1-muted); }
.ph-tp.ph-r1 .ph-r1-diag .jack i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; display: block; box-sizing: border-box; }
.ph-tp.ph-r1 .ph-r1-diag .mid { color: var(--r1-text); }
.ph-tp.ph-r1 .ph-r1-diag .pair { display: grid; justify-items: center; gap: 6px; font: 500 12px/1 var(--r1-mono); letter-spacing: .06em; color: var(--r1-accent); }
.ph-tp.ph-r1 .ph-r1-diag .pair > span:first-child { display: flex; gap: 6px; border: 1.5px dashed var(--r1-orange); padding: 4px 6px; }
.ph-tp.ph-r1 .ph-r1-diag .pair i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--r1-orange); display: block; box-sizing: border-box; }
.ph-tp.ph-r1 .ph-r1-diag .calls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ph-tp.ph-r1 .ph-r1-diag .calls b { display: block; font: 500 22px/1.1 var(--r1-mono); color: var(--r1-muted); }
.ph-tp.ph-r1 .ph-r1-diag .calls .mid b { color: var(--r1-text); }
.ph-tp.ph-r1 .ph-r1-diag .calls .hot b { color: var(--r1-accent); }
.ph-tp.ph-r1 .ph-r1-diag .calls span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.3; color: var(--r1-soft); }
.ph-tp.ph-r1 .ph-r1-diag .result { border-top: 1px solid var(--r1-line); padding-top: 18px; display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.ph-tp.ph-r1 .ph-r1-diag .result b { display: block; font: 400 52px/1 var(--r1-mono); letter-spacing: -.03em; color: var(--r1-accent); }
.ph-tp.ph-r1 .ph-r1-diag .result p { margin: 0 0 6px; max-width: 18em; font-size: 15px; line-height: 1.35; }

@media (max-width: 860px) {
	.ph-tp.ph-r1 .ph-r1-sec > h2 { padding: 22px 20px 18px; font-size: 28px; }
	.ph-tp.ph-r1 .ph-r1-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; }
	.ph-tp.ph-r1 .ph-r1-faq-grid { grid-template-columns: minmax(0, 1fr); }
	.ph-tp.ph-r1 .ph-r1-qa > summary { padding: 14px 20px; font-size: 16px; }
	.ph-tp.ph-r1 .ph-r1-sec ol.ph-r1-steps { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ph-tp.ph-r1 .ph-r1-steps > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.ph-tp.ph-r1 .ph-r1-sec > .ph-r1-intro { padding: 14px 20px 16px; }
	.ph-tp.ph-r1 .ph-r1-steps > li { padding: 20px; }
	.ph-tp.ph-r1 .ph-r1-qa p { margin-left: 20px !important; margin-right: 20px !important; }
	.ph-tp.ph-r1 .ph-r1-diag .struck { font-size: 40px; }
	.ph-tp.ph-r1 .ph-r1-diag .calls { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ph-tp.ph-r1 .ph-r1-diag .jack i, .ph-tp.ph-r1 .ph-r1-diag .pair i { width: 22px; height: 22px; }
}

@media (max-width: 860px) {
	.ph-tp.ph-r1 .ph-r1-hero { padding: 26px 20px 22px; margin-top: 16px; gap: 22px; }
	.ph-tp.ph-r1 .ph-r1-hero-top { grid-template-columns: minmax(0, 1fr); }
	.ph-tp.ph-r1 .ph-r1-hero h1 { font-size: clamp(28px, calc(100cqi / var(--r1-title-fit)), 150px); }
	.ph-tp.ph-r1 .ph-r1-nums { grid-auto-flow: column; justify-content: start; justify-items: start; text-align: left; gap: 24px; }
	.ph-tp.ph-r1 .ph-r1-num b { font-size: 28px; }
	.ph-tp.ph-r1 .ph-r1-num span { justify-content: flex-start; }
	.ph-tp.ph-r1 .ph-r1-hero h1 em { font-size: 20px; margin-top: 12px; }
	.ph-tp.ph-r1 .ph-r1-lede { font-size: 18px; line-height: 1.25; }
	.ph-tp.ph-r1 .ph-r1-desk { padding: 12px 16px; }
}
@media (max-width: 480px) {
	.ph-tp.ph-r1 .ph-r1-nums { grid-auto-flow: row; grid-template-columns: repeat(2, auto); }
	.ph-tp.ph-r1 .ph-r1-sec ol.ph-r1-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.ph-tp.ph-r1 a.ph-r1-link, .ph-tp.ph-r1 .ph-r1-sw::after { transition: none; }
}