/* RT-TXT-065 — Furigana Generator.
 * Light surfaces throughout: --rt-ink / --rt-ink-soft on --rt-surface; a
 * doubtful reading is marked in --rt-accent. No navy result box on this page,
 * so no --rt-result-* tokens (docs/contrast-conventions.md).
 * Spacing tokens are a 4px scale: --rt-s-3 is 12px, --rt-s-4 is 16px. */

.fg-form { display: flex; flex-direction: column; gap: var(--rt-s-4); min-width: 0; }
.fg-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fg-label { font-family: var(--rt-font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--rt-ink-muted); }
.fg-input {
    width: 100%; box-sizing: border-box; resize: vertical; padding: 10px 14px;
    border: 1px solid var(--rt-hairline); border-radius: var(--rt-r-button);
    background: var(--rt-surface); color: var(--rt-ink); font-size: 18px; line-height: 1.6;
}
.fg-input:focus { outline: none; border-color: var(--rt-accent); box-shadow: 0 0 0 3px var(--rt-accent-soft); }

.fg-options { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.fg-sel { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--rt-ink); }
.fg-sel select { width: auto; max-width: 280px; padding: 6px 8px; border: 1px solid var(--rt-hairline); border-radius: 6px; background: var(--rt-surface); color: var(--rt-ink); }
.fg-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--rt-ink); cursor: pointer; }

.fg-run { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.fg-run .btn-primary[disabled] { opacity: .6; cursor: progress; }
.fg-status { margin: 0; font-size: 13px; line-height: 1.5; color: var(--rt-ink-soft); }
.fg-status-error { color: var(--rt-ink); }

/* The output. min-height holds the space the first result will fill, so the
   page does not jump when it arrives (docs/cls-conventions.md). */
.fg-out {
    min-height: 140px; border: 1px solid var(--rt-hairline); border-radius: var(--rt-r-card);
    background: var(--rt-surface); padding: var(--rt-s-3) var(--rt-s-4); min-width: 0;
}
.fg-placeholder { margin: 0; font-size: 14px; line-height: 1.6; color: var(--rt-ink-soft); }
.fg-preview {
    margin: 0; font-size: 22px; line-height: 2.3; color: var(--rt-ink);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.fg-preview ruby { ruby-position: over; }
.fg-preview rt { font-size: 50%; color: var(--rt-ink-soft); letter-spacing: 0; }
.fg-preview .fg-doubt rt { color: var(--rt-accent); }
.fg-preview .fg-doubt { text-decoration: underline dotted var(--rt-accent); text-underline-offset: 6px; }
.fg-preview .fg-missing { text-decoration: underline dotted var(--rt-ink-muted); text-underline-offset: 6px; }

.fg-summary { margin: var(--rt-s-3) 0 0; font-size: 13px; line-height: 1.55; color: var(--rt-ink-soft); }
.fg-list-head { margin: var(--rt-s-3) 0 4px; font-size: 13.5px; font-weight: 600; color: var(--rt-ink); }
.fg-list { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.7; color: var(--rt-ink); }
.fg-list-word { font-size: 16px; }

.fg-export { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fg-export-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.fg-code {
    width: 100%; box-sizing: border-box; resize: vertical; padding: 8px 12px; min-height: 84px;
    border: 1px solid var(--rt-hairline); border-radius: 6px; background: var(--rt-surface-2);
    color: var(--rt-ink); font-family: var(--rt-font-mono); font-size: 13px; line-height: 1.5;
}
.fg-copy {
    padding: 6px 14px; border-radius: var(--rt-r-chip); cursor: pointer; font-size: 13.5px;
    border: 1px solid var(--rt-hairline); background: var(--rt-surface-2); color: var(--rt-ink);
}
.fg-copy:hover { border-color: var(--rt-accent); background: var(--rt-surface); }

.fg-ack { font-size: 11.5px; color: var(--rt-ink-soft); line-height: 1.6; margin: 0; }
.fg-ack a { color: inherit; }

@media (max-width: 480px) {
    .fg-preview { font-size: 19px; line-height: 2.4; }
}