/* ===== Periodic Table Gizmo ===== */

/* 9 element-family colors reuse the app's validated 8-hue categorical order
   (same hues/steps, relabeled) plus one added hue for actinide — chemistry's
   9 standard families don't fold cleanly into fewer categories the way a
   data chart's series can. Every tile still carries its symbol as text, so
   identity never depends on color alone. Don't "fix" this by chasing an
   all-pairs-clean palette; it isn't achievable past ~4-8 categorical slots. */
:root, [data-theme="dark"] {
    --periodic-alkali-metal: #3987e5;      --periodic-alkali-metal-text: #111111;
    --periodic-alkaline-earth: #008300;    --periodic-alkaline-earth-text: #ffffff;
    --periodic-transition-metal: #d55181;  --periodic-transition-metal-text: #111111;
    --periodic-post-transition: #c98500;   --periodic-post-transition-text: #111111;
    --periodic-metalloid: #199e70;         --periodic-metalloid-text: #111111;
    --periodic-nonmetal: #d95926;          --periodic-nonmetal-text: #111111;
    --periodic-noble-gas: #9085e9;         --periodic-noble-gas-text: #111111;
    --periodic-lanthanide: #e66767;        --periodic-lanthanide-text: #111111;
    --periodic-actinide: #7a3030;          --periodic-actinide-text: #ffffff;
}
[data-theme="light"] {
    --periodic-alkali-metal: #2a78d6;      --periodic-alkali-metal-text: #ffffff;
    --periodic-alkaline-earth: #008300;    --periodic-alkaline-earth-text: #ffffff;
    --periodic-transition-metal: #e87ba4;  --periodic-transition-metal-text: #111111;
    --periodic-post-transition: #eda100;   --periodic-post-transition-text: #111111;
    --periodic-metalloid: #1baf7a;         --periodic-metalloid-text: #111111;
    --periodic-nonmetal: #eb6834;          --periodic-nonmetal-text: #111111;
    --periodic-noble-gas: #4a3aa7;         --periodic-noble-gas-text: #ffffff;
    --periodic-lanthanide: #e34948;        --periodic-lanthanide-text: #111111;
    --periodic-actinide: #a83030;          --periodic-actinide-text: #ffffff;
}


/* === Search === */
.periodic-full__search {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    margin: 0.75rem 0 1rem;
}
.periodic-full__search:focus { outline: none; border-color: var(--accent-primary); }

/* === Category legend / chips === */
.periodic-full__chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.periodic-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.periodic-chip::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip-color, var(--text-secondary));
    flex-shrink: 0;
}
.periodic-chip--alkali-metal { --chip-color: var(--periodic-alkali-metal); }
.periodic-chip--alkaline-earth { --chip-color: var(--periodic-alkaline-earth); }
.periodic-chip--transition-metal { --chip-color: var(--periodic-transition-metal); }
.periodic-chip--post-transition { --chip-color: var(--periodic-post-transition); }
.periodic-chip--metalloid { --chip-color: var(--periodic-metalloid); }
.periodic-chip--nonmetal { --chip-color: var(--periodic-nonmetal); }
.periodic-chip--noble-gas { --chip-color: var(--periodic-noble-gas); }
.periodic-chip--lanthanide { --chip-color: var(--periodic-lanthanide); }
.periodic-chip--actinide { --chip-color: var(--periodic-actinide); }
.periodic-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.periodic-chip--active { border-color: var(--chip-color, var(--accent-primary)); background: var(--bg-primary); font-weight: 700; }

.periodic-full__status { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 0.75rem; min-height: 1rem; }

/* === Detail panel === */
.periodic-detail { margin-bottom: 1rem; }
.periodic-detail__card {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}
.periodic-detail__symbol {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--tile-color);
    color: var(--tile-text);
    font-size: 2.25rem;
    font-weight: 800;
}
.periodic-detail__body { min-width: 0; flex: 1; }
.periodic-detail__body h2 { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.6rem; }
.periodic-detail__num { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.periodic-detail__stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.periodic-detail__stats span { font-size: 0.8125rem; color: var(--text-secondary); }
.periodic-detail__stats strong { display: block; font-size: 0.6875rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.4px; }

@media (max-width: 575px) {
    .periodic-detail__card { flex-direction: column; align-items: flex-start; }
}

/* === Table grid === */
.periodic-full__scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.periodic-full__table {
    display: grid;
    grid-template-columns: repeat(18, minmax(40px, 1fr));
    grid-template-rows: repeat(10, minmax(40px, auto));
    gap: 3px;
    min-width: 800px;
}

.periodic-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    background: var(--tile-color);
    color: var(--tile-text);
    cursor: pointer;
    padding: 0.15rem;
    font-family: inherit;
    transition: transform 0.1s, opacity 0.15s;
}
.periodic-tile:hover { transform: scale(1.08); z-index: 1; }
.periodic-tile__num { font-size: 0.5rem; opacity: 0.85; line-height: 1; }
.periodic-tile__symbol { font-size: 0.8125rem; font-weight: 800; line-height: 1.2; }
.periodic-tile--dim { opacity: 0.15; }

.periodic-tile--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 5px;
    font-size: 0.625rem;
    cursor: default;
}

.periodic-tile--alkali-metal { --tile-color: var(--periodic-alkali-metal); --tile-text: var(--periodic-alkali-metal-text); }
.periodic-tile--alkaline-earth { --tile-color: var(--periodic-alkaline-earth); --tile-text: var(--periodic-alkaline-earth-text); }
.periodic-tile--transition-metal { --tile-color: var(--periodic-transition-metal); --tile-text: var(--periodic-transition-metal-text); }
.periodic-tile--post-transition { --tile-color: var(--periodic-post-transition); --tile-text: var(--periodic-post-transition-text); }
.periodic-tile--metalloid { --tile-color: var(--periodic-metalloid); --tile-text: var(--periodic-metalloid-text); }
.periodic-tile--nonmetal { --tile-color: var(--periodic-nonmetal); --tile-text: var(--periodic-nonmetal-text); }
.periodic-tile--noble-gas { --tile-color: var(--periodic-noble-gas); --tile-text: var(--periodic-noble-gas-text); }
.periodic-tile--lanthanide { --tile-color: var(--periodic-lanthanide); --tile-text: var(--periodic-lanthanide-text); }
.periodic-tile--actinide { --tile-color: var(--periodic-actinide); --tile-text: var(--periodic-actinide-text); }

.periodic-full__disclaimer { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; text-align: center; margin-top: 0.75rem; }