/* =========================================================
   HIEROGLYPHICSHUB TRANSLATOR — SITE-NATIVE UI
   Site-native interface and interaction layer.
   ========================================================= */

.hht-translator-mount,
.hht-translator-mount * {
  box-sizing: border-box;
}

.hht-translator-mount {
  --hht-gold: #B98224;
  --hht-gold-light: #D4A044;
  --hht-gold-soft: #E8C982;
  --hht-ink: #18201F;
  --hht-ink-soft: #303936;
  --hht-muted: #5C625D;
  --hht-limestone: #F7F4EC;
  --hht-sandstone: #F0E9DB;
  --hht-white: #FFFFFF;
  --hht-line: rgba(24,32,31,.11);
  --hht-line-soft: rgba(24,32,31,.075);
  --hht-gold-line: rgba(185,130,36,.42);

  width: min(1180px, calc(100% - 40px));
  margin: 34px auto 42px;
  color: var(--hht-ink);
  font-family: "DM Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.hht-translator-mount button,
.hht-translator-mount textarea,
.hht-translator-mount select {
  font: inherit;
}

/* =========================================================
   MAIN CARD
   ========================================================= */

.hht-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--hht-line);
  border-radius: 24px;
  box-shadow:
    0 22px 60px rgba(24,32,31,.09),
    0 3px 12px rgba(24,32,31,.035);
}

.hht-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hht-gold-light), transparent);
  opacity: .9;
  pointer-events: none;
}

/* =========================================================
   DIRECTION SWITCH BAR  (replaces old topline)
   ========================================================= */

.hht-switchbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px 18px;
  background: linear-gradient(180deg, #FBFAF6 0%, #F7F4EC 100%);
  border-bottom: 1px solid var(--hht-line-soft);
}

.hht-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border: 1px solid rgba(185,130,36,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  box-shadow:
    0 2px 8px rgba(24,32,31,.07),
    inset 0 1px 2px rgba(24,32,31,.04);
}

.hht-mobile-direction {
  display: none;
  width: 100%;
  grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr);
  align-items: center;
  gap: 7px;
}

.hht-mobile-direction-option,
.hht-mobile-swap {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  margin: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  user-select: none;
}

.hht-mobile-direction-option {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(24,32,31,.10);
  border-radius: 11px;
  background: rgba(255,255,255,.72);
  color: var(--hht-muted);
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.hht-mobile-direction-option--active {
  border-color: rgba(185,130,36,.58);
  background: linear-gradient(135deg, #C58B2C 0%, #B98224 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(185,130,36,.18);
}

.hht-mobile-swap {
  width: 46px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(185,130,36,.34);
  border-radius: 11px;
  background: #FFFFFF;
  color: var(--hht-gold);
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 3px 9px rgba(24,32,31,.06);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.hht-mobile-swap:hover,
.hht-mobile-swap:focus-visible {
  background: #FFF9ED;
  border-color: var(--hht-gold-line);
  color: #9F6B13;
}

.hht-mobile-swap:active {
  transform: scale(.96);
}

.hht-switch-pill {
  position: relative;
  z-index: 2;
  padding: 9px 22px;
  border-radius: 999px;
  color: var(--hht-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .22s ease;
}

.hht-switch-pill--active {
  color: var(--hht-ink);
  font-weight: 700;
}

/* Animated sliding thumb */
.hht-switch-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  border-radius: 999px;
  background: linear-gradient(135deg, #C58B2C 0%, #B98224 100%);
  box-shadow:
    0 3px 10px rgba(185,130,36,.28),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition: left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 1;
}

/* Active pill text turns white over the gold thumb */
.hht-switch-pill--active {
  color: #FFFFFF;
}

/* =========================================================
   SPLIT WORKSPACE
   ========================================================= */

.hht-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 0;
}

.hht-input-column {
  min-width: 0;
  padding: 28px 28px 30px;
  border-right: 1px solid var(--hht-line);
}

.hht-output-column {
  min-width: 0;
  background: #FBFAF7;
}

/* =========================================================
   INPUT AREA
   ========================================================= */

.hht-label {
  display: block;
  margin: 0 0 9px;
  color: var(--hht-ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .015em;
}

.hht-input-wrap {
  position: relative;
}

.hht-input-wrap textarea {
  display: block;
  width: 100%;
  min-height: 255px;
  padding: 18px 48px 18px 18px;
  resize: vertical;
  outline: none;
  border: 1px solid rgba(24,32,31,.15);
  border-radius: 15px;
  background: #FFFFFF;
  color: var(--hht-ink);
  font-size: 17px;
  line-height: 1.65;
  box-shadow: inset 0 1px 2px rgba(24,32,31,.025);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Glyph input mode — switch to hieroglyphic font, keep all sizing identical */
.hht-input-wrap textarea.hht-glyph-input {
  font-family: "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", sans-serif;
  font-size: 28px;
  line-height: 1.65;
  letter-spacing: .04em;
}

.hht-input-wrap textarea::placeholder {
  color: #969A94;
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.hht-input-wrap textarea:hover {
  border-color: rgba(185,130,36,.32);
}

.hht-input-wrap textarea:focus {
  border-color: var(--hht-gold);
  box-shadow:
    0 0 0 3px rgba(185,130,36,.10),
    inset 0 1px 2px rgba(24,32,31,.025);
}

.hht-clear {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(24,32,31,.09);
  border-radius: 8px;
  background: #F7F4EC;
  color: var(--hht-muted);
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.hht-clear:hover,
.hht-clear:focus-visible {
  background: #F0E9DB;
  border-color: var(--hht-gold-line);
  color: var(--hht-ink);
}

/* =========================================================
   ACTIONS
   ========================================================= */

.hht-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 17px;
}

.hht-translate {
  min-height: 45px;
  padding: 0 21px;
  border: 1px solid #A96F13;
  border-radius: 10px;
  background: linear-gradient(135deg, #C58B2C 0%, #B98224 100%);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow:
    0 7px 18px rgba(185,130,36,.20),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.hht-translate:hover,
.hht-translate:focus-visible {
  background: linear-gradient(135deg, #E0A832 0%, #C78A1E 100%);
  border-color: #8B5A0E;
  box-shadow:
    0 11px 26px rgba(185,130,36,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-2px);
}

.hht-translate:active {
  transform: translateY(0);
  box-shadow:
    0 4px 10px rgba(185,130,36,.20),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.hht-translate:disabled {
  opacity: .68;
  cursor: wait;
  transform: none;
}

.hht-example {
  min-height: 42px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: var(--hht-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s ease;
}

.hht-example:hover,
.hht-example:focus-visible {
  color: var(--hht-gold);
}

/* =========================================================
   OUTPUT AREA
   ========================================================= */

.hht-output {
  min-height: 389px;
  padding: 28px;
  background: linear-gradient(180deg, #FBFAF7 0%, #F8F5EE 100%);
}

.hht-empty,
.hht-loading,
.hht-error {
  min-height: 332px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 18px;
  text-align: center;
  color: var(--hht-muted);
}

.hht-empty span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 15px;
  border: 1px solid rgba(185,130,36,.25);
  border-radius: 18px;
  background: rgba(255,255,255,.58);
  color: var(--hht-gold);
  font-family: "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", sans-serif;
  font-size: 32px;
  box-shadow: 0 8px 24px rgba(24,32,31,.045);
}

.hht-empty p,
.hht-loading p,
.hht-error p {
  max-width: 300px;
  margin: 0;
  color: #727872;
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================================
   LOADING
   ========================================================= */

.hht-loading span {
  display: block;
  width: 27px;
  height: 27px;
  margin-bottom: 14px;
  border: 2px solid rgba(185,130,36,.18);
  border-top-color: var(--hht-gold);
  border-radius: 50%;
  animation: hhtspin .8s linear infinite;
}

@keyframes hhtspin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   RESULT HEADER
   ========================================================= */

.hht-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.hht-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid rgba(21,128,61,.18);
  border-radius: 999px;
  background: rgba(21,128,61,.075);
  color: #287445;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

/* All statuses render as green supported badge */

.hht-result-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hht-copy,
.hht-roundtrip {
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid rgba(24,32,31,.13);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--hht-ink-soft);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.hht-copy:hover,
.hht-copy:focus-visible,
.hht-roundtrip:hover,
.hht-roundtrip:focus-visible {
  border-color: var(--hht-gold-line);
  background: #FFFDF8;
  color: var(--hht-gold);
}

/* =========================================================
   GLYPH RESULT
   ========================================================= */

.hht-glyph-panel {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  padding: 36px 24px;
  border: 1px solid rgba(185,130,36,.19);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 40%, rgba(212,160,68,.08), transparent 58%),
    #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.hht-glyphs {
  color: var(--hht-ink);
  font-family: "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", sans-serif;
  font-size: 52px;
  line-height: 1.25;
  letter-spacing: .015em;
  white-space: nowrap;
}

/* =========================================================
   RESULT DETAILS
   ========================================================= */

.hht-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.hht-detail {
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--hht-line-soft);
  border-radius: 10px;
  background: rgba(255,255,255,.70);
}

.hht-detail span {
  display: block;
  margin-bottom: 3px;
  color: #858B85;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hht-detail strong {
  display: block;
  overflow: hidden;
  color: var(--hht-ink-soft);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   REVERSE / ENGLISH RESULT
   ========================================================= */

.hht-english-panel {
  margin: 0 0 10px;
  padding: 15px 17px;
  border: 1px solid rgba(185,130,36,.19);
  border-radius: 13px;
  background: #FFFFFF;
}

.hht-english-panel > span {
  display: block;
  margin-bottom: 4px;
  color: #858B85;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hht-english {
  color: var(--hht-ink);
  font-size: 19px;
  font-weight: 650;
  line-height: 1.5;
}

.hht-english-panel small {
  display: block;
  margin-top: 7px;
  color: #858B85;
  font-size: 11px;
  line-height: 1.5;
}

/* =========================================================
   ERRORS
   ========================================================= */

.hht-error {
  color: #8F3D3D;
}

.hht-error strong {
  display: block;
  margin-bottom: 6px;
  color: #A33A3A;
}

.hht-retry {
  min-height: 38px;
  margin-top: 12px;
  padding: 0 15px;
  border: 0;
  border-radius: 9px;
  background: var(--hht-ink);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* =========================================================
   FOOTNOTE
   ========================================================= */

.hht-footer-note {
  padding: 13px 24px 15px;
  border-top: 1px solid var(--hht-line-soft);
  background: #FBFAF7;
  color: #858B85;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .hht-translator-mount {
    width: min(100% - 32px, 760px);
  }

  .hht-form {
    grid-template-columns: 1fr;
  }

  .hht-input-column {
    border-right: 0;
    border-bottom: 1px solid var(--hht-line);
  }

  .hht-output {
    min-height: 350px;
  }
}

/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 640px) {
  .hht-translator-mount {
    width: calc(100% - 24px);
    margin: 22px auto 30px;
  }

  .hht-card {
    border-radius: 19px;
  }

  .hht-switchbar {
    padding: 14px 15px 13px;
  }

  .hht-switch-track--desktop {
    display: none;
  }

  .hht-mobile-direction {
    display: grid;
  }

  .hht-result-head {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
  }

  .hht-result-actions {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .hht-copy,
  .hht-roundtrip {
    min-height: 31px;
    padding-left: 9px;
    padding-right: 9px;
    font-size: 10.5px;
    white-space: nowrap;
  }

  .hht-input-column,
  .hht-output {
    padding: 20px 17px 22px;
  }

  .hht-input-wrap textarea {
    min-height: 205px;
    padding: 16px 44px 16px 15px;
    border-radius: 13px;
    font-size: 16px;
  }

  .hht-input-wrap textarea.hht-glyph-input {
    font-size: 24px;
  }

  .hht-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
  }

  .hht-translate {
    width: 100%;
    min-height: 46px;
  }

  .hht-example {
    min-height: 35px;
  }

  .hht-output {
    min-height: 330px;
  }

  .hht-empty,
  .hht-loading,
  .hht-error {
    min-height: 270px;
  }

  .hht-glyph-panel {
    min-height: 160px;
    padding: 28px 14px;
  }

  .hht-glyphs {
    font-size: 43px;
  }

  .hht-detail-grid {
    grid-template-columns: 1fr;
  }

  .hht-footer-note {
    padding: 12px 17px 14px;
    font-size: 9.5px;
  }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {
  .hht-translator-mount {
    width: calc(100% - 18px);
  }

  .hht-switchbar {
    padding: 12px 12px 11px;
  }

  .hht-mobile-direction {
    grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr);
    gap: 6px;
  }

  .hht-mobile-direction-option {
    min-height: 38px;
    padding: 0 7px;
    font-size: 11px;
  }

  .hht-mobile-swap {
    width: 42px;
    height: 38px;
    font-size: 19px;
  }

  .hht-input-column,
  .hht-output {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hht-glyphs {
    font-size: 36px;
  }

  .hht-result-head {
    align-items: flex-start;
  }

  .hht-result-actions {
    flex-shrink: 0;
  }
}

/* =========================================================
   ACCESSIBILITY / MOTION
   ========================================================= */

.hht-translator-mount button:focus-visible,
.hht-translator-mount textarea:focus-visible,
.hht-translator-mount select:focus-visible {
  outline: 2px solid var(--hht-gold-light);
  outline-offset: 2px;
}

.hht-switch-pill:focus-visible,
.hht-mobile-direction-option:focus-visible,
.hht-mobile-swap:focus-visible {
  outline: 2px solid var(--hht-gold-light);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hht-translator-mount * {
    scroll-behavior: auto !important;
  }

  .hht-translate,
  .hht-example,
  .hht-clear,
  .hht-copy,
  .hht-roundtrip,
  .hht-loading span,
  .hht-switch-thumb,
  .hht-switch-pill,
  .hht-mobile-direction-option,
  .hht-mobile-swap {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   1.7.2 QUALITY / MOBILE + ROUND-TRIP POLISH
   ========================================================= */

.hht-switch-pill {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
}

.hht-badge--partial {
  border-color: rgba(180,120,20,.22);
  background: rgba(180,120,20,.09);
  color: #956515;
}

.hht-badge--approximation {
  border-color: rgba(37,99,235,.18);
  background: rgba(37,99,235,.08);
  color: #315D9A;
}

.hht-badge--unresolved {
  border-color: rgba(180,45,35,.18);
  background: rgba(180,45,35,.07);
  color: #9B3D35;
}

.hht-result-note {
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--hht-line-soft);
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  color: #777D77;
  font-size: 10px;
  line-height: 1.55;
}

.hht-roundtrip-panel {
  min-height: 332px;
  padding: 24px;
  border: 1px solid rgba(185,130,36,.20);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 12%, rgba(212,160,68,.07), transparent 55%),
    #FFFFFF;
}

.hht-roundtrip-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 26px;
}

.hht-roundtrip-close {
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid rgba(24,32,31,.12);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--hht-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.hht-roundtrip-label,
.hht-roundtrip-trans span {
  display: block;
  margin-bottom: 7px;
  color: #858B85;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hht-roundtrip-english {
  color: var(--hht-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.hht-roundtrip-trans {
  margin-top: 18px;
  padding: 11px 13px;
  border: 1px solid var(--hht-line-soft);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}

.hht-roundtrip-trans strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--hht-ink-soft);
  font-size: 13px;
  font-weight: 650;
}

.hht-roundtrip-note {
  margin: 13px 0 0;
  color: #777D77;
  font-size: 10px;
  line-height: 1.55;
}

.hht-roundtrip-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.hht-use-reverse {
  min-height: 39px;
  padding: 0 14px;
  border: 1px solid #A96F13;
  border-radius: 9px;
  background: linear-gradient(135deg, #C58B2C 0%, #B98224 100%);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.hht-use-reverse:hover,
.hht-use-reverse:focus-visible,
.hht-roundtrip-close:hover,
.hht-roundtrip-close:focus-visible {
  border-color: var(--hht-gold-line);
}

@media (max-width: 640px) {
  .hht-roundtrip-panel {
    min-height: 270px;
    padding: 18px;
  }

  .hht-roundtrip-english {
    font-size: 19px;
  }

  .hht-roundtrip-actions {
    justify-content: stretch;
  }

  .hht-use-reverse {
    width: 100%;
  }
}