/* Scoped styles for the Einarth Tongues shortcodes ([einarth_translator],
   [einarth_builder]). Everything lives under .einarth-app so it can never
   leak into the surrounding theme -- no bare body/h1/header/footer
   selectors like the old standalone-page stylesheet had. The real site
   header/nav/footer wrap around this automatically since it's rendered
   inside a normal WordPress Page. */
.einarth-app {
  --e-bg: #faf7f0; --e-panel: #ffffff; --e-panel2: #f4efe2; --e-text: #171717;
  --e-muted: #4a5957; --e-accent: #a8791f; --e-accent2: #8b1a1a; --e-border: #e3dcc8;
  --e-teal: #0c2726; --e-teal2: #163a38; --e-cream: #f2ede1;
  font-family: 'EB Garamond', 'Georgia', serif;
  color: var(--e-text);
  font-size: 1.16rem;
  max-width: 980px;
  margin: 0 auto;
}
.einarth-app * { box-sizing: border-box; }
.einarth-app .e-intro { text-align: center; color: var(--e-muted); font-size: 0.98rem; margin: 0 0 22px; }

.einarth-app .e-tabs { display:flex; justify-content:center; gap: 8px; margin: 0 0 22px; flex-wrap: wrap; }
.einarth-app .e-tab-btn {
  background: var(--e-panel); border: 1px solid var(--e-border); color: var(--e-muted);
  padding: 9px 22px; border-radius: 999px; font-family: 'Cinzel', serif; font-size: 0.9rem;
  cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase;
}
.einarth-app .e-tab-btn.active { color: var(--e-accent); border-color: var(--e-accent); background: var(--e-panel2); }
.einarth-app .e-tabpage { display:none; }
.einarth-app .e-tabpage.active { display:block; }

/* ---- Sentence Translator ---- */
.einarth-app .e-lang-select-row { display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom: 18px; flex-wrap: wrap; }
.einarth-app .e-lang-select-row label { color: var(--e-muted); font-size: 0.98rem; }
.einarth-app .e-langSelect, .einarth-app .e-dictLangSelect, .einarth-app .e-dialectSelect {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--e-border);
  background: var(--e-panel2); color: var(--e-accent); font-family: inherit; font-size: 0.95rem;
  min-width: 180px;
}
.einarth-app .e-card .e-dialect-forms {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--e-border);
  font-size: 0.92rem; color: var(--e-text); display: flex; flex-direction: column; gap: 4px;
}
.einarth-app .e-card .e-dialect-tag {
  display: inline-block; min-width: 74px; color: var(--e-muted); font-family: 'Cinzel', serif;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---- Text-to-speech buttons ---- */
.einarth-app .e-speak-btn {
  background: var(--e-panel2); border: 1px solid var(--e-border); color: var(--e-accent);
  border-radius: 999px; padding: 4px 12px; font-size: 0.85rem; cursor: pointer;
  font-family: inherit; line-height: 1.6;
}
.einarth-app .e-speak-btn:hover:not(:disabled) { border-color: var(--e-accent); background: var(--e-cream); }
.einarth-app .e-speak-btn:disabled { opacity: 0.4; cursor: default; }
.einarth-app .e-speakOutput { margin-top: 10px; }
.einarth-app .e-card .e-speak-btn, .einarth-app .e-dialect-forms .e-speak-btn {
  padding: 2px 9px; font-size: 0.78rem; margin-left: 8px; vertical-align: middle;
}
.einarth-app table.e-gloss .e-speak-btn { padding: 2px 8px; font-size: 0.78rem; }
.einarth-app .e-lang-blurb { text-align:center; color: var(--e-muted); font-size: 0.92rem; font-style: italic; margin-bottom: 22px; }
.einarth-app .e-translate-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .einarth-app .e-translate-grid { grid-template-columns: 1fr; } }
.einarth-app .e-tpanel {
  background: var(--e-panel); border: 1px solid var(--e-border); border-radius: 12px;
  padding: 18px 20px; min-height: 220px;
}
.einarth-app .e-tpanel .e-lbl { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--e-muted); margin-bottom: 10px; font-family: 'Cinzel', serif; }
.einarth-app .e-englishInput {
  width: 100%; min-height: 180px; background: transparent; border: none; outline: none;
  color: var(--e-text); font-family: inherit; font-size: 1.15rem; line-height: 1.6; resize: vertical;
}
.einarth-app .e-translatedOutput {
  min-height: 180px; font-size: 1.15rem; line-height: 1.8; color: var(--e-accent); word-wrap: break-word;
}
.einarth-app .e-translatedOutput .e-untr { color: var(--e-text); border-bottom: 1px dotted var(--e-muted); cursor: help; }
.einarth-app .e-translatedOutput .e-coined { color: var(--e-accent); border-bottom: 1px dashed #7a6a3f; cursor: help; opacity: 0.85; }
.einarth-app .e-translatedOutput .e-tr { color: var(--e-accent); }
.einarth-app .e-legend { text-align:center; font-size: 0.88rem; color: var(--e-muted); margin-top: 10px; }
.einarth-app .e-legend .e-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin: 0 4px 0 14px; vertical-align:middle; }
.einarth-app .e-swap-hint { text-align:center; color: var(--e-muted); font-size: 0.9rem; margin-top: 14px; }
.einarth-app .e-swap-hint a { color: var(--e-accent); text-decoration: none; }

/* ---- Dictionary tab ---- */
.einarth-app .e-search-box { display: flex; gap: 10px; margin: 6px auto 8px; max-width: 640px; position: relative; }
.einarth-app .e-query {
  flex: 1; padding: 14px 18px; font-size: 1.05rem; border-radius: 10px;
  border: 1px solid var(--e-border); background: var(--e-panel); color: var(--e-text);
  font-family: inherit; outline: none; transition: border-color .15s;
}
.einarth-app .e-query:focus { border-color: var(--e-accent); }
.einarth-app .e-hint { text-align:center; color: var(--e-muted); font-size: 0.95rem; margin-bottom: 20px; }
.einarth-app .e-suggestions {
  position: absolute; top: 54px; left: 0; right: 0; background: var(--e-panel2);
  border: 1px solid var(--e-border); border-radius: 10px; max-height: 220px;
  overflow-y: auto; z-index: 10; display: none;
}
.einarth-app .e-suggestions div { padding: 9px 16px; cursor: pointer; font-size: 0.92rem; }
.einarth-app .e-suggestions div:hover { background: var(--e-border); }
.einarth-app .e-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-top: 8px; }
.einarth-app .e-card {
  background: var(--e-panel); border: 1px solid var(--e-border); border-radius: 12px;
  padding: 18px 20px; border-top: 3px solid var(--card-color, var(--e-accent));
}
.einarth-app .e-card .e-race { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--e-muted); font-family: 'Cinzel', serif; }
.einarth-app .e-card .e-langname { font-size: 1.05rem; color: var(--e-accent); margin: 2px 0 2px; font-family: 'Cinzel', serif; }
.einarth-app .e-card .e-tagline { font-size: 0.88rem; color: var(--e-muted); font-style: italic; margin-bottom: 12px; }
.einarth-app .e-card .e-word { font-size: 1.7rem; font-weight: 600; word-break: break-word; }
.einarth-app .e-card .e-missing { color: var(--e-muted); font-style: italic; font-size: 0.95rem; }
.einarth-app .e-empty-state { text-align: center; color: var(--e-muted); margin-top: 48px; font-size: 0.95rem; line-height: 1.7; }
.einarth-app .e-browse { margin-top: 56px; }
.einarth-app .e-browse h2 { color: var(--e-accent); font-weight: 400; font-size: 1.05rem; text-align:center; margin-bottom: 14px; font-family: 'Cinzel', serif; letter-spacing: 0.05em; text-transform: uppercase;}
.einarth-app .e-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.einarth-app .e-chip {
  background: var(--e-panel2); border: 1px solid var(--e-border); color: var(--e-text);
  padding: 6px 14px; border-radius: 999px; font-size: 0.92rem; cursor: pointer;
}
.einarth-app .e-chip:hover { border-color: var(--e-accent); color: var(--e-accent); }
.einarth-app .e-note { text-align:center; color: var(--e-muted); font-size: 0.9rem; margin-top: 28px; line-height: 1.7; }
.einarth-app .e-note a { color: var(--e-accent); }

/* ---- Sentence Builder ---- */
.einarth-app .e-panel {
  background: var(--e-panel); border: 1px solid var(--e-border); border-radius: 12px;
  padding: 22px 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(31,58,56,0.06);
}
.einarth-app .e-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
@media (max-width: 640px) { .einarth-app .e-grid { grid-template-columns: 1fr; } }
.einarth-app .e-field label { display:block; font-size: 0.88rem; color: var(--e-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.06em;}
.einarth-app .e-field select, .einarth-app .e-field input[type=text] {
  width:100%; padding: 9px 10px; border-radius: 8px; border:1px solid var(--e-border);
  background: var(--e-panel2); color: var(--e-text); font-family: inherit; font-size: 0.95rem;
}
.einarth-app .e-checkrow { display:flex; align-items:center; gap: 8px; margin-top: 6px; }
.einarth-app .e-checkrow label { font-size: 0.92rem; color: var(--e-text); text-transform:none; letter-spacing:0; }
.einarth-app .e-section-title {
  color: var(--e-accent); font-size: 0.95rem; margin: 0 0 14px; font-weight:600;
  font-family: 'Cinzel', serif; letter-spacing: 0.06em; text-transform: uppercase;
}
.einarth-app .e-hidden { display:none !important; }
.einarth-app .e-output {
  background: var(--e-panel2); border: 1px solid var(--e-accent); border-radius: 12px;
  padding: 24px; text-align:center; margin-bottom: 20px;
}
.einarth-app .e-output .e-sentence { font-size: 1.6rem; color: var(--e-accent2); word-break: break-word; font-weight: 600; }
.einarth-app .e-output .e-english { color: var(--e-muted); font-size: 1.02rem; margin-top: 6px; }
.einarth-app table.e-gloss { width:100%; border-collapse: collapse; margin-top: 8px; font-size: 0.96rem;}
.einarth-app table.e-gloss th, .einarth-app table.e-gloss td { border-bottom: 1px solid var(--e-border); padding: 7px 8px; text-align:left;}
.einarth-app table.e-gloss th { color: var(--e-muted); font-weight:400; text-transform:uppercase; font-size:0.8rem; letter-spacing:0.06em; font-family: 'Cinzel', serif; }
.einarth-app .e-rulebox { font-size: 0.98rem; color: var(--e-text); line-height:1.75; }
.einarth-app .e-rulebox b { color: var(--e-text); }