/**
 * FSC Owner Tools — shared styles.
 * Scoped to .fsc-tool so nothing leaks into the Astra theme.
 * Mobile-first: these get used in a driveway on a phone.
 */

.fsc-tool {
	/*
	 * Sampled from the live FullSizeChevy homepage rather than invented, so the
	 * tools read as part of the site instead of a bolted-on app:
	 *   headings  Anton, uppercase          body      Rubik
	 *   card      #1B1B1B on #333 at 9px    CTA       #C14924 at 5px
	 *   kicker    Roboto 11px, 1.32px track gold      #E0A44A
	 * Every value falls back to inherit/currentColor, so if the theme changes
	 * the tools follow it rather than fighting it.
	 */
	--fsc-display:   Anton, Oswald, "Arial Narrow", "Barlow Semi Condensed", sans-serif;
	--fsc-body:      Rubik, Roboto, "Segoe UI", Arial, sans-serif;
	--fsc-accent:    #c14924;
	--fsc-accent-ink:#ffffff;
	--fsc-gold:      #e0a44a;
	--fsc-card:      #1b1b1b;
	--fsc-card-2:    #202020;
	--fsc-line:      #333333;
	--fsc-line-soft: rgba(255, 255, 255, .08);
	--fsc-muted:     #9aa0a3;
	--fsc-ok:        #6fbf8b;
	--fsc-ok-bg:     rgba(111, 191, 139, .12);
	--fsc-warn:      #e0a44a;
	--fsc-warn-bg:   rgba(224, 164, 74, .12);
	--fsc-unk:       #9aa0a3;
	--fsc-unk-bg:    rgba(255, 255, 255, .06);
	--fsc-radius:    9px;

	color: inherit;
	background: transparent;
	font-family: var(--fsc-body);
	font-size: 16px;
	line-height: 1.6;
	max-width: 100%;
}

/* Headings pick up the site's display face. */
.fsc-tool h2,
.fsc-tool h3,
.fsc-tool .fsc-panel__title,
.fsc-tool .fsc-hub__title,
.fsc-tool .fsc-code__code {
	font-family: var(--fsc-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .3px;
	line-height: 1.15;
}
.fsc-tool .fsc-code__code { letter-spacing: .08em; }

/* Section kickers - READY TO USE, BEING BUILT, the result group headers. */
.fsc-tool .fsc-hub__h,
.fsc-tool .fsc-group__h,
.fsc-tool .fsc-filters legend {
	font-family: Roboto, var(--fsc-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: var(--fsc-muted);
	border-bottom: 1px solid var(--fsc-line);
	padding-bottom: .5rem;
}

/* Secondary text: the theme's colour dialled back, never a fixed grey. */
.fsc-tool .fsc-muted,
.fsc-tool .fsc-hint,
.fsc-tool .fsc-summary,
.fsc-tool .fsc-privacy,
.fsc-tool .fsc-hub__blurb,
.fsc-tool .fsc-hub__soonlead,
.fsc-tool .fsc-rec__owner,
.fsc-tool .fsc-rec__scope,
.fsc-tool .fsc-tok__why,
.fsc-tool .fsc-disclaimer,
.fsc-tool .fsc-cv figcaption,
.fsc-tool label { color: inherit; opacity: .74; }

.fsc-tool .fsc-rec__src,
.fsc-tool .fsc-rec__ev,
.fsc-tool .fsc-code__cat,
.fsc-tool .fsc-hub__stat,
.fsc-tool .fsc-hub__pending { color: var(--fsc-muted); }
.fsc-tool .fsc-hub__stat strong { color: inherit; font-family: var(--fsc-display); font-size: 1.35rem; }
.fsc-tool .fsc-rec__src a { color: var(--fsc-muted); }
.fsc-tool .fsc-hub__title a { color: inherit; text-decoration: none; }
.fsc-tool .fsc-hub__title a:hover { color: var(--fsc-gold); }

.fsc-tool *,
.fsc-tool *::before,
.fsc-tool *::after { box-sizing: border-box; }

.fsc-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ panel */

.fsc-panel {
	background: var(--fsc-surface);
	border: 1px solid var(--fsc-line);
	border-radius: var(--fsc-radius);
	padding: 1.25rem;
	margin: 0 0 1.5rem;
}

.fsc-panel__title { margin: 0 0 .35rem; font-size: 1.3rem; line-height: 1.25; }
.fsc-panel__lead  { margin: 0 0 1rem; color: var(--fsc-ink-soft); }

.fsc-field { margin: 0 0 1rem; }
.fsc-field label {
	display: block;
	font-weight: 600;
	margin: 0 0 .3rem;
	font-size: .95rem;
}

.fsc-tool textarea,
.fsc-tool input[type="number"],
.fsc-tool select {
	width: 100%;
	min-height: 44px;                 /* touch target */
	padding: .6rem .7rem;
	font: inherit;
	color: var(--fsc-ink);
	background: var(--fsc-bg);
	border: 1px solid var(--fsc-line);
	border-radius: var(--fsc-radius);
}

.fsc-tool textarea {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	text-transform: uppercase;
	resize: vertical;
}

.fsc-tool [data-fsc="forum"] { text-transform: none; }

.fsc-tool :focus-visible {
	outline: 3px solid var(--fsc-accent);
	outline-offset: 2px;
}

.fsc-hint { margin: .35rem 0 0; font-size: .85rem; color: var(--fsc-ink-soft); }

.fsc-filters {
	border: 0;
	border-top: 1px solid var(--fsc-line);
	padding: 1rem 0 0;
	margin: 0;
	display: grid;
	gap: .75rem;
}
.fsc-filters legend {
	padding: 0;
	font-weight: 600;
	font-size: .95rem;
	margin-bottom: .5rem;
}

@media (min-width: 40rem) {
	.fsc-filters { grid-template-columns: repeat(3, 1fr); }
	.fsc-filters legend { grid-column: 1 / -1; }
	.fsc-field--inline { margin: 0; }
}

.fsc-summary {
	margin: 1rem 0 0;
	font-size: .9rem;
	color: var(--fsc-ink-soft);
	font-variant-numeric: tabular-nums;
}

.fsc-loaderr {
	margin: 1rem 0 0;
	padding: .7rem .85rem;
	background: var(--fsc-warn-bg);
	color: var(--fsc-warn);
	border-radius: var(--fsc-radius);
	font-size: .9rem;
}

/* ---------------------------------------------------------------- results */

.fsc-group { margin: 0 0 2rem; }
.fsc-group__h {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--fsc-ink-soft);
	border-bottom: 2px solid var(--fsc-line);
	padding-bottom: .35rem;
	margin: 0 0 1rem;
}

.fsc-code {
	border: 1px solid var(--fsc-line);
	border-radius: var(--fsc-radius);
	padding: 1rem;
	margin: 0 0 1rem;
	background: var(--fsc-bg);
}

.fsc-code__h {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	flex-wrap: wrap;
	margin: 0 0 .75rem;
	font-size: 1rem;
}
.fsc-code__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .06em;
}
.fsc-code__cat { font-size: .85rem; color: var(--fsc-ink-soft); font-weight: 400; }

.fsc-recs { list-style: none; margin: 0; padding: 0; }
.fsc-rec {
	padding: .85rem 0;
	border-top: 1px dashed var(--fsc-line);
}
.fsc-rec:first-child { border-top: 0; padding-top: 0; }

.fsc-rec__meaning { margin: 0 0 .25rem; font-weight: 600; font-size: 1.05rem; }
.fsc-rec__scope   { margin: 0 0 .4rem; font-size: .9rem; color: var(--fsc-ink-soft); }
.fsc-rec__owner   { margin: 0 0 .4rem; }
.fsc-rec__ev {
	margin: 0 0 .4rem;
	padding-left: .75rem;
	border-left: 3px solid var(--fsc-line);
	font-style: italic;
	color: var(--fsc-ink-soft);
	font-size: .92rem;
}
.fsc-rec__src { margin: 0; font-size: .82rem; color: var(--fsc-ink-soft); }
.fsc-rec__src a { color: inherit; }

/* Status is never conveyed by colour alone — every badge carries a glyph + word. */
.fsc-badge {
	display: inline-block;
	padding: .1rem .45rem;
	border-radius: 3px;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
}
.fsc-badge--confirmed    { background: var(--fsc-ok-bg);   color: var(--fsc-ok); }
.fsc-badge--corroborated { background: var(--fsc-ok-bg);   color: var(--fsc-ok); }
.fsc-badge--unverified   { background: var(--fsc-unk-bg);  color: var(--fsc-unk); }

.fsc-warn {
	background: var(--fsc-warn-bg);
	color: var(--fsc-warn);
	border-left: 4px solid currentColor;
	padding: .7rem .85rem;
	border-radius: 0 var(--fsc-radius) var(--fsc-radius) 0;
	margin: 0 0 .85rem;
	font-size: .92rem;
}
.fsc-warn-inline { color: var(--fsc-warn); font-size: .85rem; }

.fsc-unknown {
	border: 1px dashed var(--fsc-line);
	border-radius: var(--fsc-radius);
	padding: 1rem;
	margin: 0 0 1.5rem;
}
.fsc-unknown h3 { margin: 0 0 .6rem; font-size: 1rem; }
.fsc-unknown ul { margin: 0 0 .75rem; padding-left: 1.2rem; }
.fsc-unknown code {
	font-weight: 700;
	background: var(--fsc-surface);
	padding: .05rem .3rem;
	border-radius: 3px;
}

.fsc-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--fsc-accent);
	text-decoration: underline;
	cursor: pointer;
	font-weight: 700;
}

.fsc-muted { color: var(--fsc-ink-soft); font-size: .9rem; }

/* ------------------------------------------------------------- forum block */

.fsc-forumblock {
	background: var(--fsc-surface);
	border: 1px solid var(--fsc-line);
	border-radius: var(--fsc-radius);
	padding: 1.25rem;
	margin: 0 0 2rem;
}
.fsc-forumblock h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.fsc-forumblock textarea { margin: .75rem 0; }

.fsc-btn {
	display: inline-block;
	min-height: 44px;
	padding: .65rem 1.1rem;
	background: var(--fsc-accent);
	color: var(--fsc-accent-ink);
	border: 1px solid var(--fsc-accent);
	border-radius: var(--fsc-radius);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	font-size: 1rem;
}
.fsc-btn--ghost {
	background: transparent;
	color: var(--fsc-ink);
	border-color: var(--fsc-line);
}

/* ------------------------------------------------------------------ tables */

.fsc-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
	font-size: .92rem;
	display: block;
	overflow-x: auto;          /* wide tables scroll themselves, never the page */
}
.fsc-table th,
.fsc-table td {
	text-align: left;
	padding: .5rem .6rem;
	border-bottom: 1px solid var(--fsc-line);
	vertical-align: top;
}
.fsc-table thead th {
	border-bottom: 2px solid var(--fsc-line);
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--fsc-ink-soft);
}

.fsc-coverage, .fsc-correction, .fsc-fallback { margin: 0 0 2rem; }
.fsc-coverage h2, .fsc-correction h2, .fsc-fallback h2 { font-size: 1.15rem; margin: 0 0 .5rem; }

.fsc-disclaimer {
	font-size: .82rem;
	color: var(--fsc-ink-soft);
	border-top: 1px solid var(--fsc-line);
	padding-top: 1rem;
	margin: 2rem 0 0;
}

/* ------------------------------------------------------------------- print */

@media print {
	.fsc-panel, .fsc-forumblock, .fsc-correction, .fsc-btn, .fsc-link { display: none !important; }
	.fsc-tool { font-size: 11pt; }
	.fsc-code { break-inside: avoid; border: 1px solid #999; }
	.fsc-rec__src { font-size: 8pt; }
	.fsc-rec__src a::after { content: " (" attr(href) ")"; word-break: break-all; }
	/* Only when the decoder never came up. rpo-decoder.js sets hidden on this
	   section once it is ready, and an unqualified display:block!important
	   overrode that in print - so printing a decode appended the whole
	   1,028-row static reference table after the owner's results. */
	.fsc-fallback:not([hidden]) { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
	.fsc-tool * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ tabs -- */
/* Wrap, always.
   Measured on the live page 2026-09-27: the three tab labels come to 557px.
   With nowrap and no overflow handling, a 375px phone has about 343px of
   usable width, so the third tab was pushed clean off the right edge with
   nothing to scroll to - invisible, not just awkward. The first two already
   came to 353px, so "Use a photo of the label" was being clipped before the
   QR tab existed. Wrapping costs a second row and hides nothing. */
.fsc-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem;border-bottom:1px solid var(--fsc-line)}
.fsc-tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;
  margin-bottom:-1px;padding:.6rem .9rem;min-height:44px;font:inherit;font-weight:600;
  font-size:1rem;color:inherit;cursor:pointer}
.fsc-tab[aria-selected="true"]{color:inherit;border-bottom-color:var(--fsc-accent)}
.fsc-req{color:var(--fsc-accent)}
.fsc-filters__note{grid-column:1/-1;margin:.2rem 0 0}

/* ----------------------------------------------------------- photo reader -- */
.fsc-photo-ctrls{display:grid;gap:.9rem;margin:1rem 0 0}
@media(min-width:46rem){.fsc-photo-ctrls{grid-template-columns:repeat(3,1fr)}}
.fsc-photo-ctrls b{font-variant-numeric:tabular-nums}
.fsc-row{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 0;align-items:center}
.fsc-check{display:inline-flex;align-items:center;gap:.4rem;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:.9rem;margin:0}
.fsc-canvases{display:grid;gap:1rem;margin:1rem 0 0}
@media(min-width:46rem){.fsc-canvases{grid-template-columns:1fr 1fr}}
.fsc-cv{border:1px solid var(--fsc-line);border-radius:5px;overflow:hidden;
  background:var(--fsc-surface);margin:0}
.fsc-cv figcaption{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:inherit;padding:.4rem .6rem;
  border-bottom:1px solid var(--fsc-line);font-weight:600}
.fsc-cv canvas,.fsc-cv img{display:block;width:100%;height:auto;max-height:340px;
  object-fit:contain;background:var(--fsc-card)}
[data-fsc="cv-src"]{cursor:crosshair;touch-action:none}
.fsc-tool [hidden]{display:none !important}
.fsc-meter{background:var(--fsc-surface);border-radius:99px;height:5px;
  overflow:hidden;margin:.6rem 0 0}
.fsc-meter i{display:block;height:5px;border-radius:99px;background:var(--fsc-accent)}
.fsc-review{background:var(--fsc-surface);border:1px solid var(--fsc-line);
  border-radius:5px;padding:1.15rem;margin:1.5rem 0 0}

/* one recognised token */
.fsc-tok{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;
  border:1px solid var(--fsc-line);border-radius:5px;margin:0 0 .5rem;
  background:var(--fsc-card);flex-wrap:wrap}
.fsc-tok__in{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.05rem;font-weight:700;color:inherit;
  text-decoration:line-through;min-width:3.5rem}
.fsc-tok__in.is-clean{text-decoration:none;color:inherit}
.fsc-tok__arrow{color:inherit}
.fsc-tok__out{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.3rem;font-weight:700;letter-spacing:.06em;min-width:3.5rem}
.fsc-tok__why{font-size:.82rem;color:inherit;flex:1 1 14rem}
.fsc-tok input[type=checkbox]{width:20px;height:20px}
.fsc-pill{display:inline-flex;align-items:center;padding:.08rem .45rem;border-radius:99px;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:1px solid}
.fsc-p-exact{background:var(--fsc-ok-bg);color:var(--fsc-ok);border-color:var(--fsc-ok)}
.fsc-p-dated{background:var(--fsc-unk-bg);color:inherit;border-color:var(--fsc-line)}
.fsc-p-ref  {background:transparent;color:inherit;opacity:.75;border-color:var(--fsc-line);border-style:dashed}
.fsc-p-fixed{background:var(--fsc-unk-bg);color:inherit;border-color:var(--fsc-line)}
.fsc-p-maybe{background:var(--fsc-warn-bg);color:var(--fsc-warn);border-color:var(--fsc-warn)}
.fsc-p-off  {background:var(--fsc-warn-bg);color:var(--fsc-warn);border-color:var(--fsc-warn);border-style:dashed}
.fsc-p-no   {background:var(--fsc-unk-bg);color:inherit;opacity:.75;border-color:var(--fsc-line)}
[data-fsc="ocrraw"]{white-space:pre-wrap;font-size:.8rem;background:var(--fsc-surface);
  padding:.7rem;border-radius:5px;overflow-x:auto;margin:.5rem 0 0}

/* ------------------------------------------------------------------- hub -- */
.fsc-hub__lead{font-size:1.05rem;color:inherit;max-width:60ch;margin:0 0 2rem}
.fsc-hub__h{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:inherit;border-bottom:2px solid var(--fsc-line);
  padding-bottom:.4rem;margin:2.5rem 0 1.2rem}
.fsc-hub__soonlead{max-width:60ch;margin:-.6rem 0 1.2rem}
.fsc-hub__grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media(min-width:44rem){.fsc-hub__grid{grid-template-columns:repeat(2,1fr)}}
.fsc-hub__card{background:var(--fsc-card);border:1px solid var(--fsc-line);border-radius:5px;
  padding:1.15rem 1.25rem;display:flex;flex-direction:column}
.fsc-hub__card--soon{background:transparent;border-style:dashed}
.fsc-hub__title{font-size:1.2rem;margin:0 0 .4rem;line-height:1.2}
.fsc-hub__title a{text-decoration:none}
.fsc-hub__title a:hover{text-decoration:underline}
.fsc-hub__blurb{margin:0 0 .6rem;color:inherit;font-size:.95rem;flex:1}
.fsc-hub__note{margin:0 0 .6rem;font-size:.85rem;color:var(--fsc-warn);
  background:var(--fsc-warn-bg);border-left:3px solid currentColor;padding:.45rem .6rem;
  border-radius:0 4px 4px 0}
.fsc-hub__stat{margin:0 0 .8rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  color:inherit;font-variant-numeric:tabular-nums}
.fsc-hub__stat strong{font-size:1.1rem;color:inherit}
.fsc-hub__pending{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:inherit}
.fsc-hub__ask{margin:3rem 0 0;padding:1.4rem 1.5rem;background:var(--fsc-surface);
  border-radius:5px}
.fsc-hub__ask h2{font-size:1.25rem;margin:0 0 .5rem}
.fsc-hub__ask p{margin:0 0 .8rem;max-width:60ch}
/* A lone card in a two-column grid leaves a dead half-page. Let it span. */
.fsc-hub__grid > li:only-child{grid-column:1/-1}
.fsc-hub__title a{color:var(--fsc-accent)}
.fsc-privacy{margin:1rem 0 0;padding:.7rem .85rem;font-size:.85rem;line-height:1.5;
  color:inherit;background:var(--fsc-surface);
  border-left:3px solid var(--fsc-line);border-radius:0 4px 4px 0;max-width:66ch}


/* ---- brand-matched surfaces ------------------------------------------- */
.fsc-tool .fsc-panel,
.fsc-tool .fsc-hub__card,
.fsc-tool .fsc-code,
.fsc-tool .fsc-review,
.fsc-tool .fsc-cv,
.fsc-tool .fsc-tok,
.fsc-tool .fsc-hub__ask {
	background: var(--fsc-card);
	border: 1px solid var(--fsc-line);
	border-radius: var(--fsc-radius);
}
.fsc-tool .fsc-hub__card--soon { background: transparent; border-style: dashed; }
.fsc-tool .fsc-tok { background: var(--fsc-card-2); }

/* CTA - matches the homepage's Find Your Truck button exactly. */
.fsc-tool .fsc-btn {
	display: inline-block;
	background: var(--fsc-accent);
	color: var(--fsc-accent-ink);
	border: 1px solid var(--fsc-accent);
	border-radius: 5px;
	font-family: Roboto, var(--fsc-body);
	font-weight: 700;
	font-size: 15px;
	padding: 13px 22px;
	min-height: 44px;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
}
.fsc-tool .fsc-btn:hover { filter: brightness(1.12); color: var(--fsc-accent-ink); }
.fsc-tool .fsc-btn--ghost {
	background: transparent;
	color: inherit;
	border-color: var(--fsc-line);
}
.fsc-tool .fsc-btn--ghost:hover { border-color: var(--fsc-accent); color: inherit; }
.fsc-tool .fsc-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }

/* Inputs sit on the card, not on white. */
.fsc-tool textarea,
.fsc-tool input[type=number],
.fsc-tool input[type=text],
.fsc-tool input[type=file],
.fsc-tool select {
	background: rgba(0, 0, 0, .25);
	color: inherit;
	border: 1px solid var(--fsc-line);
	border-radius: 5px;
	font-family: var(--fsc-body);
}
.fsc-tool textarea:focus,
.fsc-tool input:focus,
.fsc-tool select:focus { outline: 2px solid var(--fsc-accent); outline-offset: 1px; }

/* Tabs */
.fsc-tool .fsc-tab {
	font-family: var(--fsc-display);
	text-transform: uppercase;
	letter-spacing: .4px;
	font-size: 1.05rem;
	color: var(--fsc-muted);
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
}
.fsc-tool .fsc-tab[aria-selected="true"] { color: inherit; border-bottom-color: var(--fsc-accent); }

/* Narrow screens: smaller type and tighter padding so the three tabs land on
   two rows instead of three. min-height stays at 44px - the target does not
   shrink, only the box around the text. */
@media (max-width: 30rem) {
	.fsc-tool .fsc-tab { font-size: .92rem; letter-spacing: .2px; }
	.fsc-tabs .fsc-tab { padding: .55rem .6rem; }
}

/* A code heading should read like a part number, and the gold is the site's. */
.fsc-tool .fsc-code__code { color: var(--fsc-gold); font-size: 1.6rem; }
.fsc-tool .fsc-warn { border-left: 3px solid var(--fsc-warn); background: var(--fsc-warn-bg); color: var(--fsc-warn); }
.fsc-tool .fsc-privacy { background: rgba(255,255,255,.04); border-left: 3px solid var(--fsc-line); }

/*
 * Astra styles page lists as `.entry-content ul { padding-left: 20px }`, which
 * outranks a single-class rule of ours. The card grids are <ul>s, so every card
 * sat 20px right of everything else on the page - visible the moment a
 * full-width image was placed above them. Match the specificity and win.
 */
.entry-content .fsc-hub__grid,
.entry-content .fsc-recs,
.entry-content .fsc-tool ul { padding-left: 0; margin-left: 0; list-style: none; }

/* ---------------------------------------------------------------------------
   MPG Calculator
   The percentile band is the only place this tool spends colour: red / amber /
   green map to the bottom, middle and top third of that engine's submissions.
--------------------------------------------------------------------------- */
.fsc-tool--mpg .fsc-mpg__units { display: flex; margin: 0 0 1rem; border: 1px solid currentColor; border-color: rgba(255,255,255,.18); border-radius: 8px; overflow: hidden; }
.fsc-tool--mpg .fsc-mpg__unit { flex: 1 1 0; background: transparent; border: 0; padding: .7rem .5rem; font: inherit; font-size: .9rem; color: inherit; opacity: .65; cursor: pointer; min-height: 44px; }
.fsc-tool--mpg .fsc-mpg__unit[aria-pressed="true"] { background: rgba(255,255,255,.08); opacity: 1; font-weight: 600; }
.fsc-tool--mpg .fsc-mpg__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) { .fsc-tool--mpg .fsc-mpg__row { grid-template-columns: 1fr; } }
.fsc-tool--mpg .fsc-mpg__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.fsc-tool--mpg .fsc-mpg__actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1rem; }
.fsc-tool--mpg .fsc-mpg__consent { display: flex; align-items: center; gap: .45rem; font-size: .85rem; opacity: .8; cursor: pointer; }
.fsc-tool--mpg .fsc-mpg__consent input { width: 17px; height: 17px; }
.fsc-tool--mpg .fsc-mpg__out { margin-top: 1.5rem; }
.fsc-tool--mpg .fsc-mpg__result { background: rgba(255,255,255,.05); border-radius: 10px; padding: 1.1rem 1.25rem; }
.fsc-tool--mpg .fsc-mpg__big { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin: 0; }
.fsc-tool--mpg .fsc-mpg__num { font-size: 2.6rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fsc-tool--mpg .fsc-mpg__unitlabel { font-size: .9rem; opacity: .7; }
.fsc-tool--mpg .fsc-mpg__eng { margin-left: auto; font-size: .9rem; opacity: .75; }
.fsc-tool--mpg .fsc-mpg__band { margin-top: 1.4rem; }
.fsc-tool--mpg .fsc-mpg__bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; }
.fsc-tool--mpg .fsc-mpg__bar span { flex: 1 1 0; }
.fsc-tool--mpg .fsc-mpg__bar--lo { background: #d96b6b; }
.fsc-tool--mpg .fsc-mpg__bar--mid { background: #e0a84e; }
.fsc-tool--mpg .fsc-mpg__bar--hi { background: #86b95c; }
.fsc-tool--mpg .fsc-mpg__mark { position: relative; height: 26px; }
.fsc-tool--mpg .fsc-mpg__mark i { position: absolute; top: 0; width: 2px; height: 15px; background: currentColor; transform: translateX(-1px); }
.fsc-tool--mpg .fsc-mpg__mark b { position: absolute; top: 14px; transform: translateX(-50%); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.fsc-tool--mpg .fsc-mpg__scale { display: flex; justify-content: space-between; font-size: .75rem; opacity: .65; font-variant-numeric: tabular-nums; margin: 0; }
.fsc-tool--mpg .fsc-mpg__verdict { margin: .85rem 0 0; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; opacity: .85; }
.fsc-tool--mpg .fsc-mpg__recent { margin-top: 1.4rem; }
.fsc-tool--mpg .fsc-mpg__recent h3 { margin: 0 0 .2rem; font-size: .95rem; }
.fsc-tool--mpg .fsc-mpg__list { list-style: none; margin: .6rem 0 0; padding: 0; }
.fsc-tool--mpg .fsc-mpg__list li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .9rem; }
.fsc-tool--mpg .fsc-mpg__list li:last-child { border-bottom: 0; }
.fsc-tool--mpg .fsc-mpg__list b { font-variant-numeric: tabular-nums; }
.fsc-tool--mpg .fsc-mpg__after { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* The native dropdown popup inherits the select's colour on Windows Chrome,
   which lands light-on-light. Options get their own explicit pairing. */
.fsc-tool--mpg select option,
.fsc-tool select option,
.fsc-tool select optgroup { color: #111; background: #fff; }

.fsc-tool--mpg .fsc-mpg__disclosure { margin: 1rem 0 0; font-size: .8rem; line-height: 1.6; opacity: .6; }
.fsc-tool--mpg .fsc-mpg__disclosure strong { opacity: .85; }

.fsc-tool--rpo .fsc-photo-ctrls select { min-height: 40px; padding: 4px 8px; }
.fsc-tool--rpo select option { color: #111; background: #fff; }

.fsc-tool--rpo .fsc-advphoto { margin: .75rem 0 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: .6rem; }
.fsc-tool--rpo .fsc-advphoto > summary { cursor: pointer; font-size: .85rem; opacity: .7; list-style: revert; }
.fsc-tool--rpo .fsc-advphoto > summary:hover { opacity: 1; }
.fsc-tool--rpo .fsc-advphoto[open] > summary { margin-bottom: .5rem; }

/* Honeypot: off-screen for people, still fillable by a bot. Must be scoped to
   the whole tool, not one tool - it rendered as a visible "leave this empty"
   field on the RPO page when it was scoped to the MPG one. */
.fsc-hp, .fsc-tool .fsc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.fsc-tool--rpo .fsc-stat { font-size: .85rem; opacity: .65; margin: 1rem 0 0; }

/* Stat bar - the running counter on the decoder and the size of the database on
   the code list. Gold, not the rust accent: #c14924 is the CTA colour on this
   site, and a number wearing the button colour teaches people to tap it. Gold is
   already the tool's kicker and warning colour, so it reads as emphasis rather
   than as an action.

   min-height is not decoration. On the decoder the bar is filled by two REST
   calls after paint; reserving the height and starting invisible means the form
   below it never moves. */
.fsc-tool .fsc-statbar {
	display: flex;
	margin: .2rem 0 0;
	border: 1px solid var(--fsc-line);
	border-radius: 8px;
	background: rgba(224, 164, 74, .05);
	overflow: hidden;
	min-height: 66px;
}
.fsc-tool .fsc-statbar[data-pending] { visibility: hidden; }
.fsc-tool .fsc-statbar__cell {
	flex: 1;
	padding: .55rem .9rem;
	border-right: 1px solid var(--fsc-line-soft);
}
.fsc-tool .fsc-statbar__cell:last-child { border-right: 0; }
.fsc-tool .fsc-statbar__n {
	font-family: var(--fsc-display);
	font-size: 1.7rem;
	line-height: 1.05;
	letter-spacing: .01em;
	color: var(--fsc-gold);
	font-variant-numeric: tabular-nums;
}
.fsc-tool .fsc-statbar__l {
	margin-top: 2px;
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--fsc-muted);
}
@media (max-width: 400px) {
	.fsc-tool .fsc-statbar__n { font-size: 1.35rem; }
	.fsc-tool .fsc-statbar__cell { padding: .5rem .6rem; }
}

/* ---------------------------------------------------------------------------
   RPO code database
--------------------------------------------------------------------------- */
.fsc-tool--rpodb .fsc-rpodb__row { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: .75rem; }
@media (max-width: 640px) { .fsc-tool--rpodb .fsc-rpodb__row { grid-template-columns: 1fr; } }
.fsc-tool--rpodb .fsc-rpodb__results { margin-top: 1.5rem; }
.fsc-tool--rpodb .fsc-rpodb__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fsc-tool--rpodb .fsc-rpodb__table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; padding: .5rem .6rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.fsc-tool--rpodb .fsc-rpodb__table td { padding: .55rem .6rem; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; }
.fsc-tool--rpodb .fsc-rpodb__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; white-space: nowrap; }
.fsc-tool--rpodb .fsc-rpodb__yr { white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .8; }
.fsc-tool--rpodb .fsc-rpodb__table .fsc-muted { display: block; font-size: .8rem; opacity: .55; }
.fsc-tool--rpodb .fsc-rpodb__az { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0; }
.fsc-tool--rpodb .fsc-rpodb__azlink { display: inline-block; min-width: 2rem; text-align: center; padding: .35rem .5rem; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; font-size: .85rem; text-decoration: none; opacity: .8; }
.fsc-tool--rpodb .fsc-rpodb__azlink:hover { background: rgba(255,255,255,.08); opacity: 1; }
.fsc-tool--rpodb .fsc-rpodb__azlink.is-on { background: rgba(255,255,255,.14); opacity: 1; font-weight: 700; }
.fsc-tool--mpg .fsc-mpg__feed { margin: 2rem 0; }
.fsc-tool--mpg .fsc-mpg__feed h2 { margin-bottom: .25rem; }

/* ---------------------------------------------------------------------------
   Ad slots
   Height is reserved before the unit loads. Without it the page reflows when
   the ad arrives, which on a tool page means the result list jumps under the
   reader's finger - the exact reason this section was pulled out of Auto ads.
--------------------------------------------------------------------------- */
.fsc-tool .fsc-ad { margin: 2.5rem 0; min-height: 280px; }
.fsc-tool .fsc-ad--lower { min-height: 250px; }
/* opacity:.45 composited to #716e67 on the dark panel - 4.12:1, under the 4.5
   that SC 1.4.3 requires for text. An explicit muted colour reaches 7.9:1 and
   does not depend on what is painted behind it. */
.fsc-tool .fsc-ad .adsbygoogle { display: block; width: 100%; }
@media (max-width: 600px) { .fsc-tool .fsc-ad { min-height: 250px; margin: 2rem 0; } }

.fsc-tool--rpopage .fsc-rpodb__table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1rem 0 2rem; }
.fsc-tool--rpopage .fsc-rpodb__table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; padding: .5rem .6rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.fsc-tool--rpopage .fsc-rpodb__table td { padding: .6rem; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; }
.fsc-tool--rpopage .fsc-rpodb__table .fsc-muted { display: block; font-size: .78rem; opacity: .55; margin-top: .2rem; }

/* --- RPO database: server-rendered pagination (2.11.11) --- */
.fsc-rpodb__pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:18px 0 4px}
.fsc-rpodb__pagelink{display:inline-block;padding:8px 12px;border:1px solid #333;border-radius:6px;
  font-weight:700;font-size:14px;line-height:1.2;text-decoration:none;color:inherit}
a.fsc-rpodb__pagelink:hover,a.fsc-rpodb__pagelink:focus-visible{border-color:#099dd7;color:#099dd7}
.fsc-rpodb__pagelink.is-on{background:#c14924;border-color:#c14924;color:#fff}
.fsc-rpodb__pagegap{padding:0 2px;opacity:.6}
@media(max-width:480px){.fsc-rpodb__pagelink{padding:7px 10px;font-size:13px}}

/* --- Tool page trust signals: breadcrumb + byline/updated (2.11.14) --- */
.fsc-crumbs{font-size:13.5px;line-height:1.4;margin:0 0 6px;opacity:.85}
.fsc-crumbs a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.fsc-crumbs a:hover,.fsc-crumbs a:focus-visible{color:#099dd7}
.fsc-crumbs__sep{padding:0 6px;opacity:.55}
.fsc-pagemeta{font-size:13.5px;margin:0 0 18px;opacity:.75}
.fsc-pagemeta strong{font-weight:700}

/* --- RPO / SPID explainer (2.11.14) --- */
.fsc-rpodef{margin:28px 0}
.fsc-rpodef h3{margin-top:18px}

/* --- Print: the decoder result is the point, everything else is furniture --- */
@media print{
  .fsc-crumbs,.fsc-ad,.fsc-rpodb__pager,.fsc-rpodb__az,
  #fsc-rpo .fsc-panel form,#fsc-rpo .fsc-tabs,
  [data-fsc="file"],[data-fsc="filters"],[data-fsc="ocrbar"],
  [data-fsc="copy"],[data-fsc="permalink"],[data-fsc="share"],[data-fsc="print"]{
    display:none!important;
  }
  #fsc-rpo,.fsc-tool{background:#fff!important;color:#000!important}
  #fsc-rpo a{color:#000!important;text-decoration:underline}
  .fsc-results,.fsc-forumblock{page-break-inside:avoid}
  .fsc-pagemeta{opacity:1}
}

/* ------------------------------------------------------------------ 2.11.50 */
/* Summary over citations.
   Measured live 2026-09-20: G80 alone rendered a 5,650px card (31 records at
   166px each) and a six-code decode produced a 23,464px page with both ad
   units past 89% depth. The records stay - they move behind a disclosure so
   the answer comes first. */

.fsc-tool .fsc-code__sum {
	margin: .75rem 0 .9rem;
	padding: .8rem 1rem;
	border-left: 3px solid var(--fsc-accent);
	background: var(--fsc-line-soft);
}

.fsc-tool .fsc-code__gist {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.45;
	color: var(--fsc-ink);
}

.fsc-tool .fsc-code__facts {
	margin: .35rem 0 0;
	font-size: .85rem;
	color: var(--fsc-muted);
}

.fsc-tool .fsc-more { margin: 0; }

.fsc-tool .fsc-more__sum {
	cursor: pointer;
	display: inline-block;
	padding: .45rem .1rem;
	font-size: .85rem;
	/* --fsc-muted is 7.9:1 on this background; the old .45 opacity on the ad
	   label measured 4.12:1 and was replaced in 2.11.49 for the same reason. */
	color: var(--fsc-muted);
	list-style: revert;
}

.fsc-tool .fsc-more__sum:hover { color: var(--fsc-ink); }
/* Keyboard operability is the whole reason this is <details> and not a
   scripted toggle, so the focus ring has to survive the theme. */

.fsc-tool .fsc-more__sum:focus-visible {
	outline: 2px solid var(--fsc-accent);
	outline-offset: 2px;
	color: var(--fsc-ink);
}

.fsc-tool .fsc-more__hide { display: none; }

.fsc-tool .fsc-more[open] .fsc-more__show { display: none; }

.fsc-tool .fsc-more[open] .fsc-more__hide { display: inline; }

.fsc-tool .fsc-more[open] > .fsc-more__sum { margin-bottom: .4rem; }

/* ---- Sticky right rail, wide screens only --------------------------------
   The tool sits in a 1240px theme container. A 300px unit plus its gutter
   needs ~324px of free space beside it, which only exists from about 1680px
   up - below that this whole block never applies and the page is exactly what
   it was. Negative margins widen the grid past the theme container without
   touching the theme; the tool column itself stays 1200px, so nothing inside
   it reflows.

   Right side only. Two rails would need ~1,850px of viewport, so the second
   unit would serve roughly half the audience of the first while diluting a
   page whose two-unit density is part of why it clears the RPM it does. */

.fsc-rail { display: none; }

@media (width >= 1680px) {
	.fsc-tool--rail {
		display: grid;
		grid-template-columns: 1200px 300px;
		column-gap: 24px;
		align-items: start;
		width: 1524px;
		max-width: 1524px;
		margin-left: calc((1240px - 1524px) / 2);
		margin-right: calc((1240px - 1524px) / 2);
	}

	.fsc-tool--rail > * {
		grid-column: 1;
		min-width: 0;
	}

	.fsc-tool--rail > .fsc-rail {
		display: block;
		grid-column: 2;
		/* Span every row so the sticky child has the full height of the results
		   to travel through - the point of the rail is that it is still on
		   screen 20,000px into a long decode. */
		grid-row: 1 / -1;
		align-self: stretch;
		height: 100%;
	}

	.fsc-rail .fsc-ad {
		position: sticky;
		/* Clear of the theme's sticky header. */
		top: 90px;
		margin: 0;
		min-height: 0;
	}

	/* stylelint-disable-next-line selector-class-pattern -- Google's own class. */
	.fsc-rail .fsc-ad .adsbygoogle {
		display: inline-block;
		width: 300px;
		height: 600px;
	}
}

/* A rail that scrolls with the page is a rail nobody sees, but a sticky
   element is also the thing motion-sensitive readers ask to be rid of. */
@media (prefers-reduced-motion: reduce) {
	.fsc-rail .fsc-ad { position: static; }
}

/* ---------------------------------------------- 2018+ certification-label QR
   Three rules. Everything else on this tab reuses the components the typed and
   photo tabs already use, so a code looks identical however it was entered.
   Tokens only - no literals. */
.fsc-qr__status { margin: .6rem 0; color: var(--fsc-muted); min-height: 1.2em; }
.fsc-qr__status--warn {
	/* Body colour, not the amber - amber on this background is a 3.8:1 fill
	   colour, not a text colour. The rule carries the warning. */
	color: inherit;
	border-left: 3px solid var(--fsc-warn);
	padding-left: .7rem;
}
.fsc-qr__facts { margin: .4rem 0 .9rem; }

/* ----------------------------------------- whole-read prefix correction */

/* Shown when the reader put one extra character on the front of every code
   and we removed it. Deliberately prominent: we are displaying something
   different from what the camera saw, so the owner has to be told. Emphasis
   on a left rule, never coloured body text. */
.fsc-prefixfix {
	border: 1px solid var(--fsc-color-border, #3a3a3a);
	border-left: 4px solid var(--fsc-color-action, #c14924);
	border-radius: 0 6px 6px 0;
	background: var(--fsc-color-surface-inset, #0c0c0c);
	padding: 16px 20px;
	margin: 0 0 24px;
}

.fsc-prefixfix h3 { margin: 0 0 8px; font-size: 1.05rem; }
.fsc-prefixfix p { margin: 0 0 8px; }
.fsc-prefixfix p:last-child { margin-bottom: 0; }

.fsc-prefixfix__pairs {
	font-family: var(--fsc-font-mono, ui-monospace, monospace);
	line-height: 2;
}

.fsc-prefixfix code {
	padding: 1px 5px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.07);
}