/* ============================================
   Visibility Consent Strip (2026-08-28 privacy review)
   ============================================
   One slim inline strip on the member's OWN board row, shown while the server
   is clamping their events to 'busy' on that board because they have not
   answered the visibility question yet.

   It is intentionally QUIET. This is not an error and not a warning: it
   describes a state the member can resolve whenever they like, and the safe
   thing is already happening. Amber/red would overstate it and make a privacy
   default look like a fault.
   ============================================ */

.visibility-consent-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 8px 8px;
    padding: 7px 10px;
    border-radius: 10px;
    /* Neutral surface + a teal hairline: the house accent, so it reads as part
       of the product rather than as an alert lifted from somewhere else. */
    background: var(--surface-secondary, #f1f5f9);
    border: 1px solid var(--accent-teal-soft, rgba(20, 184, 166, 0.35));
    font-size: 12px;
    line-height: 1.35;
    /* Never let the strip stretch a board row's height calculation: the row
       heights feed the scanner's cell geometry. */
    box-sizing: border-box;
}

.visibility-consent-strip__text {
    color: var(--text-secondary, #475569);
    flex: 1 1 180px;
    min-width: 0;
}

.visibility-consent-strip__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.visibility-consent-strip__btn {
    appearance: none;
    border: 1px solid var(--border-subtle, rgba(100, 116, 139, 0.3));
    background: var(--surface-primary, #ffffff);
    color: var(--text-primary, #0f172a);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.visibility-consent-strip__btn:hover:not(:disabled) {
    border-color: var(--accent-teal, #14b8a6);
    background: var(--accent-teal-wash, rgba(20, 184, 166, 0.08));
}

.visibility-consent-strip__btn:focus-visible {
    outline: 2px solid var(--accent-teal, #14b8a6);
    outline-offset: 2px;
}

.visibility-consent-strip__btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* The FIRST button is the safe, already-in-force option ("Keep busy only").
   Weighting it teal makes the no-change path the obvious one, so a member who
   just wants the prompt gone lands on the private option rather than the
   revealing one. */
.visibility-consent-strip__btn[data-level="busy"] {
    border-color: var(--accent-teal, #14b8a6);
    color: var(--accent-teal-ink, #0f766e);
}

@media (prefers-color-scheme: dark) {
    .visibility-consent-strip {
        background: var(--surface-secondary, #1e293b);
    }
    .visibility-consent-strip__text {
        color: var(--text-secondary, #94a3b8);
    }
    .visibility-consent-strip__btn {
        background: var(--surface-tertiary, #334155);
        color: var(--text-primary, #e2e8f0);
    }
}

body.dark-mode .visibility-consent-strip {
    background: var(--surface-secondary, #1e293b);
}
body.dark-mode .visibility-consent-strip__text {
    color: var(--text-secondary, #94a3b8);
}
body.dark-mode .visibility-consent-strip__btn {
    background: var(--surface-tertiary, #334155);
    color: var(--text-primary, #e2e8f0);
}

@media (max-width: 640px) {
    .visibility-consent-strip {
        /* Stack on narrow screens so the three choices never squeeze the
           sentence into a one-word-per-line column. */
        flex-direction: column;
        align-items: flex-start;
    }
    .visibility-consent-strip__actions {
        width: 100%;
    }
}