/*
 * Symbolism letter-card styles (scoped).
 * Historical note: this file previously used global selectors such as *, .grid,
 * .card and .modal. Because the SPA loads every page in one document, those
 * rules leaked into Quran, date, gematria and other tools. All component rules
 * are now deliberately limited to the Paleo-Hebrew / Phoenician pages.
 */
@font-face{font-family:'NotoPhoenician';src:url('../fonts/font_04.ttf') format('truetype');font-display:swap}
@font-face{font-family:'NotoHebrew';src:url('../fonts/font_05.ttf') format('truetype');font-display:swap}
@font-face{font-family:'NotoAramaic';src:url('../fonts/font_06.ttf') format('truetype');font-display:swap}

:is(#pagePaleo,#pagePhoenician) .grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  padding:2rem 1.5rem 1.5rem;max-width:900px;margin:0 auto
}
:is(#pagePaleo,#pagePhoenician) .card{
  box-sizing:border-box;background:var(--surface,var(--bg2));border:1px solid var(--border,var(--bdr));
  border-radius:8px;padding:1.2rem .8rem 1rem;text-align:center;cursor:pointer;
  transition:border-color .2s,transform .15s,box-shadow .2s;user-select:none;position:relative;direction:ltr
}
:is(#pagePaleo,#pagePhoenician) .card::before{
  content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(201,151,58,.06) 0%,transparent 70%);
  pointer-events:none;border-radius:8px
}
:is(#pagePaleo,#pagePhoenician) .card:hover{
  border-color:var(--gold-dim);transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.5)
}
:is(#pagePaleo,#pagePhoenician) .card-order{font-size:.62rem;color:var(--gold-dim);font-style:italic;margin-bottom:.35rem}
:is(#pagePaleo,#pagePhoenician) .card-proto{width:60px;height:60px;object-fit:contain;display:block;margin:0 auto .55rem;filter:invert(1) sepia(1) saturate(1.4) hue-rotate(5deg) brightness(.88);opacity:.85}
html[data-theme="light"] :is(#pagePaleo,#pagePhoenician) .card-proto{filter:none;opacity:.82}
:is(#pagePaleo,#pagePhoenician) .card-paleo{font-family:'NotoPhoenician',serif;font-size:3.2rem;color:var(--gold);line-height:1;display:block;margin-bottom:.6rem}
:is(#pagePaleo,#pagePhoenician) .card-name{font-size:1rem;color:var(--stone);font-style:italic}
:is(#pagePaleo,#pagePhoenician) .card-name-ar{font-family:'Amiri',serif;font-size:1rem;color:var(--ink-dim);direction:rtl;margin-bottom:.4rem}
:is(#pagePaleo,#pagePhoenician) .card-picture{font-size:.82rem;color:var(--ink-dim);margin-bottom:.2rem}
:is(#pagePaleo,#pagePhoenician) .card-picture-ar{font-family:'Amiri',serif;font-size:.88rem;color:var(--gold-dim);direction:rtl}
:is(#pagePaleo,#pagePhoenician) .card-divider{width:30px;height:1px;background:var(--border);margin:.4rem auto}
:is(#pagePaleo,#pagePhoenician) .card-meaning{font-size:.85rem;color:var(--stone);line-height:1.6}
:is(#pagePaleo,#pagePhoenician) .card-meaning-ar{font-family:'Amiri',serif;font-size:.9rem;color:var(--ink-dim);direction:rtl;line-height:1.6}

#pagePaleo .modal-bg{display:none;position:fixed;inset:0;background:var(--overlay,rgba(0,0,0,.72));z-index:500;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(3px)}
#pagePaleo .modal-bg.open{display:flex}
#pagePaleo .modal{box-sizing:border-box;background:var(--bg-card,var(--bg2));border:1px solid var(--gold-dim);border-radius:12px;max-width:580px;width:100%;max-height:90dvh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:paleoSlideUp .2s ease;direction:ltr}
@keyframes paleoSlideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
#pagePaleo .modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--ink-dim);font-size:1.4rem;cursor:pointer;line-height:1;padding:4px;transition:color .15s;z-index:10}
#pagePaleo .modal-close:hover{color:var(--gold)}
#pagePaleo .modal-top{display:flex;align-items:center;gap:1.4rem;padding:1.6rem 1.6rem 1.2rem;border-bottom:1px solid var(--border)}
#pagePaleo .modal-proto{width:86px;height:86px;object-fit:contain;flex-shrink:0;filter:invert(1) sepia(1) saturate(1.4) hue-rotate(5deg) brightness(.88)}
html[data-theme="light"] #pagePaleo .modal-proto{filter:none}
#pagePaleo .modal-title{display:flex;flex-direction:column;gap:.2rem;min-width:0}
#pagePaleo .modal-paleo{font-family:'NotoPhoenician',serif;font-size:3rem;color:var(--gold);line-height:1}
#pagePaleo .modal-name{font-size:1.25rem;color:var(--ink);font-style:italic}
#pagePaleo .modal-name-ar{font-family:'Amiri',serif;font-size:1rem;color:var(--ink-dim);direction:rtl}
#pagePaleo .modal-picture{font-size:.82rem;color:var(--ink-dim)}
#pagePaleo .modal-picture-ar{font-family:'Amiri',serif;font-size:.85rem;color:var(--gold-dim);direction:rtl}
#pagePaleo .modal-scripts{display:flex;gap:0;border-bottom:1px solid var(--border)}
#pagePaleo .script-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.9rem .5rem;border-right:1px solid var(--border);min-width:0}
#pagePaleo .script-item:last-child{border-right:none}
#pagePaleo .script-label{font-size:.6rem;color:var(--gold-dim);letter-spacing:.1em;text-transform:uppercase}
#pagePaleo .script-label-ar{font-family:'Amiri',serif;font-size:.65rem;color:var(--ink-dim);direction:rtl}
#pagePaleo .script-hb{font-family:'NotoHebrew','Amiri',serif;font-size:2.2rem;color:var(--stone);line-height:1}
#pagePaleo .script-ar{font-family:'NotoAramaic',serif;font-size:2rem;color:var(--ink-dim);line-height:1}
#pagePaleo .script-sound{font-family:monospace;font-size:1.1rem;color:var(--gold);background:rgba(201,151,58,.08);border:1px solid var(--border);border-radius:4px;padding:.2rem .6rem}
#pagePaleo .modal-body{padding:1.2rem 1.6rem;display:grid;gap:1rem}
#pagePaleo .modal-section{display:flex;flex-direction:column;gap:.45rem}
#pagePaleo .section-label{font-size:.62rem;color:var(--gold-dim);letter-spacing:.14em;text-transform:uppercase}
#pagePaleo .section-label-ar{font-family:'Amiri',serif;font-size:.7rem;color:var(--ink-dim);direction:rtl}
#pagePaleo .tags{display:flex;flex-wrap:wrap;gap:.5rem}
#pagePaleo .tag{display:flex;flex-direction:column;align-items:center;background:rgba(184,168,136,.06);border:1px solid var(--border);border-radius:4px;padding:.25rem .6rem;gap:.1rem}
#pagePaleo .tag-en{font-size:.78rem;color:var(--stone)}
#pagePaleo .tag-ar{font-family:'Amiri',serif;font-size:.78rem;color:var(--ink-dim);direction:rtl}
#pagePaleo .bilingual-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
#pagePaleo .bi-en{font-size:.88rem;color:var(--stone);font-style:italic}
#pagePaleo .bi-ar{font-family:'Amiri',serif;font-size:.9rem;color:var(--ink-dim);direction:rtl}
#pagePaleo .modal-nav{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.6rem;border-top:1px solid var(--border)}
#pagePaleo .nav-count{font-size:.75rem;color:var(--ink-dim);font-style:italic}

@media(max-width:820px){
  :is(#pagePaleo,#pagePhoenician) .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;padding:1rem .4rem}
  #pagePaleo .modal{max-width:calc(100vw - 20px);max-height:92dvh}
  #pagePaleo .modal-top{gap:.8rem;padding:1.15rem 1rem .9rem}
  #pagePaleo .modal-proto{width:64px;height:64px}
  #pagePaleo .modal-paleo{font-size:2.35rem}
  #pagePaleo .modal-scripts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  #pagePaleo .script-item{padding:.7rem .25rem}
  #pagePaleo .modal-body{padding:1rem}
}
@media(max-width:430px){
  :is(#pagePaleo,#pagePhoenician) .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;padding:.8rem 0}
  :is(#pagePaleo,#pagePhoenician) .card{min-height:0!important;padding:.85rem .45rem!important}
  #pagePaleo .modal-scripts{grid-template-columns:1fr}
  #pagePaleo .script-item{border-right:0;border-bottom:1px solid var(--border)}
  #pagePaleo .script-item:last-child{border-bottom:0}
}