/* Martian Text Converter — RT-FUN-082 (火星文轉換)
   Widget styling. The form shell + ad/section styling come from the platform
   tool layout; this file scopes the mt-* converter components. LIME/green
   theme (accent #65A30D). Loaded automatically by show.blade.php when present. */

.mt-form { display: flex; flex-direction: column; gap: 14px; }

/* Helper note (utility — neutral, not a fortune disclaimer) */
.mt-note {
  padding: 10px 14px; background: #f7fee7; border-left: 3px solid #65A30D;
  border-radius: 0 6px 6px 0; font-size: 12.5px; color: var(--rt-ink-muted); line-height: 1.5;
}

/* Direction toggle */
.mt-toggle {
  display: inline-flex; padding: 4px; gap: 4px; background: var(--rt-surface-2);
  border: 1px solid var(--rt-hairline); border-radius: 999px; align-self: flex-start;
  flex-wrap: wrap;
}
.mt-dir {
  padding: 8px 16px; font-size: 13px; border-radius: 999px; cursor: pointer;
  font-family: var(--rt-font-mono); letter-spacing: .03em; font-weight: 600;
  background: transparent; color: var(--rt-ink-muted); border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease;
}
.mt-dir:hover { color: var(--rt-ink); }
.mt-dir.mt-dir-active {
  background: #65A30D; color: #fff; border-color: #4d7c0f;
}

/* Side-by-side panes */
.mt-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .mt-panes { grid-template-columns: 1fr; } }

.mt-pane { display: flex; flex-direction: column; gap: 6px; }
.mt-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mt-pane-label {
  font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.mt-count { font-family: var(--rt-font-mono); font-size: 10.5px; color: var(--rt-ink-muted); }

.mt-textarea {
  width: 100%; min-height: 180px; resize: vertical; padding: 14px;
  border: 1px solid var(--rt-hairline); border-radius: 8px; background: #fff;
  font-size: 16px; line-height: 1.7; font-family: var(--rt-font-sans);
  color: var(--rt-ink);
}
.mt-textarea:focus {
  outline: none; border-color: #65A30D; box-shadow: 0 0 0 3px rgba(101,163,13,.14);
}

/* Output pane wrapper carries the empty-state overlay */
.mt-output-wrap { position: relative; }
.mt-textarea-out { background: var(--rt-bg-inset); }
.mt-out-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center; color: var(--rt-ink-muted); font-style: italic;
  font-size: 13.5px; pointer-events: none;
}

/* Actions */
.mt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-btn {
  padding: 10px 18px; font-size: 13px; border-radius: 6px; cursor: pointer;
  font-family: var(--rt-font-mono); text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.mt-btn-copy { background: #65A30D; color: #fff; border: 1px solid #4d7c0f; }
.mt-btn-copy:hover { background: #4d7c0f; }
.mt-btn-clear { background: #fff; color: #4d7c0f; border: 1px solid rgba(101,163,13,.4); }
.mt-btn-clear:hover { background: #f7fee7; }