/**
 * Report Share dialog — the withholding form shown before a report leaves the platform.
 *
 * Mounted through ModalOverlay, which appends to document.body. That is the whole reason
 * this file exists as a GLOBAL component stylesheet rather than a rule inside a page's
 * sheet: a modal parented to <body> is outside every page-scoped selector, so a rule
 * living in the reports view would never reach it.
 *
 * Structure emitted by report-share-dialog.js:
 *   .rsd-share
 *     .rsd-share__intro                  what sharing this document does
 *     .form-group  > .rsd-share__hint    recipients
 *     .rsd-share__rules                  the withholding checkboxes
 *       label.checkbox-label.rsd-share__rule
 *     .rsd-share__reason                 why (revealed once something is ticked)
 *     .rsd-share__status[.is-error]      live region for submit outcome
 *
 * Colours come from base.css tokens only, so dark mode is carried by the tokens.
 */

.rsd-share__intro {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Hints sit under the control they explain, so the gap belongs above, not below. */
.rsd-share__hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* The "nothing can be withheld" case is a stated outcome, not a missing section —
   give it the same presence as the rule list it replaces rather than letting it read
   as a stray caption. */
.rsd-share__hint[data-role="no-options"] {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 6px);
    color: var(--text-primary);
}

/* A report can express many rules; cap the list and scroll rather than pushing the
   dialog's own actions below the fold. */
.rsd-share__rules {
    margin-top: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 6px);
    background: var(--bg-secondary);
}

.rsd-share__rule {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
    border-radius: var(--radius-md, 6px);
}

.rsd-share__rule:hover {
    background: var(--bg-tertiary);
}

/* Labels come from customer templates and can be long — wrap, never clip, because a
   truncated rule label is a reader agreeing to withhold something they cannot read. */
.rsd-share__rule > span {
    overflow-wrap: anywhere;
}

.rsd-share__rule input[type="checkbox"] {
    margin: 2px 0 0;
    flex-shrink: 0;
}

/* Revealed only once a rule is ticked; `hidden` does the hiding, so this rule only has
   to describe the shown state. */
.rsd-share__reason {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

/* Empty until something is said. Kept out of the flow when empty so the form does not
   shift when a message arrives — the element is a live region and is always present. */
.rsd-share__status {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.rsd-share__status:empty {
    display: none;
}

.rsd-share__status.is-error {
    color: var(--danger-text-strong);
}

@media (max-width: 768px) {
    .rsd-share__rules {
        max-height: 40vh;
    }
}