/*
 * FitnessVolt Calculators: the result-section v2 additions (docs/strategy/result-section-v2.md,
 * owner 2026-10-07) on top of fv-calc-engine's fce- card. Loads after fvce-core and only on posts
 * that carry a module shortcode. Every rule is under .fvcalc-app, so nothing else on the page, and
 * no fce- page elsewhere (RunningOS), changes.
 *
 * Light only. No gradients (the scale is a chart, its fills are solid). No coloured side or top
 * strips. On phones the tiles become rows: no box inside the card.
 */

/* The card: one hairline of depth (rule 7). */
.fvcalc-app .fvcalc-result { box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }

/* 1. The answer is the hero. */
.fvcalc-app .fvcalc-hero { margin: 2px 0 0; }
.fvcalc-app .fvcalc-hero__answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0; }
.fvcalc-app .fvcalc-hero__num { color: var(--fce-accent); font-family: var(--fce-head); font-size: 62px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fvcalc-app .fvcalc-hero__unit { color: var(--fce-ink); font-family: var(--fce-head); font-size: 21px; font-weight: 700; line-height: 1.2; }
.fvcalc-app .fvcalc-hero__meaning { max-width: 660px; margin: 10px 0 0; color: var(--fce-text-2); font-size: 15px; line-height: 1.55; }
.fvcalc-app .fvcalc-hero + .fce-result__reason { margin-top: 10px; }
/* An answer that is a word (a build name), not a number: smaller, so two words fit on one line. */
.fvcalc-app .fvcalc-hero__num--word { font-size: 42px; line-height: 1.1; letter-spacing: -.01em; }

/*
 * Choice buttons (the core's fce-seg) wrap inside the card at any width. The core shares a row
 * equally and never wraps, so a long label was cut ("12-13.9 m") and a row of them ran past the
 * card on phones. Here each button is at least as wide as its words (or the whole row, when the
 * words are longer than the row and wrap inside it), buttons that do not fit move to a second
 * line, and a row whose labels fit looks exactly as before. Not the 4-up grid variant.
 */
.fvcalc-app .fce-seg:not(.fce-seg--4) { flex-wrap: wrap; }
.fvcalc-app .fce-seg:not(.fce-seg--4) > .fce-seg__opt { min-width: fit-content; white-space: normal; }

/* 3 and 4. Stat tiles with an icon in a light red circle. */
.fvcalc-app .fvcalc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 20px 0 0; }
.fvcalc-app .fvcalc-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 16px 18px; background: #f8fafb; border: 1px solid #e6e9ed; border-radius: 12px; }
.fvcalc-app .fvcalc-icon { display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; color: #c41230; background: rgba(196, 18, 48, .08); border-radius: 50%; }
.fvcalc-app .fvcalc-icon svg { display: block; width: 20px; height: 20px; }
/* A tile picture (line art) fills the slot: no circle behind it. */
.fvcalc-app .fvcalc-icon--img { background: none; border-radius: 0; }
.fvcalc-app .fvcalc-icon--img img { display: block; width: 36px; height: 36px; }
.fvcalc-app .fvcalc-tile__body { min-width: 0; }
.fvcalc-app .fvcalc-tile__label { margin: 0; color: var(--fce-muted-2); font-family: var(--fce-head); font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; }
.fvcalc-app .fvcalc-tile__value { margin: 4px 0 0; color: var(--fce-ink); font-family: var(--fce-head); font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fvcalc-app .fvcalc-tile__note { margin: 6px 0 0; color: var(--fce-muted-2); font-size: 13px; line-height: 1.45; }

/* 2. The scale: a 10px track, the guideline band, reference ticks, the reader's marker. */
.fvcalc-app .fvcalc-scale { position: relative; margin: 26px 0 0; padding-top: 24px; }
.fvcalc-app .fvcalc-scale__you { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); color: var(--fce-accent); font-family: var(--fce-head); font-size: 14px; font-weight: 800; line-height: 1; white-space: nowrap; }
.fvcalc-app .fvcalc-scale__track { position: relative; height: 10px; background: #f1f3f5; border-radius: 999px; }
/* Zones on the scale: stepped solid tints of the one accent, white hairlines between them, the reader's zone in full red. */
.fvcalc-app .fvcalc-scale__zone { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); background: rgba(196, 18, 48, .1); box-shadow: inset -2px 0 0 #fff; }
.fvcalc-app .fvcalc-scale__zone--1 { border-radius: 999px 0 0 999px; }
.fvcalc-app .fvcalc-scale__zone--2 { background: rgba(196, 18, 48, .18); }
.fvcalc-app .fvcalc-scale__zone--3 { background: rgba(196, 18, 48, .28); }
.fvcalc-app .fvcalc-scale__zone--4 { background: rgba(196, 18, 48, .4); }
.fvcalc-app .fvcalc-scale__zone--5 { background: rgba(196, 18, 48, .54); border-radius: 0 999px 999px 0; box-shadow: none; }
.fvcalc-app .fvcalc-scale__zone.is-on { background: #c41230; }
.fvcalc-app .fvcalc-scale__band { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); background: rgba(196, 18, 48, .2); border-radius: 999px; }
/* Solid category bands (a category scale): green for the pass state, brand red lighter to darker. */
.fvcalc-app .fvcalc-scale__segs { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; border-radius: 999px; }
.fvcalc-app .fvcalc-scale__seg { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); background: #e6e9ed; }
.fvcalc-app .fvcalc-scale__seg--pass { background: rgba(21, 128, 61, .32); }
.fvcalc-app .fvcalc-scale__seg--1 { background: rgba(196, 18, 48, .14); }
.fvcalc-app .fvcalc-scale__seg--2 { background: rgba(196, 18, 48, .28); }
.fvcalc-app .fvcalc-scale__seg--3 { background: rgba(196, 18, 48, .44); }
.fvcalc-app .fvcalc-scale__seg--4 { background: rgba(196, 18, 48, .62); }
.fvcalc-app .fvcalc-scale__tick { position: absolute; top: -3px; bottom: -3px; left: var(--x); width: 2px; margin-left: -1px; background: #8a919c; border-radius: 1px; }
.fvcalc-app .fvcalc-scale__dot { position: absolute; top: 50%; left: var(--x); width: 18px; height: 18px; margin: -9px 0 0 -9px; background: #c41230; border: 3px solid #fff; border-radius: 50%; }
.fvcalc-app .fvcalc-scale__labels { position: relative; height: 18px; margin-top: 8px; color: var(--fce-muted-2); font-size: 12px; line-height: 18px; }
.fvcalc-app .fvcalc-scale__labels span { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fvcalc-app .fvcalc-scale__caption { margin: 10px 0 0; color: var(--fce-muted-2); font-size: 13px; line-height: 1.45; }
.fvcalc-app .fvcalc-scale + .fce-rt, .fvcalc-app .fvcalc-scale__caption + .fce-rt { margin-top: 16px; }

/* 5. Mini bars under a row's number. */
.fvcalc-app .fvcalc-bar { display: block; width: 72px; height: 4px; margin: 6px 0 0 auto; overflow: hidden; background: #f1f3f5; border-radius: 999px; }
.fvcalc-app .fvcalc-bar > span { display: block; width: var(--w); height: 100%; background: #c41230; border-radius: 999px; opacity: .85; }

/* 8. Links in brand red, underlined on hover; tiles and table rows tint on hover (desktop pointers). */
.fvcalc-app .fvcalc-result a { color: var(--fce-accent); text-decoration: none; background-image: none; border-bottom: 0; box-shadow: none; }
.fvcalc-app .fvcalc-result a:hover, .fvcalc-app .fvcalc-result a:focus-visible { color: var(--fce-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.fvcalc-app .fvcalc-result .fce-rt td b { font-weight: 800; }
.fvcalc-app .fvcalc-result .fce-rt .fce-num { white-space: nowrap; }
@media (hover: hover) and (min-width: 768px) {
    .fvcalc-app .fvcalc-tile:hover { background: #f4f6f8; }
    .fvcalc-app .fvcalc-result .fce-rt tbody tr:hover { background: #f4f6f8; }
}

/* 6. Motion: the card rises 8px over 200ms when it appears (the count-up is in fvcalc.js). */
@keyframes fvcalc-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.fvcalc-app .fvcalc-reveal { animation: fvcalc-rise .2s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .fvcalc-app .fvcalc-reveal { animation: none; }
}

/* Phones: a smaller hero, and the tiles become rows inside the card (no box in a box). */
@media (max-width: 767px) {
    .fvcalc-app .fvcalc-hero__num { font-size: 46px; }
    .fvcalc-app .fvcalc-hero__num--word { font-size: 32px; }
    .fvcalc-app .fvcalc-hero__unit { font-size: 17px; }
    .fvcalc-app .fvcalc-tiles { grid-template-columns: 1fr; gap: 0; margin-top: 16px; border-top: 1px solid #ececec; }
    .fvcalc-app .fvcalc-tile { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid #ececec; border-radius: 0; }
    .fvcalc-app .fvcalc-tile__body { display: contents; }
    .fvcalc-app .fvcalc-tile__label { grid-column: 2; grid-row: 1; color: var(--fce-heading); font-family: var(--fce-body); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
    .fvcalc-app .fvcalc-tile__value { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; font-size: 20px; text-align: right; white-space: nowrap; }
    .fvcalc-app .fvcalc-tile__note { grid-column: 2; grid-row: 2; margin: 2px 0 0; }
    .fvcalc-app .fvcalc-tile .fvcalc-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
    /* A stacked tile (opt in: tile `stack`) has a long value, so its note runs full width under it (reader pass, 2026-10-14). */
    .fvcalc-app .fvcalc-tile--stack .fvcalc-tile__value { grid-row: 1; }
    .fvcalc-app .fvcalc-tile--stack .fvcalc-tile__note { grid-column: 2 / -1; }
    .fvcalc-app .fvcalc-scale__labels { font-size: 11.5px; }
    .fvcalc-app .fvcalc-bar { width: 56px; }
}

/*
 * Picked rows: a list the reader builds (one row per chosen item, its own inputs on the right),
 * related links under a card. Rows are the core's fce-lrows lines (no box per
 * row); the panels below the card are flat, a 1px neutral line above each, never a box in a box.
 * A result table with four or more columns gets tighter cells.
 */
@media (min-width: 768px) {
    .fvcalc-app .fvcalc-tiles:has(> .fvcalc-tile:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fvcalc-app .fvcalc-picks { margin: 0; }
.fvcalc-app .fvcalc-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.fvcalc-app .fvcalc-pick__head { display: flex; flex: 1 1 220px; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.fvcalc-app .fvcalc-pick__head .fce-lrows__name { font-size: 16px; line-height: 1.35; }
.fvcalc-app .fvcalc-pick__head .fce-btn--link { min-height: 32px; padding: 4px 2px; font-size: 13px; }
.fvcalc-app .fvcalc-pick__in { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.fvcalc-app .fvcalc-pick__in .fce-seg__opt { min-height: 38px; padding: 6px 10px; font-size: 13.5px; }
.fvcalc-app .fvcalc-pick__in .fce-input-group--short { width: 132px; }
/* Menu calculators (lane rem-menu): a row's size select sits beside its number. */
.fvcalc-menu .fvcalc-pick__in { flex: 0 1 360px; flex-wrap: nowrap; }
.fvcalc-app.fvcalc-menu .fvcalc-pick__in .fce-input-group--short { flex: 0 0 96px; width: 96px; }
.fvcalc-app.fvcalc-menu .fvcalc-pick__in .fce-input { padding-right: 12px; padding-left: 12px; }
.fvcalc-app.fvcalc-menu .fvcalc-pick__in .fce-input-group:has(.fce-suffix) .fce-input { padding-right: 36px; }
.fvcalc-app.fvcalc-menu .fvcalc-pick__in .fce-input-group:has(.fvcalc-suffix--word) .fce-input { padding-right: 46px; }
.fvcalc-menu .fvcalc-pick__in .fce-select { width: auto; flex: 1 1 200px; min-width: 0; }
.fvcalc-app .fvcalc-picks__add { margin-top: 12px; }
/* At rest pace the week and burn-off inputs are hidden; with no "Add an activity" picker showing, the last activity row's line already closes the list, so Calculate drops its own. */
.fvcalc-app .fce-field:not(:has(.fvcalc-picks__add:not([hidden]))) + [data-fvcalc-extras][hidden] + .fce-actions { border-top: 0; padding-top: 0; }
.fvcalc-app .fvcalc-more { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--fce-line); }
.fvcalc-app .fvcalc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.fvcalc-app .fvcalc-links li { margin: 0; padding: 0; }
.fvcalc-app .fvcalc-links a { color: var(--fce-accent); font-size: 15px; font-weight: 600; text-decoration: none; }
.fvcalc-app .fvcalc-links a:hover, .fvcalc-app .fvcalc-links a:focus-visible { color: var(--fce-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.fvcalc-app .fvcalc-result .fce-rt:has(th:nth-child(4)) th + th, .fvcalc-app .fvcalc-result .fce-rt:has(th:nth-child(4)) td + td { padding-left: 12px; }
@media (max-width: 767px) {
    .fvcalc-app .fvcalc-pick__in { flex: 1 1 100%; }
    .fvcalc-app .fvcalc-pick__in .fce-seg { flex: 1 1 100%; }
    .fvcalc-app .fvcalc-pick__in .fce-input-group--short { width: 100%; max-width: none; }
    .fvcalc-app .fvcalc-result .fce-rt:has(th:nth-child(4)) { font-size: 13.5px; }
    .fvcalc-app .fvcalc-result .fce-rt:has(th:nth-child(4)) th + th, .fvcalc-app .fvcalc-result .fce-rt:has(th:nth-child(4)) td + td { padding-left: 8px; }
    .fvcalc-app .fvcalc-more { margin-top: 20px; padding-top: 14px; }
    /* A table whose value column holds words (opt in: table `words`) wraps them, so the first column keeps room (integration review, 2026-10-15). */
    .fvcalc-app .fvcalc-result .fce-rt--words .fce-num { white-space: normal; }
    .fvcalc-app .fvcalc-result .fce-rt--words .fce-rt__ev { width: 40%; }
}

/*
 * A searchable list to pick from: a status line, then result rows (the picked-row lines above,
 * each with an Add button) in a list that scrolls after about eight rows. A plain bold subheading
 * over a group of links, and a sources line. No box around any of it.
 */
.fvcalc-app .fvcalc-find__status { margin: 10px 0 0; color: var(--fce-muted-2); font-size: 13.5px; line-height: 1.5; }
.fvcalc-app .fvcalc-find__results { max-height: 26rem; margin-top: 8px; overflow-y: auto; overscroll-behavior: contain; }
.fvcalc-app .fvcalc-find__hit .fvcalc-pick__head { flex: 1 1 100%; align-items: center; }
.fvcalc-app .fvcalc-find__text { min-width: 0; }
.fvcalc-app .fvcalc-find__hit .fce-lrows__name { display: block; font-size: 15.5px; font-weight: 600; }
.fvcalc-app .fvcalc-find__hit .fce-lrows__note { font-size: 13px; }
.fvcalc-app .fvcalc-find__hit .fce-btn--outline { flex: 0 0 auto; min-height: 38px; padding: 6px 16px; }
.fvcalc-app .fvcalc-find__hit .fce-btn--outline:disabled { color: var(--fce-muted-2); border-color: var(--fce-line); cursor: default; }
.fvcalc-app .fvcalc-subhead { margin: 18px 0 2px; color: var(--fce-heading); font-family: var(--fce-head); font-size: 16px; font-weight: 700; line-height: 1.35; }
.fvcalc-app .fvcalc-subhead + .fce-help + .fvcalc-links { margin-top: 6px; }
.fvcalc-app .fvcalc-sources { margin-top: 18px; }
.fvcalc-app .fvcalc-sources a { color: var(--fce-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Print: no motion and no shadow on the sheet's copy of the card. */
@media print {
    .fvcalc-app .fvcalc-reveal { animation: none; }
    .fvcalc-app .fvcalc-result { box-shadow: none; }
}

/* Next step and sources inside the card (the core's fce-lrows link rows and fce-src-line, reused). */
.fvcalc-app .fvcalc-result .fvcalc-next { margin: 20px 0 0; }
.fvcalc-app .fvcalc-result .fce-result__method + .fce-src-line { margin-top: 4px; }