/* Every class carries the elementa- prefix and every rule is scoped under .elementa (the table and element pages)
   or body.elementa-page (the plugin's own page template). Each selector therefore has at least two classes, so a
   theme or page-builder reset such as ".sv-page *{margin:0;padding:0}" (one class) can never outrank it. */
.elementa-page,.elementa{--bg:#0f1318;--panel:#161b22;--ink:#e9edf2;--muted:#8b95a3;--line:#2a313b;--glow:1;--dimop:.14;--btn:#1e252e;}
.elementa,.elementa *,.elementa *::before,.elementa *::after,.elementa-page *{box-sizing:border-box}
body.elementa-page{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:"Saira",system-ui,"Segoe UI",Arial,sans-serif}
.elementa{display:block;width:100%;max-width:100%;margin:0;padding:0;color:var(--ink);font-family:"Saira",system-ui,"Segoe UI",Arial,sans-serif;font-size:1rem;line-height:1.5;text-align:left}
/* When the table is placed by shortcode inside another theme's page, this holds the "Space under a fixed top bar" setting. */
.elementa.elementa-embedded{padding-top:var(--elementa-top,0px)}
/* Undo theme button styling. Two classes plus the tag outrank a theme's ".page button" or ".page button:hover". */
.elementa .elementa-grid button,.elementa .elementa-mfoot button,.elementa .elementa-grid button:hover,.elementa .elementa-mfoot button:hover,.elementa .elementa-grid button:focus,.elementa .elementa-mfoot button:focus{font:inherit;color:inherit;cursor:pointer;background:transparent;border:0;box-shadow:none;text-transform:none;letter-spacing:normal;margin:0;font-weight:inherit;line-height:normal;min-height:0;min-width:0;height:auto;text-decoration:none;border-radius:0;text-align:inherit;transform:none;transition:none}
.elementa :focus-visible,.elementa-page :focus-visible{outline:2px solid #7c9cff;outline-offset:2px}

/* ---------- Table ---------- */
.elementa .elementa-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;width:100%;max-width:1560px;margin:0 auto;padding:1.2rem 1.25rem .6rem}
.elementa .elementa-top h1{margin:0;padding:0;font-weight:600;font-size:clamp(1.4rem,2.6vw,2.2rem);letter-spacing:.01em;line-height:1.5;color:var(--ink);font-family:inherit;text-transform:none;text-align:left;text-shadow:none}
.elementa .elementa-top p{margin:.2rem 0 0;padding:0;color:var(--muted);font-size:1rem;text-align:left}
.elementa .elementa-scroller{overflow-x:auto;width:100%;max-width:100%;margin:0;padding:0 1.25rem 2rem}
.elementa .elementa-board{container-type:inline-size;min-width:1080px;max-width:1560px;margin:0 auto;padding:0}
.elementa .elementa-grid{display:grid;grid-template-columns:repeat(18,1fr);gap:.45cqw;position:relative;margin:0;padding:0}
.elementa button.elementa-cell,.elementa button.elementa-cell:hover,.elementa button.elementa-cell:focus{--c:#888;--tc:var(--c);aspect-ratio:1;align-self:start;width:100%;min-height:0;min-width:0;overflow:hidden;border:max(1.5px,.12cqw) solid var(--c);background:transparent;margin:0;padding:.55cqw .3cqw .3cqw;display:grid;grid-template-rows:auto 1.5cqw 0.7cqw;align-content:center;justify-items:center;text-align:center;position:relative;color:var(--tc);transition:opacity .25s,transform .15s,box-shadow .15s;border-radius:1px}
.elementa button.elementa-cell:hover{transform:scale(1.06);z-index:2;box-shadow:0 0 calc(1.2cqw*var(--glow)) color-mix(in srgb,var(--c) 45%,transparent)}
.elementa .elementa-n{position:absolute;top:.2cqw;left:.3cqw;font-size:.62cqw;line-height:1}
.elementa .elementa-s{font-size:2.05cqw;line-height:1;font-weight:500;text-shadow:0 0 calc(.9cqw*var(--glow)) color-mix(in srgb,var(--c) 70%,transparent)}
.elementa .elementa-nm{font-size:.64cqw;line-height:1.1;margin-top:.15cqw;align-self:center;hyphens:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;overflow-wrap:break-word}
.elementa .elementa-nm.elementa-long{font-size:.54cqw;hyphens:manual}
.elementa .elementa-t{font-size:.56cqw;opacity:.85;align-self:end;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.elementa button.elementa-cell.elementa-ph{font-size:1.1cqw;display:flex;align-items:center;justify-content:center;padding:0}
.elementa .elementa-grid.elementa-focus .elementa-cell:not(.elementa-on){opacity:var(--dimop)}
.elementa .elementa-legend{grid-column:3/18;grid-row:1;align-self:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3cqw 1.4cqw;margin:0;padding:0 1cqw}
.elementa .elementa-legend button{background:none;border:0;margin:0;padding:.2cqw .3cqw;font-size:.92cqw;color:var(--c)}
.elementa .elementa-legend button.elementa-act{text-decoration:underline;text-underline-offset:.3em}
.elementa .elementa-gap{grid-column:1/-1;height:2.2cqw}
.elementa .elementa-connector{position:absolute;border-left:1px solid var(--line);border-bottom:1px solid var(--line);pointer-events:none}

/* ---------- Popup ---------- */
.elementa .elementa-overlay{position:fixed;inset:0;margin:0;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100000;overflow:auto;color:var(--ink)}
.elementa .elementa-modal{--c:#888;--tc:var(--c);width:min(440px,100%);margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;animation:elementa-pop .22s ease-out}
@keyframes elementa-pop{from{transform:scale(.9);opacity:0}}
.elementa .elementa-zoom{position:relative;aspect-ratio:1;width:100%;margin:0;padding:0;border:4px solid var(--c);background:var(--panel);color:var(--tc);box-shadow:0 0 calc(40px*var(--glow)) color-mix(in srgb,var(--c) 40%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.elementa .elementa-zoom svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.elementa .elementa-zoom .elementa-spin{transform-origin:50% 50%;animation:elementa-spin linear infinite}
@keyframes elementa-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.elementa .elementa-zoom .elementa-spin,.elementa .elementa-modal{animation:none}}
.elementa .elementa-zn{position:absolute;top:10px;left:14px;font-size:1.6rem}
.elementa .elementa-zt{position:absolute;top:12px;right:14px;font-size:.85rem;text-align:right;max-width:45%}
.elementa .elementa-zs{font-size:clamp(4rem,18vw,7rem);line-height:1;position:relative;text-shadow:0 0 calc(18px*var(--glow)) color-mix(in srgb,var(--c) 70%,transparent)}
.elementa .elementa-zname{font-size:1.5rem;position:relative;text-align:center;padding:0 .8rem}
.elementa .elementa-zc{position:absolute;bottom:12px;font-size:.95rem}
.elementa .elementa-info p{font-family:inherit;text-align:left;text-transform:none}
.elementa .elementa-info{background:var(--panel);border:4px solid var(--c);border-radius:0;margin:0;padding:1rem 1.1rem}
.elementa .elementa-sum{margin:0 0 .5rem;padding:0;font-weight:500;font-size:1.05rem}
.elementa .elementa-det{margin:0;padding:0;color:var(--muted);line-height:1.6}
.elementa .elementa-linkrow{display:flex;align-items:center;gap:.6rem;margin:.9rem 0 0;padding:0;flex-wrap:wrap}
.elementa .elementa-linkbtn{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--c);color:var(--tc);background:transparent;border-radius:6px;margin:0;padding:.4rem .75rem;text-decoration:none}
.elementa .elementa-linkbtn[aria-disabled="true"]{opacity:.45;cursor:default}
.elementa .elementa-readmore{display:inline-flex;align-items:center;gap:.45rem;background:var(--c);color:#0d1117;border-radius:6px;margin:0;padding:.4rem .8rem;text-decoration:none;font-weight:600}
.elementa .elementa-readmore svg,.elementa .elementa-linkbtn svg{width:18px;height:18px;flex:none}
.elementa .elementa-readmore span{white-space:nowrap}
.elementa .elementa-mfoot{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0;padding:0}
.elementa .elementa-mfoot button{width:100%}
.elementa button.elementa-ghost,.elementa button.elementa-ghost:hover,.elementa button.elementa-ghost:focus{background:var(--btn);border:1px solid var(--line);border-radius:6px;margin:0;padding:.45rem .9rem;color:var(--ink)}

/* ---------- The plugin's own page template (table page and element pages) ---------- */
body.elementa-page{padding-top:calc(env(safe-area-inset-top,0px) + var(--elementa-top,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
.elementa-page .elementa-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1560px;margin:0 auto;padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.elementa-page .elementa-nav .elementa-brand{color:var(--ink);text-decoration:none;font-weight:600;font-size:1.25rem;letter-spacing:.02em}
.elementa-page .elementa-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.3rem}
.elementa-page .elementa-nav a{color:var(--muted);text-decoration:none}
.elementa-page .elementa-nav a:hover{color:var(--ink)}
.elementa-page .elementa-foot{max-width:1560px;margin:2rem auto 0;padding:1.2rem 1.25rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
.elementa-page .elementa-foot a{color:var(--muted)}
.elementa-page .elementa-foot a:hover{color:var(--ink)}
.elementa .elementa-fallback,.elementa-page .elementa-fallback{display:none}
.elementa-page .elementa-main{min-height:60vh}

/* ---------- Element page ---------- */
.elementa.elementa-single{--tc:var(--c);max-width:900px;margin:0 auto;padding:1rem 1.25rem 2rem}
.elementa .elementa-back{margin:0;padding:0}
.elementa .elementa-back a{color:var(--muted);text-decoration:none}
.elementa .elementa-back a:hover{color:var(--ink)}
.elementa .elementa-hero{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:2rem;align-items:center;margin:1rem 0 2rem;padding:0}
@media (max-width:700px){.elementa .elementa-hero{grid-template-columns:1fr}}
.elementa.elementa-single .elementa-zoom{width:100%}
.elementa.elementa-single .elementa-zs{font-size:clamp(4rem,12vw,6rem)}
.elementa .elementa-intro h1{margin:0 0 .5rem;padding:0;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:600;color:var(--tc);text-align:left;text-transform:none;letter-spacing:.01em;line-height:1.5;font-family:inherit}
.elementa .elementa-intro .elementa-sum{font-size:1.15rem;margin:0 0 1rem}
.elementa.elementa-single .elementa-linkbtn{display:inline-flex;border:1px solid var(--c);color:var(--tc);border-radius:6px;padding:.4rem .8rem;text-decoration:none}
.elementa .elementa-article{font-size:1.05rem;line-height:1.75;max-width:70ch}
.elementa .elementa-article a{color:var(--tc)}
.elementa .elementa-pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0 0;padding:0}
.elementa .elementa-pn a{display:flex;flex-direction:column;gap:.2rem;border:1px solid var(--line);border-radius:6px;padding:.8rem 1rem;color:var(--ink);text-decoration:none}
.elementa .elementa-pn a:last-child{text-align:right}
.elementa .elementa-pn a:hover{border-color:var(--c)}
.elementa .elementa-pn span{color:var(--muted);font-size:.85rem}
