/* ============================================
   Collection notice (decision M13)
   The notice shown before a child's profile is created: in the parent's
   add-child form and the school's add-student and CSV forms. Filled by
   js/collection-notice.js. All classes use the rb- prefix; colours come from
   design-system.css tokens, with the same values as fallbacks.
   ============================================ */

.rb-collection-notice {
    margin: 0 0 1.5rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--rb-card-border, rgba(0, 0, 0, 0.06));
    border-left: 4px solid var(--rb-purple, #9333ea);
    border-radius: var(--rb-radius-md, 12px);
    background: var(--rb-bg-warm, #fff7ed);
    color: var(--rb-text-dark, #1f2937);
    font-family: var(--rb-font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    text-align: left;
}

.rb-collection-notice .rb-collection-notice-title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rb-text-dark, #1f2937);
}

.rb-collection-notice .rb-collection-notice-lead,
.rb-collection-notice .rb-collection-notice-summary,
.rb-collection-notice .rb-collection-notice-status {
    margin: 0 0 0.625rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.rb-collection-notice .rb-collection-notice-status-error {
    color: #b91c1c;
    font-weight: 600;
}

/* Always in the page, so it is announced; empty, it takes no space. */
.rb-collection-notice .rb-collection-notice-status:empty {
    margin: 0;
}

.rb-collection-notice .rb-collection-notice-retry {
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--rb-purple, #9333ea);
    border-radius: var(--rb-radius-sm, 8px);
    background: transparent;
    color: var(--rb-purple, #9333ea);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.rb-collection-notice .rb-collection-notice-retry:hover {
    background: rgba(147, 51, 234, 0.08);
}

.rb-collection-notice .rb-collection-notice-retry:focus-visible,
.rb-collection-notice .rb-collection-notice-title:focus-visible {
    outline: 2px solid var(--rb-purple-light, #8b5cf6);
    outline-offset: 2px;
}

.rb-collection-notice .rb-collection-notice-body {
    max-height: 18rem;
    overflow-y: auto;
    margin: 0 0 0.75rem;
}

.rb-collection-notice .rb-collection-notice-points {
    margin: 0 0 0.625rem;
    padding: 0 0 0 1.25rem;
    list-style: disc;
}

.rb-collection-notice .rb-collection-notice-points li {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.rb-collection-notice .rb-collection-notice-points li:last-child {
    margin-bottom: 0;
}

.rb-collection-notice .rb-collection-notice-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    font-size: 0.875rem;
}

.rb-collection-notice a {
    color: var(--rb-purple, #9333ea);
    font-weight: 600;
    text-decoration: underline;
}

.rb-collection-notice a:focus-visible,
.rb-collection-notice .rb-collection-notice-consent input:focus-visible {
    outline: 2px solid var(--rb-purple-light, #8b5cf6);
    outline-offset: 2px;
    border-radius: 4px;
}

.rb-collection-notice .rb-collection-notice-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rb-card-border, rgba(0, 0, 0, 0.06));
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
}

.rb-collection-notice .rb-collection-notice-consent input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
}

[data-theme="dark"] .rb-collection-notice {
    background: #1e1b2e;
    border-color: rgba(255, 255, 255, 0.08);
    border-left-color: #a78bfa;
}

[data-theme="dark"] .rb-collection-notice a,
[data-theme="dark"] .rb-collection-notice .rb-collection-notice-retry {
    color: #a78bfa;
    border-color: #a78bfa;
}

[data-theme="dark"] .rb-collection-notice .rb-collection-notice-status-error {
    color: #fca5a5;
}

/* The sign-in dialog about a child's profile (js/profile-setup-notice.js): told
   about a profile a school or our team set up, asked about a child with no
   consent on record. The dialog itself uses the policy change notice's classes;
   these are its extra parts. */
.rb-policy-notice .rb-profile-notice-intro {
    margin: 0 0 0.25rem;
}

.rb-policy-notice .rb-profile-notice-child + .rb-profile-notice-child {
    margin-top: 0.75rem;
}

.rb-policy-notice .rb-profile-notice-child-name {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--rb-text-dark, #1f2937);
}

.rb-policy-notice .rb-profile-notice-subtitle {
    margin: 1rem 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rb-text-dark, #1f2937);
}

.rb-policy-notice.rb-profile-notice .rb-policy-notice-link {
    margin-bottom: 0.5rem;
}

.rb-policy-notice .rb-profile-notice-hint {
    margin: 1rem 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--rb-text-muted, #4b5563);
}

.rb-policy-notice .rb-profile-notice-consent,
.rb-policy-notice .rb-profile-notice-offer {
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid var(--rb-card-border, rgba(0, 0, 0, 0.12));
    border-left: 4px solid var(--rb-purple, #9333ea);
    border-radius: var(--rb-radius-md, 12px);
}

.rb-policy-notice .rb-profile-notice-consent legend,
.rb-policy-notice .rb-profile-notice-offer legend {
    padding: 0 0.35rem;
    font-weight: 700;
    color: var(--rb-text-dark, #1f2937);
}

.rb-policy-notice .rb-profile-notice-agree-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
}

.rb-policy-notice .rb-profile-notice-agree-row label {
    cursor: pointer;
}

.rb-policy-notice .rb-profile-notice-agree-row input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
}

.rb-policy-notice .rb-profile-notice-remove,
.rb-policy-notice .rb-profile-notice-remove-no {
    margin-top: 0.75rem;
    min-height: 44px;
    padding: 0.5rem 0;
    border: none;
    background: none;
    color: var(--rb-purple, #9333ea);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.rb-policy-notice .rb-profile-notice-remove-confirm {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rb-radius-md, 12px);
    background: var(--rb-warm-bg, #fff7ed);
}

.rb-policy-notice .rb-profile-notice-remove-confirm p {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.rb-policy-notice .rb-profile-notice-remove-yes,
.rb-policy-notice .rb-profile-notice-later {
    min-height: 44px;
    margin-right: 0.75rem;
    padding: 0.5rem 1.25rem;
    border: 2px solid currentColor;
    border-radius: var(--rb-radius-md, 12px);
    background: transparent;
    color: var(--rb-text-dark, #1f2937);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.rb-policy-notice .rb-profile-notice-remove-yes {
    color: #b91c1c;
}

.rb-policy-notice .rb-profile-notice-removed {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.rb-policy-notice .rb-profile-notice-status {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.rb-policy-notice .rb-profile-notice-status:empty {
    margin: 0;
}

.rb-policy-notice .rb-profile-notice-status-error {
    color: #b91c1c;
    font-weight: 600;
}

.rb-policy-notice .rb-profile-notice-remove:focus-visible,
.rb-policy-notice .rb-profile-notice-remove-no:focus-visible,
.rb-policy-notice .rb-profile-notice-remove-yes:focus-visible,
.rb-policy-notice .rb-profile-notice-later:focus-visible,
.rb-policy-notice .rb-profile-notice-agree-row input:focus-visible {
    outline: 2px solid var(--rb-purple-light, #8b5cf6);
    outline-offset: 2px;
}

.rb-policy-notice.rb-profile-notice .rb-policy-notice-actions {
    margin-top: 1.25rem;
    align-items: center;
}

[data-theme="dark"] .rb-policy-notice .rb-profile-notice-child-name,
[data-theme="dark"] .rb-policy-notice .rb-profile-notice-subtitle,
[data-theme="dark"] .rb-policy-notice .rb-profile-notice-consent legend,
[data-theme="dark"] .rb-policy-notice .rb-profile-notice-offer legend,
[data-theme="dark"] .rb-policy-notice .rb-profile-notice-later {
    color: #f3f4f6;
}

[data-theme="dark"] .rb-policy-notice .rb-profile-notice-hint {
    color: #d1d5db;
}

[data-theme="dark"] .rb-policy-notice .rb-profile-notice-consent,
[data-theme="dark"] .rb-policy-notice .rb-profile-notice-offer {
    border-color: rgba(255, 255, 255, 0.12);
    border-left-color: #a78bfa;
}

[data-theme="dark"] .rb-policy-notice .rb-profile-notice-remove,
[data-theme="dark"] .rb-policy-notice .rb-profile-notice-remove-no {
    color: #a78bfa;
}

[data-theme="dark"] .rb-policy-notice .rb-profile-notice-remove-confirm {
    background: #2a2540;
}

[data-theme="dark"] .rb-policy-notice .rb-profile-notice-remove-yes,
[data-theme="dark"] .rb-policy-notice .rb-profile-notice-status-error {
    color: #fca5a5;
}

/* The public page's version line (collection-notice.html). */
.rb-collection-notice .rb-collection-notice-version {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--rb-text-muted, #6b7280);
}

/* While the condition use gate holds a child's conditions back (owner decision
   1, 3 October 2026): the line on the parent's adaptations panel and Roo card,
   with its "Review the notice" button (js/profile-setup-notice.js pausedLine). */
.rb-condition-use-paused {
    margin: 0 0 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--rb-card-border, rgba(0, 0, 0, 0.06));
    border-left: 4px solid var(--rb-orange, #f97316);
    border-radius: var(--rb-radius-md, 12px);
    background: var(--rb-bg-warm, #fff7ed);
    color: var(--rb-text-dark, #1f2937);
    font-size: 0.9rem;
    line-height: 1.45;
}

.rb-condition-use-paused .rb-condition-use-paused-text {
    margin: 0 0 0.5rem;
}

.rb-condition-use-paused .rb-condition-use-review {
    min-height: 44px;
    cursor: pointer;
}

[data-theme="dark"] .rb-condition-use-paused {
    background: #2a2540;
    border-color: rgba(255, 255, 255, 0.12);
    border-left-color: #fb923c;
    color: #f3f4f6;
}