/*
 * Title:   COPE advisory gauge
 * Project: Franz Valley Community Hub
 * Brief:   Compact header half-wheel with accessible advisory controls.
 * File:    site/plugins/franzvalley-community/assets/css/cope.css
 *
 * Copyright 2026 Nexus Logic Inc.
 * SPDX-License-Identifier: MIT
 */

.fv-cope { display: inline-block; position: relative; flex: 0 0 auto; line-height: 1.2; }
.fv-cope__toggle { box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 9px; border: 1px solid currentColor; border-radius: var(--fv-radius-sm); background: var(--fv-cope-color, #5a6260); color: var(--fv-cope-text, #fff); font: 600 1rem/1.2 var(--fv-font-sans); cursor: pointer; }
.fv-cope__label, .fv-cope__rating { display: none; }
.fv-cope[data-level="low"], .fv-cope__panel[data-level="low"] { --fv-cope-color: #28733d; --fv-cope-text: #fff; }
.fv-cope[data-level="moderate"], .fv-cope__panel[data-level="moderate"] { --fv-cope-color: #254a9a; --fv-cope-text: #fff; }
.fv-cope[data-level="high"], .fv-cope__panel[data-level="high"] { --fv-cope-color: #eadb24; --fv-cope-text: #182c24; }
.fv-cope[data-level="very-high"], .fv-cope__panel[data-level="very-high"] { --fv-cope-color: #d56a24; --fv-cope-text: #101c16; }
.fv-cope[data-level="extreme"], .fv-cope__panel[data-level="extreme"] { --fv-cope-color: #b82330; --fv-cope-text: #fff; }
.fv-cope__toggle:hover { background: var(--fv-cope-color, #5a6260); color: var(--fv-cope-text, #fff); box-shadow: inset 0 0 0 2px currentColor; }
.fv-cope__toggle:focus-visible { outline-color: var(--fv-copper-light); }
.fv-cope__flame { display: block; flex-shrink: 0; width: 24px; height: 24px; }
.fv-cope__rating { font-size: .75rem; font-weight: 500; }
.fv-cope--unverified .fv-cope__toggle::after { content: "!"; position: absolute; top: -6px; right: -6px; min-width: 18px; border-radius: 50%; background: #fff; color: #182c24; font-weight: 800; }
.fv-cope__gauge { display: block; align-self: center; width: min(100%, 260px); }
.fv-cope__gauge svg { display: block; width: 100%; height: auto; }
.fv-cope__panel { box-sizing: border-box; width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 1.5rem; border: 1px solid var(--fv-copper-light); border-radius: var(--fv-radius); background: var(--fv-evergreen); color: var(--fv-limestone); box-shadow: var(--fv-shadow-raised); font-size: .9375rem; line-height: 1.4; overflow-y: auto; overscroll-behavior: contain; }
.fv-cope__panel[open] { display: flex; flex-direction: column; gap: .75rem; }
#fv-cope-title:focus { outline: none; box-shadow: none; }
.fv-cope__panel::backdrop { background: rgb(0 0 0 / .65); }
html:has(.fv-cope__panel[open]) { overflow: hidden; }
.fv-cope__advisory { white-space: pre-wrap; padding: 1rem; background: var(--fv-tint-on-dark); border-left: 3px solid var(--fv-copper-light); }
.fv-cope__editor > label, .fv-cope__editor > span { display: block; margin-block: .75rem .4rem; }
.fv-cope__editor label { color: inherit; }
.fv-cope__editor > .fv-cope__settings { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .75rem; }
.fv-cope__field:first-child label { white-space: nowrap; }
.fv-cope__editor .fv-cope__field:first-child select { width: 0; min-width: 100%; }
.fv-cope__field { min-width: 0; display: flex; flex-direction: column; justify-content: end; gap: .4rem; }
.fv-cope__editor .fv-cope__field input, .fv-cope__editor .fv-cope__field select { min-width: 0; min-height: 48px; height: 48px; padding-inline: .4rem; font: inherit; }
.fv-cope__editor[hidden] { display: none; }
.fv-cope__banner { display: block; padding: .65rem 1rem; border-radius: var(--fv-radius); background: var(--fv-cope-color, #5a6260); color: var(--fv-cope-text, #fff); text-align: center; font-size: 1.35rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.fv-cope__actions { position: sticky; bottom: -1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 0; background: var(--fv-evergreen); border-top: 1px solid var(--fv-copper-light); }
.fv-cope__actions button { flex: 1; min-width: 64px; padding: .6rem .8rem; border: 1px solid var(--fv-on-dark-line); border-radius: var(--fv-radius-sm); background: transparent; color: var(--fv-limestone); font: 600 1rem/1.2 var(--fv-font-sans); cursor: pointer; }
.fv-cope__actions .fv-cope__save { background: var(--fv-copper-deep); color: var(--fv-paper); border-color: var(--fv-copper-light); }
.fv-cope__actions button:hover { background: var(--fv-tint-on-dark); }
.fv-cope__actions .fv-cope__save:hover { background: var(--fv-copper-darker); }
.fv-cope__actions button:focus-visible { outline-color: var(--fv-copper-light); }
.fv-cope__actions button:disabled { opacity: .65; cursor: wait; }
.fv-cope__editor input { box-sizing: border-box; width: 100%; min-height: 44px; font: inherit; background: var(--fv-limestone); color: var(--fv-evergreen); }
.fv-cope__editor textarea { box-sizing: border-box; width: 100%; resize: vertical; font: inherit; color: var(--fv-evergreen); background: var(--fv-limestone); }
.fv-cope__panel select, .fv-cope__panel button { min-height: 44px; }
.fv-cope__panel select { width: 100%; color: var(--fv-evergreen); background: var(--fv-limestone); }
.fv-cope__updated { font-size: .8125rem; }
.fv-cope__status:empty { display: none; }
@media (max-width: 1199px) {
	.fv-header-conditions { position: relative; }
	.fv-cope { position: static; }
}