/* ============================================================
   Periodic Table — Styles
   ============================================================ */

/* ── Colour palette ───────────────────────────────────────── */
:root {
  --pt-bg-dark:       #0f1117;
  --pt-bg-card:       #1a1d27;
  --pt-border:        #2c2f3e;
  --pt-text-primary:  #e8eaf6;
  --pt-text-muted:    #9094b0;
  --pt-radius:        8px;

  /* Category colours */
  --c-alkali-metal:    #e57373;
  --c-alkaline-earth:  #ffb74d;
  --c-transition:      #64b5f6;
  --c-post-transition: #81c784;
  --c-metalloid:       #4db6ac;
  --c-nonmetal:        #fff176;
  --c-halogen:         #ce93d8;
  --c-noble-gas:       #80deea;
  --c-lanthanide:      #f48fb1;
  --c-actinide:        #ffcc80;
}

/* ── Wrapper ─────────────────────────────────────────────── */
#pt-wrap {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--pt-bg-dark);
  color: var(--pt-text-primary);
  padding: 16px;
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Legend ──────────────────────────────────────────────── */
.pt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 14px;
}
.pt-leg {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  cursor: default;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: .3px;
  opacity: .9;
}
.pt-leg[data-cat="alkali-metal"]    { background: var(--c-alkali-metal);    color:#111; }
.pt-leg[data-cat="alkaline-earth"]  { background: var(--c-alkaline-earth);  color:#111; }
.pt-leg[data-cat="transition"]      { background: var(--c-transition);      color:#111; }
.pt-leg[data-cat="post-transition"] { background: var(--c-post-transition); color:#111; }
.pt-leg[data-cat="metalloid"]       { background: var(--c-metalloid);       color:#111; }
.pt-leg[data-cat="nonmetal"]        { background: var(--c-nonmetal);        color:#111; }
.pt-leg[data-cat="halogen"]         { background: var(--c-halogen);         color:#111; }
.pt-leg[data-cat="noble-gas"]       { background: var(--c-noble-gas);       color:#111; }
.pt-leg[data-cat="lanthanide"]      { background: var(--c-lanthanide);      color:#111; }
.pt-leg[data-cat="actinide"]        { background: var(--c-actinide);        color:#111; }

/* ── Grid ────────────────────────────────────────────────── */
.pt-table {
  display: grid;
  grid-template-columns: repeat(18, minmax(52px, 1fr));
  grid-template-rows: repeat(9, auto);
  gap: 3px;
  min-width: 960px;
}

/* ── Individual cell ──────────────────────────────────────── */
.pt-cell {
  position: relative;
  border-radius: 5px;
  padding: 4px 3px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: transform .12s, box-shadow .12s;
  border: 1px solid transparent;
  min-height: 58px;
}
.pt-cell:hover {
  transform: scale(1.12);
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
  border-color: rgba(255,255,255,.25);
}
.pt-cell:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.pt-empty       { background: transparent; cursor: default; border: none; }
.pt-empty:hover { transform: none; box-shadow: none; }

.pt-fblock-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--pt-text-muted);
}

/* Category bg */
.pt-cat-alkali-metal    { background: color-mix(in srgb, var(--c-alkali-metal) 22%,    #1a1d27); }
.pt-cat-alkaline-earth  { background: color-mix(in srgb, var(--c-alkaline-earth) 22%,  #1a1d27); }
.pt-cat-transition      { background: color-mix(in srgb, var(--c-transition) 22%,      #1a1d27); }
.pt-cat-post-transition { background: color-mix(in srgb, var(--c-post-transition) 22%, #1a1d27); }
.pt-cat-metalloid       { background: color-mix(in srgb, var(--c-metalloid) 22%,       #1a1d27); }
.pt-cat-nonmetal        { background: color-mix(in srgb, var(--c-nonmetal) 22%,        #1a1d27); }
.pt-cat-halogen         { background: color-mix(in srgb, var(--c-halogen) 22%,         #1a1d27); }
.pt-cat-noble-gas       { background: color-mix(in srgb, var(--c-noble-gas) 22%,       #1a1d27); }
.pt-cat-lanthanide      { background: color-mix(in srgb, var(--c-lanthanide) 22%,      #1a1d27); }
.pt-cat-actinide        { background: color-mix(in srgb, var(--c-actinide) 22%,        #1a1d27); }

/* Category text accent */
.pt-cell.pt-cat-alkali-metal    .pt-sym { color: var(--c-alkali-metal); }
.pt-cell.pt-cat-alkaline-earth  .pt-sym { color: var(--c-alkaline-earth); }
.pt-cell.pt-cat-transition      .pt-sym { color: var(--c-transition); }
.pt-cell.pt-cat-post-transition .pt-sym { color: var(--c-post-transition); }
.pt-cell.pt-cat-metalloid       .pt-sym { color: var(--c-metalloid); }
.pt-cell.pt-cat-nonmetal        .pt-sym { color: var(--c-nonmetal); }
.pt-cell.pt-cat-halogen         .pt-sym { color: var(--c-halogen); }
.pt-cell.pt-cat-noble-gas       .pt-sym { color: var(--c-noble-gas); }
.pt-cell.pt-cat-lanthanide      .pt-sym { color: var(--c-lanthanide); }
.pt-cell.pt-cat-actinide        .pt-sym { color: var(--c-actinide); }

/* Text inside cells */
.pt-z   { font-size: 9px;  color: var(--pt-text-muted); align-self: flex-start; line-height: 1; margin-bottom: 1px; }
.pt-sym { font-size: 18px; font-weight: 700; line-height: 1.1; }
.pt-nm  { font-size: 7.5px; color: var(--pt-text-muted); text-align: center; line-height: 1.2; margin-top: 1px; white-space: nowrap; overflow: hidden; max-width: 50px; text-overflow: ellipsis; }
.pt-ms  { font-size: 7px;  color: var(--pt-text-muted); margin-top: 1px; }

/* ── Modal ───────────────────────────────────────────────── */
.pt-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
.pt-modal.pt-modal-open { display: flex; }

.pt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
}

.pt-modal-box {
  position: relative;
  background: #1c1f2e;
  border: 1px solid var(--pt-border);
  border-radius: 14px;
  width: min(680px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 28px 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  animation: pt-pop .2s ease;
}

@keyframes pt-pop {
  from { opacity:0; transform: scale(.92) translateY(12px); }
  to   { opacity:1; transform: scale(1)  translateY(0); }
}

.pt-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: 1px solid var(--pt-border);
  color: var(--pt-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 7px;
  transition: background .15s, color .15s;
}
.pt-modal-close:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Modal header */
.pt-modal-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pt-border);
}
.pt-modal-number {
  font-size: 13px;
  color: var(--pt-text-muted);
  font-weight: 600;
  min-width: 28px;
  text-align: center;
}
.pt-modal-symbol {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  min-width: 64px;
  text-align: center;
}
/* Category colours for modal symbol */
.pt-modal-symbol.pt-cat-alkali-metal    { color: var(--c-alkali-metal); }
.pt-modal-symbol.pt-cat-alkaline-earth  { color: var(--c-alkaline-earth); }
.pt-modal-symbol.pt-cat-transition      { color: var(--c-transition); }
.pt-modal-symbol.pt-cat-post-transition { color: var(--c-post-transition); }
.pt-modal-symbol.pt-cat-metalloid       { color: var(--c-metalloid); }
.pt-modal-symbol.pt-cat-nonmetal        { color: var(--c-nonmetal); }
.pt-modal-symbol.pt-cat-halogen         { color: var(--c-halogen); }
.pt-modal-symbol.pt-cat-noble-gas       { color: var(--c-noble-gas); }
.pt-modal-symbol.pt-cat-lanthanide      { color: var(--c-lanthanide); }
.pt-modal-symbol.pt-cat-actinide        { color: var(--c-actinide); }

.pt-modal-names { flex: 1; }
.pt-modal-name  { font-size: 22px; font-weight: 700; line-height: 1.2; }
.pt-modal-latin { font-size: 13px; color: var(--pt-text-muted); margin-top: 2px; }
.pt-modal-mass  {
  font-size: 14px;
  color: var(--pt-text-muted);
  border: 1px solid var(--pt-border);
  border-radius: 8px;
  padding: 6px 12px;
  text-align: center;
  white-space: nowrap;
}
.pt-modal-mass::before { content: 'М = '; font-size: 11px; }

/* Modal body grid */
.pt-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.pt-info-block {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--pt-border);
  border-radius: 8px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pt-info-label {
  font-size: 10px;
  color: var(--pt-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.pt-info-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-text-primary);
}

/* Description */
.pt-modal-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: #b0b3c8;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--pt-border);
  border-radius: 8px;
  padding: 12px 14px;
}

/* ── Light theme ─────────────────────────────────────────── */
#pt-wrap.pt-theme-light {
  --pt-bg-dark:      #f4f6fb;
  --pt-bg-card:      #ffffff;
  --pt-border:       #dde1ee;
  --pt-text-primary: #1a1d2e;
  --pt-text-muted:   #6b7194;
  background: var(--pt-bg-dark);
  color: var(--pt-text-primary);
}
#pt-wrap.pt-theme-light .pt-cell        { background: #fff; }
#pt-wrap.pt-theme-light .pt-modal-box   { background: #fff; }
#pt-wrap.pt-theme-light .pt-modal-desc  { background: #f7f8fc; color: #444; }
#pt-wrap.pt-theme-light .pt-info-block  { background: #f7f8fc; }

#pt-wrap.pt-theme-light .pt-cat-alkali-metal    { background: color-mix(in srgb, var(--c-alkali-metal) 18%,    #fff); }
#pt-wrap.pt-theme-light .pt-cat-alkaline-earth  { background: color-mix(in srgb, var(--c-alkaline-earth) 18%,  #fff); }
#pt-wrap.pt-theme-light .pt-cat-transition      { background: color-mix(in srgb, var(--c-transition) 18%,      #fff); }
#pt-wrap.pt-theme-light .pt-cat-post-transition { background: color-mix(in srgb, var(--c-post-transition) 18%, #fff); }
#pt-wrap.pt-theme-light .pt-cat-metalloid       { background: color-mix(in srgb, var(--c-metalloid) 18%,       #fff); }
#pt-wrap.pt-theme-light .pt-cat-nonmetal        { background: color-mix(in srgb, var(--c-nonmetal) 18%,        #fff); }
#pt-wrap.pt-theme-light .pt-cat-halogen         { background: color-mix(in srgb, var(--c-halogen) 18%,         #fff); }
#pt-wrap.pt-theme-light .pt-cat-noble-gas       { background: color-mix(in srgb, var(--c-noble-gas) 18%,       #fff); }
#pt-wrap.pt-theme-light .pt-cat-lanthanide      { background: color-mix(in srgb, var(--c-lanthanide) 18%,      #fff); }
#pt-wrap.pt-theme-light .pt-cat-actinide        { background: color-mix(in srgb, var(--c-actinide) 18%,        #fff); }

/* ── Scrollbar ───────────────────────────────────────────── */
.pt-modal-box::-webkit-scrollbar { width: 6px; }
.pt-modal-box::-webkit-scrollbar-track { background: transparent; }
.pt-modal-box::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .pt-modal-grid { grid-template-columns: 1fr; }
  .pt-modal-box  { padding: 18px 14px 18px; }
  .pt-modal-symbol { font-size: 38px; }
  .pt-modal-name   { font-size: 17px; }
}