/* Elementy właściwe płachtom. Wyłącznie tokeny cyklometru (lib/ui/src/style.css). */

.hint { color: var(--ivory-dim); font-size: .85rem; }
.panel table.indi { margin: 1rem 0; }
table.indi td.ground { color: var(--brass); }

/* nagłówki depesz */
.headers { max-height: 26rem; font-family: var(--tape); letter-spacing: .12em; }
.headers ol { list-style: none; margin: 0; padding: .4rem 0; }
.headers li { display: grid; grid-template-columns: 3.2rem 4.4rem 1fr; gap: .8rem; padding: .1rem .9rem; color: var(--ivory-dim); }
.headers li.fem { background: rgba(255, 189, 60, .07); color: var(--ivory); }
.headers .n { text-align: right; color: #5d6670; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.headers .g { color: var(--brass); }
.headers .gap { display: inline-block; width: .7em; }
.headers .hit { color: var(--filament); text-decoration: underline; text-underline-offset: 3px; }
#femstat { margin: 1rem 0 .2rem; }

/* płachta i stół */
.sheetwrap { max-width: 30rem; margin-top: 1rem; }
.sheetwrap canvas, .tablewrap canvas { width: 100%; height: auto; aspect-ratio: 1; display: block; cursor: crosshair; }
#why { margin-top: .8rem; }
.tablewrap { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
@media (min-width: 860px) { .tablewrap { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.tableside { display: grid; gap: .9rem; min-width: 0; }
.sheets .chip { min-width: 0; padding: .2rem .45rem; font-family: var(--tape); font-size: .8rem; color: #5d6670; }
.sheets .chip.used { border-color: var(--brass); color: var(--ivory); }
input[type="range"] { accent-color: var(--filament); width: 100%; }

svg.curve { width: 100%; height: auto; display: block; }
svg.curve text { font-family: var(--tape); font-size: 12px; fill: var(--ivory-dim); }
svg.curve .grid { stroke: #2f373f; }
svg.curve .line { stroke: var(--brass); fill: none; stroke-width: 1.5; }
svg.curve .dot { fill: var(--brass-dim); }
svg.curve .dot.now { fill: var(--filament); }

#results { max-height: 16rem; }
#results button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #2f373f; border-radius: 0; background: transparent; font-family: var(--tape); letter-spacing: .06em; color: var(--ivory); }
#results button:hover { background: var(--steel-dark); }

#key .line .val { font-family: var(--tape); font-size: 1.25rem; color: var(--filament); }
#key .verdict { margin-top: .2rem; }

a { color: var(--brass); text-underline-offset: 3px; }
a:hover { color: var(--filament); }