/* cx-follow.css — the Follower pages: control-follow.html and the display,
 * follow-display.html (at the end). B.2.3
 *
 * Only the Follower's own parts. What cx already does is data-cx and cx-base
 * (B.2.2): the lines, Showing and Next, and the cue list are st elements; the
 * connection light is meta status; the header and the display's bottom bar
 * are cx-base's .cx-header and .cx-footer. Their rules went with them.
 *
 * Built on cx-base.css: colours come from the theme (currentColor and
 * --cx-text-dim), so light and dark both work without a palette here.
 */

.fl-page {
    --fl-dim:    var(--cx-text-dim, #8a8a8a);
    --fl-line:   color-mix(in srgb, currentColor 18%, transparent);
    --fl-tint:   color-mix(in srgb, currentColor 6%, transparent);
    --fl-good:   #2f9e44;
    --fl-fair:   #e0a100;
    --fl-poor:   #d9480f;
    --fl-accent: #1c7ed6;
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Hidden means hidden, whatever display a rule below gives the element. */
.fl-page [hidden] { display: none !important; }

.fl-title  { font-size: 1.4em; font-weight: 600; }
.fl-sub    { color: var(--fl-dim); }
/* The connection light (meta status) at the header's far end. */
.fl-page .cx-header > [data-cx~="status"] { margin-left: auto; }

.fl-error {
    border: 1px solid var(--fl-poor);
    color: var(--fl-poor);
    border-radius: 6px;
    padding: 8px 12px;
}

.fl-ref { color: var(--fl-dim); display: flex; align-items: center; gap: 12px; }
.fl-progress { flex: 0 0 200px; height: 6px; border-radius: 3px; background: var(--fl-line); overflow: hidden; }
.fl-progress > span { display: block; height: 100%; width: 0; background: var(--fl-accent); }

.fl-setup {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
    padding: 10px 12px; border: 1px solid var(--fl-line); border-radius: 8px;
}
.fl-setup label { display: flex; align-items: center; gap: 6px; }
.fl-buttons { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fl-link { color: var(--fl-accent); white-space: nowrap; }

.fl-state {
    display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 10px 20px;
    align-items: center; padding: 12px; border-radius: 8px; background: var(--fl-tint);
}
.fl-state-word { font-size: 1.5em; font-weight: 600; }
.fl-state-word[data-state="following"] { color: var(--fl-good); }
.fl-state-word[data-state="unsure"],
.fl-state-word[data-state="searching"] { color: var(--fl-fair); }
.fl-state-word[data-state="pause"],
.fl-state-word[data-state="waiting"],
.fl-state-word[data-state="idle"]      { color: var(--fl-dim); }

.fl-meters { display: flex; flex-direction: column; gap: 6px; }
.fl-meter  { display: flex; align-items: center; gap: 8px; }
/* Wide enough for "Confidence 99%". */
.fl-meter-label { width: 8em; flex: none; color: var(--fl-dim); }
.fl-meter-label b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fl-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--fl-line); overflow: hidden; }
.fl-bar > span { display: block; height: 100%; width: 0; background: var(--fl-accent); transition: width 0.15s; }
#fl-match[data-q="good"] { background: var(--fl-good); }
#fl-match[data-q="fair"] { background: var(--fl-fair); }
#fl-match[data-q="poor"] { background: var(--fl-poor); }
#fl-conf[data-q="good"]  { background: var(--fl-good); }
#fl-conf[data-q="fair"]  { background: var(--fl-fair); }
#fl-conf[data-q="poor"]  { background: var(--fl-poor); }
/* The microphone giving silence (cx-follow.js, B.4.36): the Input meter's box goes red. */
.fl-bar[data-quiet] { background: color-mix(in srgb, var(--fl-poor) 55%, transparent); }
.fl-facts { display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--fl-dim); }
.fl-facts b { font-weight: 600; }

.fl-suggest {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; border: 1px solid var(--fl-fair); border-radius: 6px;
}
.fl-suggest > span { flex: 1; }

.fl-lines { display: flex; flex-direction: column; gap: 6px; }
.fl-line  { display: flex; gap: 12px; align-items: baseline; }
.fl-line-label { width: 5em; flex: none; color: var(--fl-dim); text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.05em; }
/* Showing and Next are sp and st elements (cx-render); cx-base lets every
 * text element fill its row, which would split it evenly with the speaker. */
.fl-line > [data-cx~="sp"] { flex: none !important; }
.fl-nav { display: flex; gap: 8px; margin-top: 4px; }

.fl-lower { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; min-height: 0; }
.fl-section-title { font-weight: 600; margin-bottom: 6px; }
.fl-hint { font-weight: normal; color: var(--fl-dim); font-size: 0.85em; margin-left: 8px; }

.fl-log {
    list-style: none; margin: 0; padding: 0;
    max-height: 46vh; overflow-y: auto;
    border: 1px solid var(--fl-line); border-radius: 8px;
}
/* The cue list is cx-render's scroll list (st scroll controlling): it scrolls
 * itself, and needs only a height and the log's frame beside it. */
.fl-list-wrap { display: flex; flex-direction: column; height: 46vh; min-height: 0; }
.fl-list-wrap > [data-cx~="scroll"] { border: 1px solid var(--fl-line); border-radius: 8px; }

.fl-log li { padding: 4px 10px; border-bottom: 1px solid var(--fl-line); font-size: 0.9em; }
.fl-log li[data-kind="operator"] { color: var(--fl-accent); }
.fl-log li[data-kind="jump"]     { color: var(--fl-fair); }
.fl-log-time { color: var(--fl-dim); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
    .fl-state, .fl-lower { grid-template-columns: 1fr; }
    .fl-buttons { margin-left: 0; }
}

/* ── The display (follow-display.html) ─────────────────────────────────────
 * The lines are an st element and the bottom bar cx-base's .cx-footer, which
 * holds the buttons and the language menu inline. The Follower's own parts,
 * by the ids cx-follow.js finds them by: its status line, the input level,
 * and, until the first tap, the cover that asks for it. */

#fl-status-text {
    flex: 1; min-width: 0; font-size: 0.85rem; color: var(--cx-text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#fl-level-meter {
    flex: none; width: 3em; height: 4px; border-radius: 2px; overflow: hidden;
    background: color-mix(in srgb, currentColor 18%, transparent);
}
#fl-level-meter[data-quiet] { background: color-mix(in srgb, #d9480f 70%, transparent); }
#fl-level-meter > span { display: block; height: 100%; width: 0; background: currentColor; transition: width 0.1s; }
#fl-tap {
    position: fixed; inset: 0; z-index: 10; width: 100%;
    display: flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer; font: inherit; font-size: 1.5rem;
    background: var(--cx-surface, #000); color: inherit;
}
#fl-tap:disabled { cursor: progress; opacity: 0.6; }