/* Shared dark theme. Color tokens live in palette.css. */

.super-sigil {
    --sigil-bg: var(--color-dark-bg);
    --sigil-elevated: var(--color-dark-elevated);
    --sigil-surface: var(--color-dark-panel);
    --sigil-ink: var(--color-dark-ink);
    --sigil-muted: var(--color-dark-muted);
    --sigil-gold: var(--color-dark-gold);
    --sigil-gold-bright: var(--color-dark-gold-bright);
    --sigil-gold-rgb: var(--color-dark-gold-rgb);
    --sigil-border: var(--color-dark-border);
    --sigil-hairline: var(--color-dark-hairline);
    --sigil-wild: var(--color-dark-wild);
    --sigil-wild-hover: var(--color-dark-wild-hover);
    --sigil-wild-soft: var(--color-dark-wild-soft);
    --sigil-ember: var(--color-dark-ember);
    max-width: 100%;
    color: var(--sigil-ink);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.super-sigil-empty { margin: 0; color: var(--sigil-muted); }

.super-sigil-sheet {
    background: var(--sigil-elevated);
    border: 1px solid var(--sigil-border);
    border-radius: 14px;
    padding: 1.15rem 1.25rem 1.2rem;
}

.super-sigil-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; }
.super-sigil-heading { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--sigil-ink); }
.super-sigil-lead { display: flex; align-items: baseline; gap: 0.4rem; margin: 0; color: var(--sigil-muted); font-size: 0.86rem; font-weight: 400; }
.super-sigil-lead span { color: var(--sigil-gold-bright); font-size: 1rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.super-sigil-metrics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.super-sigil-metric { box-sizing: border-box; flex: 0 0 8.25rem; width: 8.25rem; padding: 0.45rem 0.7rem; border-radius: 8px; background: var(--sigil-bg); border: 1px solid var(--sigil-border); min-width: 0; }
.super-sigil-metric-value { display: block; color: var(--sigil-ink); font-size: 1rem; font-weight: 400; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.super-sigil-metric-label { display: block; margin-top: 0.15rem; color: var(--sigil-muted); font-size: 0.75rem; line-height: 1.2; white-space: nowrap; }
.super-sigil-hint, .super-sigil-you, .super-sigil-error { margin: 0.45rem 0 0; color: var(--sigil-muted); font-size: 0.8rem; line-height: 1.4; font-weight: 400; }
.super-sigil-error { color: var(--sigil-ember); }
.super-sigil-form { margin-top: 0.8rem; }
.super-sigil-fields { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 8px; width: fit-content; max-width: 100%; }
.super-sigil-fields label { display: flex; flex: 0 0 auto; flex-direction: column; gap: 6px; width: auto; margin: 0; color: var(--sigil-muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.super-sigil-fields input { box-sizing: border-box; width: 4.75rem; max-width: 4.75rem; height: 34px; min-height: 34px; padding: 6px 10px; background: var(--sigil-bg); border: 1px solid var(--sigil-border); border-radius: 8px; color: var(--sigil-ink); font: inherit; font-size: 0.82rem; font-weight: 400; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; }
.super-sigil-fields input::-webkit-outer-spin-button,
.super-sigil-fields input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.super-sigil-fields input:focus { outline: none; border-color: var(--sigil-gold); box-shadow: 0 0 0 3px rgba(var(--sigil-gold-rgb), 0.18); }
.super-sigil-apply { appearance: none; box-sizing: border-box; flex: 0 0 auto; align-self: flex-end; width: auto; height: 34px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: var(--sigil-wild); color: var(--color-white); font: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; }
.super-sigil-apply:hover, .super-sigil-apply:focus { text-decoration: none; background: var(--sigil-wild-hover); color: var(--color-white); }
.super-sigil-chart { margin: 0; max-width: 100%; padding: 0.7rem 0.85rem 0.85rem; }
.super-sigil-you { margin: 0 0.35rem 0.55rem; }
.super-sigil-columns { container-type: inline-size; container-name: sigil-board; width: 100%; max-width: 100%; }
.super-sigil-grid { --sigil-rows: 26; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--sigil-rows), auto); grid-auto-columns: minmax(0, 1fr); column-gap: 0.85rem; width: 100%; }

@container sigil-board (max-width: 630px) {
    .super-sigil-grid { --sigil-rows: 33; }
}

@container sigil-board (max-width: 501px) {
    .super-sigil-grid { --sigil-rows: 44; }
}

.super-sigil-cell { appearance: none; display: grid; grid-template-columns: 2rem minmax(2.6rem, 1fr); width: 100%; min-height: 1.55rem; margin: 0; padding: 0 0.45rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--sigil-ink); font: inherit; font-size: 0.88rem; font-weight: 400; line-height: 1.55rem; text-align: left; white-space: nowrap; cursor: pointer; text-decoration: none; font-variant-numeric: tabular-nums; }
.super-sigil-cell:hover, .super-sigil-cell:focus { text-decoration: none; background: var(--sigil-hairline); }
.super-sigil-cell:focus, .super-sigil-cell:focus-visible { outline: none; }
.super-sigil-chart.is-partial .super-sigil-cell.is-selected,
.super-sigil-chart.is-partial .super-sigil-cell.is-selected:hover { background: var(--sigil-wild-soft); }
.super-sigil-chart.is-partial .super-sigil-cell.is-selected.is-col-start,
.super-sigil-chart.is-partial .super-sigil-cell:not(.is-selected) + .super-sigil-cell.is-selected {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.super-sigil-chart.is-partial .super-sigil-cell.is-selected.is-col-end,
.super-sigil-chart.is-partial .super-sigil-cell.is-selected:has(+ .super-sigil-cell:not(.is-selected)) {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.super-sigil-pos { color: var(--sigil-muted); background: transparent; font-weight: 400; }
.super-sigil-cell.is-start .super-sigil-pos,
.super-sigil-cell.is-current .super-sigil-pos { color: var(--sigil-gold-bright); }
.super-sigil-cell.is-end .super-sigil-pos { color: var(--sigil-wild); }
.super-sigil-qty { font-weight: 400; background: transparent; }
.super-sigil .is-25,
.super-sigil .is-50,
.super-sigil .is-75,
.super-sigil .is-125 { color: var(--color-epic); }
.super-sigil .is-250 { color: var(--sigil-ink); }
.super-sigil .is-500 { color: var(--color-legendary); }
.super-sigil .is-1000 { color: var(--color-mythic); }
.super-sigil .is-5000 { color: var(--color-vote-up); }
.super-sigil .is-other { color: var(--sigil-gold); }