/* AurebeshTranslate Core 1.0.2 — Capsule Editorial Tool UI
   Presentation only. Designed for AurebeshTranslate.com's approved glass / editorial theme.
   All rules scoped to .ath-tool; engine, Unicode data, shortcodes, and print capability unchanged.
*/
@font-face {
  font-family:'AurebeshTranslate';
  src:url('../fonts/aurebeshtranslate-regular.woff2') format('woff2');
  font-display:block;
  font-weight:400;
  font-style:normal;
}
.ath-tool {
  --ath-ink:#101a27;
  --ath-ink2:#203245;
  --ath-copy:#36495c;
  --ath-muted:#697b8b;
  --ath-teal:#067e8a;
  --ath-cyan:#66d5d1;
  --ath-amber:#d9aa65;
  --ath-line:#dce6e9;
  --ath-line2:#cbdce1;
  --ath-paper:#f7fafb;
  --ath-bluewash:#f1f7f8;
  --ath-glass:#ffffff;
  --ath-focus:#078b99;
  --ath-font:'Inter','Segoe UI Variable Text','Segoe UI',Roboto,Arial,sans-serif;
  display:block;
  width:100%; max-width:100%; min-width:0;
  padding:clamp(18px,2.5vw,36px);
  margin:0;
  border:1px solid #d7e3e7;
  border-radius:clamp(18px,2vw,26px);
  background:linear-gradient(150deg,#ffffff 0%,#fbfdfd 52%,#f2f8f9 100%);
  color:var(--ath-ink);
  color-scheme:light;
  font:400 15px/1.55 var(--ath-font);
  text-align:left;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  box-shadow:0 14px 48px rgba(20,46,60,.065),0 2px 7px rgba(20,46,60,.025);
}
.ath-tool,.ath-tool *, .ath-tool *::before,.ath-tool *::after {box-sizing:border-box}
.ath-tool [hidden] {display:none!important}
.ath-tool :where(p,div,span,small,label){max-width:100%}
.ath-tool p{margin:0;color:var(--ath-copy);line-height:1.66}
.ath-tool label,.ath-tool .ath-field-label {
  display:block;
  margin:0 0 11px;
  padding:0;
  color:var(--ath-ink2);
  font:650 14px/1.45 var(--ath-font);
  letter-spacing:-.016em;
}
.ath-tool :where(button,select,textarea) {
  font-family:var(--ath-font)!important;
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:-.015em;
  text-transform:none;
  max-width:100%;
}
.ath-tool :where(button,select,a) {cursor:pointer}
.ath-tool button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ath-tool :where(button,select,textarea,input,a):focus-visible {
  outline:3px solid rgba(6,126,138,.72)!important;
  outline-offset:3px!important;
}
.ath-tool ::selection {background:#c6f1ef;color:#0c3242}

/* Input and result: equal-height reading cards, above all mode controls. */
.ath-tool .ath-panels {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(12px,1.6vw,22px);
  width:100%;max-width:100%;
}
.ath-tool .ath-panels>div{min-width:0}
.ath-translator.ath-tool .ath-panel {
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:clamp(14px,1.7vw,22px);
  background:rgba(255,255,255,.90);
  border:1px solid var(--ath-line);
  border-radius:17px;
  box-shadow:0 3px 14px rgba(25,51,64,.025);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.ath-translator.ath-tool .ath-panel-input:focus-within {
  border-color:#9bc9ce;
  box-shadow:0 0 0 4px rgba(102,213,209,.105);
}
.ath-translator.ath-tool .ath-panel-output {
  background:linear-gradient(150deg,#f9fcfc 0%,#f1f8f9 100%);
}
.ath-translator.ath-tool .ath-panel .ath-field-label,
.ath-translator.ath-tool .ath-panel>label:first-child {
  font-size:14px;
  font-weight:700;
  color:#1b3547;
  margin:0 0 12px;
  letter-spacing:-.025em;
}
.ath-tool textarea,
.ath-tool .ath-preview,
.ath-tool .ath-readable-output {
  display:block;
  min-width:0;max-width:100%;width:100%;
  margin:0;
  padding:17px 19px;
  background:#fff;
  border:1px solid #d8e4e8;
  border-radius:12px;
  color:var(--ath-ink2);
  box-shadow:none;
  line-height:1.72;
}
.ath-tool textarea {
  min-height:140px;
  resize:vertical;
  font-size:16px;
  font-weight:400;
  caret-color:#087d8b;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.ath-tool textarea:hover {border-color:#a8bfc8}
.ath-tool textarea:focus {
  background:#fff;
  border-color:#56afb7;
  box-shadow:0 0 0 4px rgba(102,213,209,.11);
  outline:none;
}
.ath-tool textarea:focus-visible {outline:2px solid var(--ath-focus)!important;outline-offset:1px!important}
.ath-tool textarea::placeholder {color:#92a1ae;opacity:1}
.ath-tool .ath-preview,.ath-tool .ath-readable-output {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  overflow-x:auto;overflow-y:auto;
  min-height:156px;max-height:500px;
}
.ath-tool .ath-preview {
  background:linear-gradient(135deg,#eef8f8 0%,#f8fcfc 100%);
  color:#116e79;
  border-color:#d7e8ea;
  font-size:clamp(23px,2.35vw,32px);
  line-height:1.8;
}
.ath-tool .ath-readable-output {font-size:16px;background:#f5fbfa}
.ath-translator.ath-tool textarea,
.ath-translator.ath-tool .ath-preview,
.ath-translator.ath-tool .ath-readable-output {
  height:clamp(210px,21vw,295px);
  min-height:210px;
}
.ath-tool .ath-glyph {
  font-family:'AurebeshTranslate',monospace!important;
  font-style:normal;
  font-weight:400!important;
  font-synthesis:none;
  font-variant-ligatures:none;
  font-feature-settings:'dlig' 0;
}
.ath-tool[data-ath-font-state='loading'] .ath-preview,
.ath-tool[data-ath-font-state='loading'] .ath-glyph,
.ath-tool[data-ath-font-state='unavailable'] .ath-preview,
.ath-tool[data-ath-font-state='unavailable'] .ath-glyph {visibility:hidden}

/* Options live after the editors. The reverse-only selector still appears conditionally. */
.ath-tool .ath-control-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px clamp(16px,2vw,28px);
  margin:22px 0 0;
  padding:18px 22px;
  background:rgba(238,246,248,.79);
  border:1px solid #dce8eb;
  border-radius:15px;
}
.ath-translator.ath-tool .ath-control-row .ath-mode-field {
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  min-width:min(255px,100%);
  gap:7px;
}
.ath-translator.ath-tool .ath-mode-field>label {
  margin:0;
  color:#536b7c;
  font-size:12px;
  font-weight:650;
}
.ath-tool select {
  -webkit-appearance:none;appearance:none;
  margin:0;
  min-width:0;max-width:100%;min-height:44px;
  padding:11px 39px 11px 15px;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23556E7D' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  border:1px solid #cbdde3;
  border-radius:11px;
  box-shadow:0 1px 2px rgba(20,46,60,.02);
  color:#203447;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.ath-tool select:hover{border-color:#83bec4}
.ath-tool select:focus {border-color:#078b99;box-shadow:0 0 0 3px rgba(102,213,209,.14)}
.ath-tool select option{background:#fff;color:#203447}
.ath-tool .ath-inline-toggle {
  display:inline-flex!important;
  align-items:center;
  gap:11px;
  flex-wrap:nowrap;
  min-height:44px;
  margin:0;
  padding:0;
  color:#415769;
  font-family:var(--ath-font);
  font-size:13px;
  font-weight:500!important;
  line-height:1.55;
  cursor:pointer;
}
.ath-tool .ath-inline-toggle input[type='checkbox'] {
  flex:0 0 auto;
  width:19px;height:19px;margin:0;
  accent-color:#078b99;
  cursor:pointer;
}
.ath-tool .ath-reverse-option {
  display:inline-flex;
  flex:1 1 310px;
  align-items:center;
  gap:9px;
  margin:0;
  color:#415769;
  font-size:12px;
}
.ath-tool .ath-reverse-option select {font-size:13px;flex:1 1 auto}

/* Controls are low-friction and clearly prioritized. */
.ath-tool .ath-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px 11px;
  align-items:center;
  max-width:100%;
  margin:20px 0 0;
  padding:0;
}
.ath-tool button:not(.ath-glyph-card):not([data-ath-insert]),
.ath-tool .ath-actions a {
  display:inline-flex;
  align-items:center;justify-content:center;
  min-width:44px;min-height:46px;
  max-width:100%;
  margin:0;
  padding:11px 19px;
  background:#fff;
  color:#294257;
  border:1px solid #d1e0e5;
  border-radius:999px;
  font:650 13.5px/1.35 var(--ath-font);
  letter-spacing:-.018em;
  text-align:center;text-decoration:none;
  white-space:normal;
  box-shadow:0 2px 5px rgba(26,57,68,.025);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .14s ease;
}
.ath-tool button:not(.ath-glyph-card):not([data-ath-insert]):hover,
.ath-tool .ath-actions a:hover {
  background:#f0f9f9;
  border-color:#88c8cd;
  color:#08616c;
  box-shadow:0 3px 10px rgba(15,88,99,.055);
}
.ath-tool button:not(.ath-glyph-card):not([data-ath-insert]):active,
.ath-tool .ath-actions a:active {transform:translateY(1px);box-shadow:none}
.ath-tool button:disabled,.ath-tool button[aria-disabled='true'] {
  opacity:.45;cursor:not-allowed;transform:none!important;
}
.ath-translator.ath-tool button[data-ath-copy],
.ath-keyboard.ath-tool button[data-ath-download],
.ath-alphabet.ath-tool button[data-ath-copy-key],
.ath-font-resource.ath-tool .ath-actions a:first-child {
  background:linear-gradient(120deg,#101a27,#193745);
  color:#fff;
  border-color:#101a27;
  box-shadow:0 5px 15px rgba(16,26,39,.15);
  font-weight:700;
}
.ath-translator.ath-tool button[data-ath-copy]:hover,
.ath-keyboard.ath-tool button[data-ath-download]:hover,
.ath-alphabet.ath-tool button[data-ath-copy-key]:hover,
.ath-font-resource.ath-tool .ath-actions a:first-child:hover {
  background:linear-gradient(120deg,#075f6a,#09818b);
  border-color:#075f6a;color:#fff;
  box-shadow:0 7px 20px rgba(7,95,106,.17);
}
.ath-tool .ath-status {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:24px;
  margin:16px 0 0;
  color:#39747a;
  font:500 12px/1.6 var(--ath-font);
  letter-spacing:0;
}
.ath-tool .ath-status::before {
  content:'';
  flex:0 0 7px;
  width:7px;height:7px;border-radius:50%;background:#29b5ac;
  box-shadow:0 0 0 3px rgba(41,181,172,.10);
}
.ath-tool .ath-status:empty {display:none;margin:0}
.ath-tool .ath-status:empty::before{display:none}
.ath-tool .ath-note,.ath-tool .ath-print-footer {
  margin:14px 0 0;
  padding-top:14px;
  border-top:1px solid var(--ath-line);
  color:var(--ath-muted);
  font-size:12px;line-height:1.8;
}
.ath-tool .ath-font-warning {
  margin:10px 0 0;
  color:#9a6223;
  font:500 12px/1.6 var(--ath-font);
}

/* Alphabet uses the same light surfaces without changing its reference behavior. */
.ath-alphabet.ath-tool>.ath-actions:first-child{justify-content:flex-end;margin:0 0 18px}
.ath-tool .ath-alphabet-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
  gap:10px;width:100%;max-width:100%;
}
.ath-tool .ath-alphabet-grid>div{min-width:0}
.ath-tool .ath-glyph-card {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;width:100%;min-width:0;min-height:117px;
  margin:0;padding:15px 8px 12px;
  border:1px solid var(--ath-line);border-radius:12px;
  background:#fff;color:var(--ath-ink);
  text-align:center;cursor:pointer;box-shadow:none;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.ath-tool .ath-glyph-card:hover {background:#f0fafa;border-color:#83c7ca;box-shadow:0 5px 18px rgba(22,99,105,.055)}
.ath-tool .ath-glyph-card:active{transform:translateY(1px)}
.ath-tool .ath-glyph-card[aria-pressed='true'] {
  background:#e8f7f7;border-color:#36aeb5;
  box-shadow:inset 0 0 0 1px #36aeb5;
}
.ath-tool .ath-glyph-card[aria-pressed='true'] .ath-card-name{color:#163746}
.ath-tool .ath-card-glyph{display:block;font-size:38px;line-height:1.2;color:#087e89}
.ath-tool .ath-card-name{display:block;min-width:0;font-size:12px;line-height:1.35;color:#536c7d;overflow-wrap:anywhere}
.ath-tool .ath-legend{margin:23px 0 13px;color:#526c7b;font:600 13px/1.5 var(--ath-font)}
.ath-tool .ath-selected {
  display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;
  margin:20px 0 0;padding:15px 18px;
  border:1px solid var(--ath-line);border-radius:13px;
  background:#f1f8f9;color:var(--ath-ink);
}
.ath-tool .ath-selected .ath-glyph{display:block;color:#087e89;font-size:59px;line-height:1.1}
.ath-tool .ath-selected [data-ath-selected-name]{flex:1 1 120px;min-width:0;color:#213d4d;font-size:14px;font-weight:650}
.ath-alphabet.ath-tool .ath-selected button{margin-left:auto}

/* Keyboard and font download retain their original controls and mappings. */
.ath-keyboard.ath-tool>label[for]{margin-bottom:10px}
.ath-keyboard.ath-tool>.ath-inline-toggle{margin:14px 0 16px}
.ath-keyboard.ath-tool>.ath-field-label{margin:9px 0 10px}
.ath-keyboard.ath-tool .ath-preview{min-height:145px}
.ath-tool .ath-key-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:8px;width:100%;margin:18px 0 0}
.ath-tool .ath-key-grid button,.ath-tool .ath-key-grid button[data-ath-insert] {
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:100%;min-width:0;min-height:70px;
  margin:0;padding:8px 4px;
  background:#fff;color:var(--ath-ink2);
  border:1px solid var(--ath-line);border-radius:11px;
  font:600 13px/1.25 var(--ath-font);box-shadow:0 2px 5px rgba(16,39,49,.025);
  cursor:pointer;transition:background-color .18s ease,border-color .18s ease,transform .12s ease;
}
.ath-tool .ath-key-grid button:hover,.ath-tool .ath-key-grid button[data-ath-insert]:hover{background:#eff9f9;border-color:#76c3c7}
.ath-tool .ath-key-grid button:active{transform:translateY(1px);background:#dff5f5}
.ath-tool .ath-key-grid .ath-glyph{display:block;font-size:29px;line-height:1.15;color:#087e89;pointer-events:none}
.ath-tool .ath-key-grid small{display:block;font:600 10px/1.25 var(--ath-font);letter-spacing:.025em;color:#677d8e;pointer-events:none}
.ath-keyboard.ath-tool .ath-digraph-keys{margin-top:0}
.ath-keyboard.ath-tool .ath-actions .ath-inline-toggle{padding:0;margin-right:3px}
.ath-font-resource.ath-tool .ath-font-specimen {
  margin:0 0 10px;padding:16px 18px;
  border:1px solid var(--ath-line);border-radius:12px;
  background:linear-gradient(135deg,#eaf6f7,#fff);color:#087e89;
  font-size:clamp(24px,3vw,36px);line-height:1.65;letter-spacing:.01em;overflow-wrap:anywhere;
}
.ath-font-resource.ath-tool .ath-actions{margin-top:17px}

/* Responsive layout: input then output, then direction/options. */
@media(max-width:870px) {
  .ath-tool .ath-panels{gap:13px}
  .ath-tool .ath-alphabet-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
  .ath-tool .ath-control-row{gap:13px 18px;padding:16px}
}
@media(max-width:680px) {
  .ath-tool{padding:15px;border-radius:17px;font-size:14px}
  .ath-tool .ath-panels{grid-template-columns:minmax(0,1fr);gap:13px}
  .ath-translator.ath-tool .ath-panel{padding:14px;border-radius:14px}
  .ath-translator.ath-tool textarea,
  .ath-translator.ath-tool .ath-preview,
  .ath-translator.ath-tool .ath-readable-output{height:185px;min-height:185px}
  .ath-tool .ath-control-row{align-items:stretch;gap:11px;margin-top:14px;padding:14px}
  .ath-translator.ath-tool .ath-control-row .ath-mode-field{flex:1 1 100%;min-width:0}
  .ath-tool .ath-mode-field select{width:100%}
  .ath-tool .ath-control-row .ath-inline-toggle{width:100%;min-height:35px}
  .ath-tool .ath-reverse-option{width:100%;flex:1 1 100%;flex-direction:column;align-items:stretch;gap:7px}
  .ath-tool .ath-reverse-option select{width:100%}
  .ath-tool .ath-actions{gap:9px;margin-top:16px}
  .ath-translator.ath-tool .ath-actions button{flex:1 1 auto}
  .ath-tool .ath-alphabet-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ath-tool .ath-glyph-card{min-height:98px;padding:11px 6px}
  .ath-tool .ath-card-glyph{font-size:33px}
  .ath-tool .ath-card-name{font-size:11px}
  .ath-tool .ath-key-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .ath-tool .ath-key-grid button{min-height:65px}
  .ath-tool .ath-key-grid .ath-glyph{font-size:25px}
  .ath-tool .ath-selected{gap:10px 14px;padding:12px}
  .ath-tool .ath-selected .ath-glyph{font-size:48px}
  .ath-alphabet.ath-tool .ath-selected button{flex:1 1 100%;margin-left:0}
}
@media(max-width:380px) {
  .ath-tool{padding:11px}
  .ath-translator.ath-tool .ath-panel{padding:11px}
  .ath-tool textarea,.ath-tool .ath-preview,.ath-tool .ath-readable-output{padding:14px}
  .ath-tool .ath-control-row{padding:12px}
  .ath-tool .ath-actions{gap:8px}
  .ath-translator.ath-tool .ath-actions button{flex:1 1 100%}
  .ath-tool .ath-alphabet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ath-tool .ath-key-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ath-tool button:not(.ath-glyph-card):not([data-ath-insert]),.ath-tool .ath-actions a{padding:10px 13px}
}
@media(prefers-reduced-motion:reduce) {
  .ath-tool *, .ath-tool *::before,.ath-tool *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .ath-tool button:active{transform:none!important}
}
@media(forced-colors:active) {
  .ath-tool :where(button,textarea,select,.ath-preview,.ath-readable-output,.ath-glyph-card){border:1px solid ButtonText}
  .ath-tool :where(button,textarea,select):focus-visible{outline:2px solid Highlight!important}
  .ath-tool .ath-glyph-card[aria-pressed='true']{outline:2px solid Highlight;outline-offset:-2px}
}
/* Original alphabet print workflow — unchanged by the translator re-layout. */
@media print {
  body *{visibility:hidden!important}
  .ath-alphabet,.ath-alphabet *{visibility:visible!important}
  .ath-alphabet{
    position:absolute!important;top:0!important;left:0!important;width:100%!important;max-width:100%!important;
    padding:0!important;margin:0!important;color:#111!important;background:#fff!important;border:0!important;
    border-radius:0!important;box-shadow:none!important;font-size:10pt!important;color-scheme:light!important;
  }
  .ath-alphabet .ath-actions,.ath-alphabet .ath-selected,.ath-alphabet .ath-font-warning{display:none!important}
  .ath-alphabet .ath-legend,.ath-alphabet .ath-print-footer{color:#111!important;margin:4px 0!important;padding:3px 0!important;border:0!important}
  .ath-alphabet .ath-alphabet-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:3px!important}
  .ath-alphabet .ath-glyph-card{min-height:65px!important;padding:2px!important;border:1px solid #aaa!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;color:#111!important}
  .ath-alphabet .ath-card-glyph{font-size:24pt!important;color:#111!important}
  .ath-alphabet .ath-card-name{font-size:8pt!important;color:#111!important}
  .ath-alphabet .ath-print-footer{font-size:8pt!important;display:block!important}
  @page{margin:11mm}
}