/* Feinh Pro v1.26: spell check and translate in every field (fp-write.js) and on text people read (fp-translate.js). Tokens only. */
.fpw-chip { z-index: var(--z-toast); }
.fpw-chip button[hidden] { display: none; }
.fpw-chip .fpw-abc { display: inline-flex; align-items: center; gap: var(--space-half); font-size: var(--text-meta-size); }
.fpw-chip .fpw-abc svg { inline-size: var(--space-3); block-size: var(--space-3); stroke-width: 2.4; color: var(--accent); }

.fpw-sug { position: absolute; z-index: var(--z-toast); box-sizing: border-box; max-inline-size: calc(100vw - var(--space-4)); padding: var(--space-3); border: var(--border-w) solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--elevation-3); color: var(--text-primary); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.fpw-sug-h { margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); font-weight: var(--weight-strong); }
.fpw-sug-x { max-block-size: 40vh; overflow: auto; margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-sunken); white-space: normal; overflow-wrap: anywhere; }
.fpw-sug-x mark { padding: 0 var(--space-half); border-radius: var(--radius-xs); background: var(--warning-bg); color: var(--warning-text); box-shadow: inset 0 calc(-1 * var(--border-w)) 0 var(--warning-border); }
.fpw-sug-n { margin: 0 0 var(--space-2); color: var(--text-tertiary); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); }
.fpw-sug-m { margin: 0 0 var(--space-2); color: var(--text-secondary); }
.fpw-sug-m.is-ok { color: var(--success-text); }
.fpw-sug-m.is-bad { color: var(--text-primary); }
.fpw-sug-m a, .fptr-m a { color: var(--text-link); font-weight: var(--weight-strong); }
.fpw-sug-do { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.fpw-sbtn { min-block-size: var(--space-8); padding: 0 var(--space-3); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-primary); font: inherit; font-size: var(--text-body-size); cursor: pointer; }
.fpw-sbtn:hover { background: var(--surface-subtle); }
.fpw-sbtn.pri { border-color: var(--primary); background: var(--primary); color: var(--text-on-dark); }
.fpw-sbtn.pri:hover { background: var(--primary-hover); }
.fpw-sbtn:focus-visible, .fpw-seg button:focus-visible, .fptr-link:focus-visible, .fptr-hide:focus-visible, .fpw-undo button:focus-visible { outline: var(--focus-ring-w) solid var(--border-focus); outline-offset: var(--space-half); }
.fpw-seg { display: inline-flex; gap: var(--space-half); margin: 0 0 var(--space-2); padding: var(--space-half); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.fpw-seg button { min-block-size: var(--space-6); padding: 0 var(--space-2); border: none; border-radius: var(--radius-xs); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-meta-size); cursor: pointer; }
.fpw-seg button[aria-pressed="true"] { background: var(--surface-raised); color: var(--text-primary); font-weight: var(--weight-strong); box-shadow: var(--elevation-1); }
.fpw-undo { display: flex; align-items: center; gap: var(--space-3); }
.fpw-undo button { padding: 0; border: none; background: transparent; color: var(--text-accent-on-dark); font: inherit; font-weight: var(--weight-strong); cursor: pointer; text-decoration: underline; }

/* read side: the Translate link and the translation under the text */
.fptr-link, .fptr-hide { display: inline-block; padding: 0; border: none; background: transparent; color: var(--text-link); font: inherit; font-size: var(--text-meta-size); line-height: var(--text-meta-lh); cursor: pointer; }
.fptr-link { display: block; margin-block: var(--space-half) 0; text-align: start; }
.fptr-link.is-quiet { color: var(--text-tertiary); }
.fptr-link:hover, .fptr-hide:hover { color: var(--text-link-hover); text-decoration: underline; }
.fptr-link[hidden] { display: none; }
.fptr-out { margin-block: var(--space-1) 0; padding: var(--space-2) var(--space-3); border-inline-start: var(--focus-ring-w) solid var(--accent); border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--text-primary); font-size: var(--text-table-size); line-height: var(--text-table-lh); overflow-wrap: anywhere; }
.fptr-x { margin: 0 0 var(--space-1); white-space: normal; }
.fptr-k, .fptr-m { margin: 0; color: var(--text-tertiary); font-size: var(--text-meta-size); line-height: var(--text-meta-lh); }
.fptr-m.is-bad { color: var(--text-primary); }
@media (max-width: 600px) {
  .fpw-sug-do { justify-content: stretch; }
  .fpw-sug-do .fpw-sbtn { flex: 1 1 auto; }
}