/*  Foundational Values and the tools that teach it (FVF-PRODUCTS-PLAN.md):
 *  the chip "Character · Pure" on the product side, the "Taught in" rows in
 *  an attribute card, the tiles on /values and the band under a value. Each
 *  door's colour arrives as --av-door; everything else is Bootstrap's
 *  variables, so dark mode follows.
 */
.av-fvchip { display: inline-flex; align-items: center; gap: .3em; font-size: .8rem; line-height: 1.2; border: 1px solid var(--bs-secondary-border-subtle, var(--bs-border-color)); border-radius: .3rem; padding: .15em .5em; color: var(--bs-body-color); background: var(--bs-body-bg); text-decoration: none; white-space: nowrap; }
a.av-fvchip:hover { border-color: var(--bs-success); color: var(--bs-success); }
.av-fvchip .av-fvchip-v { color: var(--bs-secondary-color); }
.av-fvchip svg { flex-shrink: 0; }

/* The strip's "taught in" pill reads as a door, not a count. */
.av-fvc-strip .av-fvc-taught { border-style: dashed; }

/* One product in the Taught in pane */
.av-fvt { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.av-fvt + .av-fvt { border-top: 1px solid var(--bs-border-color); padding-top: .75rem; margin-top: .75rem; }
.av-fvt-emblem { width: 44px; height: auto; border-radius: .25rem; }
.av-fvt-ring { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--av-door, var(--bs-secondary)); color: #fff; }
.av-fvt-body { min-width: 0; }
.av-fvt-kicker { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--av-door, var(--bs-secondary-color)); }
.av-fvt-title { font-weight: 600; font-size: 1.05rem; }
.av-fvt-line { margin-top: .15rem; }
.av-fvt-go { border-color: var(--av-door, var(--bs-secondary)); color: var(--av-door, var(--bs-secondary)); }
.av-fvt-go:hover { background: var(--av-door, var(--bs-secondary)); border-color: var(--av-door, var(--bs-secondary)); color: #fff; }
.av-fvt-trail { border-top: 1px dashed var(--bs-border-color); margin-top: .75rem; padding-top: .6rem; }
.av-fvt-readings { font-size: .85rem; font-variant-numeric: tabular-nums; margin: .3rem 0; }
.av-fvt-readings td { padding: .1rem .9rem .1rem 0; vertical-align: middle; }
.av-fvt-words { font-style: italic; margin: .3rem 0; }
.av-fvt-stmt { font-size: .95rem; }

/* The tiles on /values */
.av-fv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 1.5rem; }
.av-fv-tile { background: var(--wp-surface, var(--bs-body-bg)); border: 1px solid var(--wp-border, var(--bs-border-color)); border-left: 4px solid var(--av-door, var(--bs-secondary)); border-radius: 8px; padding: 14px 16px; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: .3rem; }
.av-fv-tile.soon { opacity: .8; border-left-style: dashed; }
.av-fv-soon { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp-muted, var(--bs-secondary-color)); }
.av-fv-tile-name { font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: .35rem; color: var(--av-door, inherit); }
.av-fv-tile-n { font-size: .85rem; font-variant-numeric: tabular-nums; }
.av-fv-tile-line { font-size: .88rem; color: var(--wp-muted, var(--bs-secondary-color)); margin: 0; }
.av-fv-tile-go { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--av-door, inherit); text-decoration: none; }
.av-fv-tile-go:hover { text-decoration: underline; }
.av-fv-door p { max-width: 640px; margin-inline: auto; }

/* The band under one value's attributes */
.av-fv-band { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .88rem; margin-top: 1rem; padding: .6rem .8rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; background: var(--bs-tertiary-bg); }
.av-fv-band-lbl { color: var(--bs-secondary-color); }
.av-fv-band-item { display: inline-flex; align-items: center; gap: .3em; border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .1em .6em; text-decoration: none; color: var(--bs-body-color); background: var(--bs-body-bg); }
.av-fv-band-item small { color: var(--bs-secondary-color); }
.av-fv-band-item.soon { border-style: dashed; color: var(--bs-secondary-color); }
a.av-fv-band-item:hover { border-color: var(--bs-success); }

/* On a topic card on a shelf */
.wk-fv { margin: .25rem 0 .5rem; }

/* Dark mode: a door's colour is picked for cream paper (Straight Path's navy
 * vanishes on a dark card), so everything that reads in that colour is lifted
 * toward white; the ring and the hover fill keep the true colour. */
[data-bs-theme="dark"] .av-fvt-kicker,
[data-bs-theme="dark"] .av-fvt-go,
[data-bs-theme="dark"] .av-fv-tile-name,
[data-bs-theme="dark"] .av-fv-tile-go { color: color-mix(in srgb, var(--av-door, var(--bs-secondary-color)) 45%, #fff); }
[data-bs-theme="dark"] .av-fvt-go { border-color: color-mix(in srgb, var(--av-door, var(--bs-secondary)) 45%, #fff); }
[data-bs-theme="dark"] .av-fvt-go:hover { color: #fff; }
[data-bs-theme="dark"] .av-fvt-ring { outline: 1px solid color-mix(in srgb, var(--av-door, var(--bs-secondary)) 45%, #fff); }

/* The Foundational Values icon (anvoy-fv-icon.php, WALKBOOK-PLAN D12): the
   twelve values as a 4 x 3 grid, the value's square filled. */
.av-fvi { display: inline-flex; line-height: 0; vertical-align: -.15em; }
.av-fvi svg { height: 1.15em; width: auto; display: block; }
.av-fvi.lg svg { height: 2.4em; }