/* ==========================================================================
   TRANSLATOR SUITE — STYLES
   Extends global design tokens from assets/css/style.css
   ========================================================================== */

.breadcrumb{padding:14px 0; font-size:13px; color:var(--muted);}
.breadcrumb ol{display:flex; gap:6px; flex-wrap:wrap;}
.breadcrumb li:not(:last-child)::after{content:"›"; margin-left:6px; color:var(--muted);}
.breadcrumb a{color:var(--teal); font-weight:600;}
.breadcrumb li[aria-current]{color:var(--text); font-weight:600;}

/* ---------------- Hero ---------------- */
.ts-hero{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff; padding:56px 0 44px; text-align:center; margin-bottom:34px;
}
.ts-hero h1{color:#fff; font-size:clamp(28px,4vw,40px);}
.ts-hero p{color:#CFE0F5; max-width:560px; margin:0 auto 24px; font-size:16.5px;}
.ts-hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------------- Module Tabs ---------------- */
.ts-module-tabs{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.ts-module-tab{
  background:var(--card); border:1.5px solid var(--border); color:var(--muted);
  padding:11px 20px; border-radius:12px; font-weight:700; font-size:14.5px; transition:.15s;
  box-shadow:var(--shadow);
}
.ts-module-tab:hover{border-color:var(--teal);}
.ts-module-tab.active{background:var(--navy); border-color:var(--navy); color:#fff;}

/* ---------------- Panel ---------------- */
.ts-panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); margin-bottom:24px;}
.ts-translator-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start;}

.ts-io-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.ts-direction-label{font-weight:700; font-size:15px; color:var(--navy);}
[data-theme="dark"] .ts-direction-label{color:var(--amber);}
.ts-swap-btn{
  background:var(--bg); border:1.5px solid var(--border); width:38px; height:38px; border-radius:10px;
  font-size:17px; color:var(--teal); transition:.2s;
}
.ts-swap-btn:hover{border-color:var(--teal); transform:rotate(180deg);}

.ts-io-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;}
.ts-io-box{background:var(--bg); border:1.5px solid var(--border); border-radius:12px; padding:14px; display:flex; flex-direction:column;}
.ts-io-box textarea{
  border:none; background:transparent; resize:vertical; min-height:160px; font-size:15px; color:var(--text);
  font-family:inherit; margin-bottom:10px;
}
.ts-io-box:focus-within{outline:2px solid var(--teal); outline-offset:2px; border-radius:12px;}
.ts-io-footer{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; border-top:1px solid var(--border); padding-top:10px;}
.ts-io-footer span{font-size:11.5px; color:var(--muted);}
.ts-io-actions{display:flex; gap:6px; flex-wrap:wrap;}
.ts-io-actions button{
  background:var(--card); border:1px solid var(--border); border-radius:7px; padding:5px 10px;
  font-size:11.5px; font-weight:600; color:var(--text);
}
.ts-io-actions button:hover{border-color:var(--teal); color:var(--teal);}
.ts-io-actions button.active{background:var(--teal); border-color:var(--teal); color:#fff;}

.ts-translate-btn{width:100%; font-size:15.5px; padding:14px; margin-bottom:16px;}

.ts-tts-controls{
  background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:16px;
  display:grid; gap:10px;
}
.ts-tts-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ts-tts-row button{
  background:var(--card); border:1px solid var(--border); border-radius:8px; padding:6px 12px;
  font-size:12.5px; font-weight:600; color:var(--text);
}
.ts-tts-row button:hover{border-color:var(--teal); color:var(--teal);}
.ts-tts-sliders{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
.ts-tts-sliders label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:4px;}
.ts-tts-sliders input[type=range]{width:100%; accent-color:var(--teal);}
.ts-tts-sliders select{width:100%; padding:6px; border-radius:7px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:12px;}

.ts-phrases-row{display:flex; flex-wrap:wrap; gap:8px;}
.ts-phrase-chip{
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600; transition:.15s;
}
.ts-phrase-chip:hover{border-color:var(--teal); color:var(--teal);}

/* ---------------- Sidebar (History / Favorites) ---------------- */
.ts-side-col{background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:16px;}
.ts-side-tabs{display:flex; gap:8px; margin-bottom:12px;}
.ts-side-tab{
  flex:1; background:var(--card); border:1.5px solid var(--border); color:var(--muted);
  padding:8px; border-radius:8px; font-weight:600; font-size:13px;
}
.ts-side-tab.active{background:var(--teal); border-color:var(--teal); color:#fff;}
.ts-side-toolbar{display:flex; justify-content:flex-end; margin-bottom:10px;}
.ts-side-toolbar button{background:none; border:none; color:var(--muted); font-size:11.5px; font-weight:600; text-decoration:underline;}
.ts-side-list{list-style:none; margin:0; padding:0; display:grid; gap:8px; max-height:420px; overflow-y:auto;}
.ts-side-empty{font-size:12.5px; color:var(--muted); text-align:center; padding:20px 0;}
.ts-side-item{background:var(--card); border:1px solid var(--border); border-radius:9px; padding:10px 12px;}
.ts-side-item .ts-side-item-text{font-size:12.5px; color:var(--text); margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.ts-side-item .ts-side-item-meta{font-size:10.5px; color:var(--muted); margin-bottom:6px;}
.ts-side-item-actions{display:flex; gap:6px;}
.ts-side-item-actions button{background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:3px 8px; font-size:11px; color:var(--text);}
.ts-side-item-actions button:hover{border-color:var(--teal); color:var(--teal);}

.ts-status-msg{margin-top:10px; font-size:13px; font-weight:600; min-height:16px;}
.ts-status-msg.ok{color:var(--teal);}
.ts-status-msg.err{color:#E4572E;}

/* ---------------- Toasts ---------------- */
.ts-toast-container{position:fixed; bottom:20px; right:20px; z-index:500; display:flex; flex-direction:column; gap:10px;}
.ts-toast{background:var(--navy); color:#fff; padding:12px 18px; border-radius:10px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-hover); max-width:320px;}
.ts-toast.err{background:#E4572E;}
.ts-toast.ok{background:var(--teal);}

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  .ts-translator-grid{grid-template-columns:1fr;}
  .ts-io-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .ts-tts-sliders{grid-template-columns:1fr;}
}

/* ==========================================================================
   PRINT LAYOUT — only the visible translator panel's original/translated
   text prints, sized for A4
   ========================================================================== */
@media print{
  .site-header, .mobile-drawer, .drawer-overlay, .breadcrumb, .ts-hero,
  .ts-module-tabs, .site-footer, .section, .ts-toast-container,
  .ts-translate-btn, .ts-io-actions, .ts-tts-controls, .ts-phrases-row,
  .ts-side-col, .ts-swap-btn{
    display:none !important;
  }
  .ts-panel[hidden]{display:none !important;}
  .ts-panel:not([hidden]){display:block !important; box-shadow:none !important; border:none !important;}
  .ts-translator-grid{display:block !important;}
  .ts-io-grid{display:block !important;}
  .ts-io-box{border:1px solid #ccc !important; margin-bottom:16px !important; page-break-inside:avoid;}
  body{background:#fff !important; color:#000 !important;}
  @page{ size:A4; margin:16mm; }
}