/* ReefDudes Apex Code Creator Pro
   Styled to match the ReefDudes site visual system.
   Tokens are exposed on the wrapper so the component works inside or
   outside the Uncode child theme. */

.rdacc-app {
    /* Surfaces */
    --rd-bg:            #f5f9fd;
    --rd-bg-2:          #e8f0f9;
    --rd-panel:         #ffffff;
    --rd-panel-2:       #f4f8fc;

    /* Ink */
    --rd-text:          #1c3344;
    --rd-text-2:        #46586a;
    --rd-muted:         #7a8a96;
    --rd-border:        #d8e1eb;
    --rd-border-strong: #a8b6c4;

    /* Brand — sky blue */
    --rd-accent:            #3a8ee0;
    --rd-accent-hover:      #4ea0ea;
    --rd-accent-soft:       #e8f1fb;
    --rd-accent-text:       #1f5da0;
    --rd-accent-text-soft:  #1a4f8a;

    /* Brand — logo cyan */
    --rd-logo-cyan:           #3fb8c8;
    --rd-logo-cyan-hover:     #4ec8d6;
    --rd-logo-cyan-text:      #1f6a78;
    --rd-logo-cyan-text-soft: #175363;

    /* Accent of last resort */
    --rd-coral:         #ff7e62;
    --rd-coral-text:    #b04525;

    /* Semantic */
    --rd-good:          #2d8e6f;
    --rd-good-soft:     rgba(45, 142, 111, 0.14);
    --rd-good-text:     #1f6650;

    --rd-warn:          #c47a1c;
    --rd-warn-soft:     rgba(196, 122, 28, 0.14);
    --rd-warn-text:     #8a541a;

    --rd-error:         #c44a4a;
    --rd-error-soft:    rgba(196, 74, 74, 0.14);
    --rd-error-text:    #8a2d2d;

    /* Effects */
    --rd-focus-ring:    rgba(58, 142, 224, 0.30);
    --rd-shadow-card:   0 1px 2px rgba(28, 75, 130, 0.04),
                        0 8px 24px rgba(28, 75, 130, 0.06);
    --rd-shadow-card-hover: 0 2px 4px rgba(28, 75, 130, 0.06),
                            0 14px 36px rgba(28, 75, 130, 0.18);

    /* Easings */
    --rd-ease-out:      cubic-bezier(0.25, 1, 0.5, 1);
    --rd-ease-lift:     cubic-bezier(0.4, 0, 0.2, 1);

    /* Code surface — kept on-brand light */
    --rd-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

    color-scheme: light;
    box-sizing: border-box;
    color: var(--rd-text);
    background: transparent;
    font-family: inherit;
    line-height: 1.55;
    padding: 0;
    max-width: 1080px;
    margin: 0 auto;
}

.rdacc-app *,
.rdacc-app *::before,
.rdacc-app *::after {
    box-sizing: border-box;
}

.rdacc-app :focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rd-focus-ring);
    border-radius: 6px;
}

/* Respect motion preferences globally inside the component */
@media (prefers-reduced-motion: reduce) {
    .rdacc-app *,
    .rdacc-app *::before,
    .rdacc-app *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------- warning bands --------------------------- */

.rdacc-warning {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.55;
    border: 1px solid transparent;
}

.rdacc-warning ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

.rdacc-warning li { margin-bottom: 3px; }

.rdacc-warning--critical {
    background: var(--rd-error-soft);
    color: var(--rd-error-text);
    border-color: rgba(196, 74, 74, 0.45);
    border-left: 4px solid var(--rd-error);
}

.rdacc-warning--medium {
    background: var(--rd-warn-soft);
    color: var(--rd-warn-text);
    border-color: rgba(196, 122, 28, 0.45);
    border-left: 4px solid var(--rd-warn);
}

.rdacc-warning--suggest {
    background: var(--rd-good-soft);
    color: var(--rd-good-text);
    border-color: rgba(45, 142, 111, 0.45);
    border-left: 4px solid var(--rd-good);
}

.rdacc-warning--info {
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
    border-color: rgba(58, 142, 224, 0.32);
    border-left: 4px solid var(--rd-accent);
}

/* --------------------------- mode bar (top-level segmented control) --------------------------- */

.rdacc-modes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--rd-panel);
    border: 1px solid var(--rd-border);
    border-radius: 999px;
    padding: 4px;
    margin: 0 0 clamp(10px, 2vw, 14px);
    box-shadow: var(--rd-shadow-card);
}

.rdacc-mode {
    background: transparent;
    color: var(--rd-text-2);
    border: 0;
    border-radius: 999px;
    padding: 8px 18px;
    min-height: 36px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 140ms var(--rd-ease-lift),
                color 140ms var(--rd-ease-lift);
}

.rdacc-mode:hover {
    color: var(--rd-accent-text);
}

.rdacc-mode.is-active {
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
}

/* --------------------------- tabs (sub-nav for active mode) --------------------------- */

.rdacc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: clamp(14px, 2.2vw, 20px);
}

.rdacc-tab[hidden] { display: none; }

.rdacc-tab {
    flex: 1 1 auto;
    min-width: 130px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--rd-border);
    background: var(--rd-panel);
    color: var(--rd-text);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    transition: background 140ms var(--rd-ease-lift),
                color 140ms var(--rd-ease-lift),
                border-color 140ms var(--rd-ease-lift),
                box-shadow 140ms var(--rd-ease-lift),
                transform 140ms var(--rd-ease-lift);
}

.rdacc-tab:hover {
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
    border-color: rgba(58, 142, 224, 0.32);
}

.rdacc-tab:active { transform: translateY(1px); }

.rdacc-tab.is-active {
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
    border-color: rgba(58, 142, 224, 0.32);
    box-shadow: inset 0 -3px 0 var(--rd-accent);
}

/* --------------------------- main / cards --------------------------- */

.rdacc-main { margin-bottom: clamp(14px, 2.2vw, 20px); }

.rdacc-section { display: none; }
.rdacc-section.is-active { display: block; }

.rdacc-card {
    background: var(--rd-panel);
    border: 1px solid var(--rd-border);
    border-radius: 14px;
    padding: clamp(20px, 3vw, 32px);
    box-shadow: var(--rd-shadow-card);
}

.rdacc-card h3 {
    margin: 0 0 8px;
    color: var(--rd-text);
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 800;
}

.rdacc-help {
    color: var(--rd-text-2);
    font-size: 0.96rem;
    line-height: 1.55;
    margin: 0 0 clamp(14px, 2.2vw, 20px);
    max-width: 65ch;
}

.rdacc-help code {
    font-family: var(--rd-mono);
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
    border: 1px solid rgba(58, 142, 224, 0.32);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.92em;
    font-variant-numeric: tabular-nums;
}

/* --------------------------- inputs / fields --------------------------- */

.rdacc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(12px, 2vw, 18px);
    margin-bottom: clamp(14px, 2.2vw, 20px);
}

@media (min-width: 600px) { .rdacc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .rdacc-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Quick Generator basics row keeps to 2 cols max so equipment + outlet
   stay balanced and the full-width scenarios row sits cleanly underneath. */
@media (min-width: 900px) {
    .rdacc-grid--quick { grid-template-columns: 1fr 1fr; }
}

/* --------------------------- "More options" disclosure (Quick) --------------------------- */

.rdacc-quick-more {
    background: var(--rd-panel-2);
    border: 1px solid var(--rd-border);
    border-radius: 12px;
    padding: 0;
    margin: 0 0 clamp(14px, 2.2vw, 20px);
    overflow: hidden;
}

.rdacc-quick-more[hidden] { display: none; }

.rdacc-quick-more > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    min-height: 44px;
    color: var(--rd-accent-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 12px;
    transition: background 140ms var(--rd-ease-lift);
}

.rdacc-quick-more > summary::-webkit-details-marker { display: none; }

.rdacc-quick-more > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--rd-accent-text);
    border-bottom: 2px solid var(--rd-accent-text);
    transform: rotate(-45deg);
    transition: transform 140ms var(--rd-ease-lift);
}

.rdacc-quick-more[open] > summary::before {
    transform: rotate(45deg);
}

.rdacc-quick-more > summary:hover {
    background: var(--rd-accent-soft);
}

.rdacc-quick-more-label {
    flex: 0 0 auto;
}

.rdacc-quick-more-hint {
    margin-left: auto;
    color: var(--rd-text-2);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: right;
}

.rdacc-quick-more-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(12px, 2vw, 18px);
    padding: 4px 16px 16px;
}

@media (min-width: 600px) { .rdacc-quick-more-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .rdacc-quick-more-grid { grid-template-columns: 1fr 1fr 1fr; } }

.rdacc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.92rem;
}

.rdacc-field > span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--rd-text);
    font-size: 0.88rem;
}

/* Multi-scenario stack — spans the full grid row so rows have room */
.rdacc-field--scenarios {
    grid-column: 1 / -1;
}

.rdacc-scenarios {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rdacc-scenario-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.rdacc-scenario-row .rdacc-scenario-select {
    flex: 1 1 auto;
    min-width: 0;
}

.rdacc-scenario-remove {
    flex: 0 0 auto;
    min-width: 44px;
    padding: 0 12px;
    font-size: 1.25rem;
    line-height: 1;
}

.rdacc-add-scenario {
    align-self: flex-start;
    margin-top: 4px;
}

.rdacc-add-scenario .rdacc-add-scenario-plus {
    display: inline-block;
    margin-right: 4px;
    font-weight: 700;
    color: var(--rd-accent-text);
}

.rdacc-add-scenario:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.rdacc-app input[type="text"],
.rdacc-app input[type="number"],
.rdacc-app input[type="search"],
.rdacc-app textarea,
.rdacc-app select {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    background: var(--rd-bg);
    color: var(--rd-text);
    transition: border-color 140ms var(--rd-ease-lift),
                box-shadow 140ms var(--rd-ease-lift),
                background 140ms var(--rd-ease-lift);
}

.rdacc-app textarea {
    font-family: var(--rd-mono);
    font-size: 0.94rem;
    line-height: 1.55;
    resize: vertical;
    font-variant-numeric: tabular-nums;
    min-height: 140px;
}

.rdacc-app select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a8a96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

.rdacc-app input:hover,
.rdacc-app textarea:hover,
.rdacc-app select:hover {
    border-color: var(--rd-border-strong);
    background: var(--rd-panel);
}

.rdacc-app input:focus,
.rdacc-app textarea:focus,
.rdacc-app select:focus {
    outline: none;
    border-color: var(--rd-accent);
    background: var(--rd-panel);
    box-shadow: 0 0 0 3px var(--rd-focus-ring);
}

.rdacc-app option {
    background: var(--rd-panel);
    color: var(--rd-text);
}

.rdacc-app option:checked {
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
}

.rdacc-app optgroup {
    background: var(--rd-bg-2);
    color: var(--rd-accent-text);
    font-weight: 600;
}

.rdacc-app input[type="checkbox"] {
    accent-color: var(--rd-accent);
    width: 18px;
    height: 18px;
}

/* Tip popover (tap-toggle) */
.rdacc-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
    border: 1px solid rgba(58, 142, 224, 0.32);
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: help;
    user-select: none;
    transition: background 140ms var(--rd-ease-lift),
                color 140ms var(--rd-ease-lift),
                border-color 140ms var(--rd-ease-lift);
}

.rdacc-tip:hover,
.rdacc-tip.is-open {
    background: var(--rd-accent);
    color: #ffffff;
    border-color: var(--rd-accent);
}

.rdacc-tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    background: var(--rd-text);
    color: #ffffff;
    padding: 7px 10px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    text-align: left;
    box-shadow: 0 6px 16px rgba(28, 75, 130, 0.20);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 140ms var(--rd-ease-out);
    z-index: 50;
}

.rdacc-tip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 3px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--rd-text);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 140ms var(--rd-ease-out);
    z-index: 50;
}

.rdacc-tip:hover::after,
.rdacc-tip:hover::before,
.rdacc-tip.is-open::after,
.rdacc-tip.is-open::before {
    opacity: 1;
    visibility: visible;
}

.rdacc-fieldset {
    border: 1px solid var(--rd-border);
    background: var(--rd-panel-2);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 clamp(14px, 2.2vw, 20px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    font-size: 0.92rem;
}

@media (min-width: 600px) { .rdacc-fieldset { grid-template-columns: repeat(3, 1fr); } }

.rdacc-fieldset legend {
    padding: 0 6px;
    font-weight: 700;
    color: var(--rd-accent-text);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rdacc-fieldset label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--rd-text);
    min-height: 28px;
}

.rdacc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(14px, 2.2vw, 20px);
}

.rdacc-toolbar select { flex: 1 1 200px; }

.rdacc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 clamp(14px, 2.2vw, 20px);
}

/* --------------------------- buttons --------------------------- */

.rdacc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: filter 140ms var(--rd-ease-lift),
                background 140ms var(--rd-ease-lift),
                color 140ms var(--rd-ease-lift),
                border-color 140ms var(--rd-ease-lift),
                transform 140ms var(--rd-ease-lift),
                box-shadow 140ms var(--rd-ease-lift);
}

.rdacc-btn:active { transform: translateY(1px); }

.rdacc-btn--primary,
.rdacc-btn--copy {
    background: var(--rd-accent);
    border-color: #2872c0;
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                0 2px 6px rgba(28, 75, 130, 0.18);
}

.rdacc-btn--primary:hover,
.rdacc-btn--copy:hover {
    background: var(--rd-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                0 4px 12px rgba(28, 75, 130, 0.24);
}

.rdacc-btn--secondary {
    background: var(--rd-panel);
    color: var(--rd-accent-text);
    border-color: var(--rd-border);
}

.rdacc-btn--secondary:hover {
    background: var(--rd-accent-soft);
    border-color: rgba(58, 142, 224, 0.32);
    color: var(--rd-accent-text-soft);
}

.rdacc-btn--small {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 0.86rem;
    font-weight: 600;
}

.rdacc-btn--danger {
    background: var(--rd-panel);
    color: var(--rd-error-text);
    border-color: rgba(196, 74, 74, 0.45);
}

.rdacc-btn--danger:hover {
    background: var(--rd-error-soft);
    border-color: var(--rd-error);
}

/* --------------------------- result panels (NOT cards — avoid card-in-card) --------------------------- */

.rdacc-output { margin-top: clamp(14px, 2.2vw, 20px); }

.rdacc-result {
    background: var(--rd-panel-2);
    border: 1px solid var(--rd-border);
    border-left: 4px solid var(--rd-accent);
    border-radius: 0 12px 12px 0;
    padding: clamp(14px, 2.2vw, 20px);
    margin-bottom: clamp(12px, 2vw, 18px);
}

.rdacc-result-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.rdacc-result-title {
    margin: 0;
    color: var(--rd-text);
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 700;
}

/* --------------------------- code surface --------------------------- */

.rdacc-code {
    background: var(--rd-panel);
    color: var(--rd-text);
    border: 1px solid var(--rd-border);
    font-family: var(--rd-mono);
    font-size: 0.92rem;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    padding: 14px 16px;
    border-radius: 10px;
    white-space: pre;
    overflow-x: auto;
    margin: 0 0 10px;
}

.rdacc-code .rdacc-kw      { color: var(--rd-accent-text); font-weight: 700; }
.rdacc-code .rdacc-action  { color: var(--rd-coral-text); font-weight: 700; }
.rdacc-code .rdacc-num     { color: var(--rd-logo-cyan-text); }
.rdacc-code .rdacc-comment { color: var(--rd-muted); font-style: italic; }

/* --------------------------- explanations --------------------------- */

.rdacc-explanations {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.rdacc-explanations li {
    border-left: 3px solid var(--rd-accent);
    padding: 8px 12px;
    margin-bottom: 6px;
    background: var(--rd-accent-soft);
    border-radius: 0 6px 6px 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--rd-accent-text);
}

.rdacc-explanations li code {
    font-family: var(--rd-mono);
    background: var(--rd-panel);
    border: 1px solid rgba(58, 142, 224, 0.32);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--rd-accent-text);
    font-size: 0.92em;
    font-variant-numeric: tabular-nums;
}

details {
    margin: 4px 0 8px;
}

details summary {
    cursor: pointer;
    color: var(--rd-accent-text);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 6px 0;
}

details summary:hover { color: var(--rd-accent-text-soft); }

/* --------------------------- logic builder blocks --------------------------- */

.rdacc-blocks {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.rdacc-block {
    background: var(--rd-panel);
    border: 1px solid var(--rd-border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rdacc-block-label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
    border: 1px solid rgba(58, 142, 224, 0.32);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rdacc-block input,
.rdacc-block select {
    flex: 1 1 100px;
    min-height: 38px;
    padding: 7px 10px;
    font-size: 0.92rem;
}

.rdacc-block-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.rdacc-block-actions .rdacc-btn--small {
    min-width: 44px;
    min-height: 44px;
    padding: 4px 10px;
    font-size: 1rem;
    line-height: 1;
}

.rdacc-block:focus-within {
    border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px var(--rd-focus-ring);
}

/* --------------------------- checklist / suggestions / related --------------------------- */

.rdacc-checklist {
    background: var(--rd-accent-soft);
    border: 1px solid rgba(58, 142, 224, 0.32);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 12px;
    font-size: 0.92rem;
    color: var(--rd-accent-text);
}

.rdacc-checklist h4 {
    margin: 0 0 6px;
    color: var(--rd-accent-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rdacc-checklist ol {
    margin: 0;
    padding-left: 22px;
}

.rdacc-checklist li {
    margin-bottom: 4px;
    color: var(--rd-text);
}

.rdacc-suggestions { margin-top: 8px; }

.rdacc-suggestion {
    background: var(--rd-good-soft);
    border-left: 4px solid var(--rd-good);
    border-top: 1px solid rgba(45, 142, 111, 0.45);
    border-right: 1px solid rgba(45, 142, 111, 0.45);
    border-bottom: 1px solid rgba(45, 142, 111, 0.45);
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 6px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--rd-good-text);
}

.rdacc-related {
    background: var(--rd-panel);
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 8px;
    font-size: 0.92rem;
}

.rdacc-related h5 {
    margin: 0 0 6px;
    color: var(--rd-accent-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rdacc-related pre {
    margin: 4px 0 8px;
    font-family: var(--rd-mono);
    font-size: 0.9rem;
    color: var(--rd-text);
    background: var(--rd-bg);
    border: 1px solid var(--rd-border);
    padding: 8px 12px;
    border-radius: 8px;
    white-space: pre-wrap;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

.rdacc-related pre:last-child { margin-bottom: 0; }

/* --------------------------- timeline --------------------------- */

.rdacc-timeline {
    display: flex;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    overflow: hidden;
    margin: 12px 0;
    font-size: 0.78rem;
    min-height: 32px;
    font-variant-numeric: tabular-nums;
}

.rdacc-timeline-seg {
    flex: 1 1 0;
    padding: 8px 4px;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    border-right: 1px solid rgba(255, 255, 255, 0.30);
    min-width: 44px;
    letter-spacing: 0.04em;
}

.rdacc-timeline-seg:last-child { border-right: 0; }
.rdacc-timeline-seg.off { background: var(--rd-muted); }
.rdacc-timeline-seg.on  { background: var(--rd-accent); }

/* --------------------------- preset library --------------------------- */

.rdacc-preset-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: clamp(14px, 2.2vw, 20px);
}

@media (min-width: 700px) {
    .rdacc-preset-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.rdacc-field--inline {
    flex: 1 1 240px;
    margin: 0;
}

.rdacc-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rdacc-chip {
    border: 1px solid var(--rd-border);
    background: var(--rd-panel);
    color: var(--rd-text);
    padding: 8px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 36px;
    transition: background 140ms var(--rd-ease-lift),
                color 140ms var(--rd-ease-lift),
                border-color 140ms var(--rd-ease-lift);
}

.rdacc-chip:hover {
    background: var(--rd-accent-soft);
    border-color: rgba(58, 142, 224, 0.32);
    color: var(--rd-accent-text);
}

.rdacc-chip.is-active {
    background: var(--rd-accent);
    border-color: var(--rd-accent);
    color: #ffffff;
}

.rdacc-empty-state {
    text-align: center;
    color: var(--rd-text-2);
    font-size: 0.96rem;
    padding: 24px 12px;
    background: var(--rd-panel-2);
    border: 1px dashed var(--rd-border);
    border-radius: 12px;
    margin: 0 0 12px;
}

.rdacc-preset-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(10px, 2vw, 14px);
    margin-bottom: clamp(10px, 2vw, 14px);
}

@media (min-width: 700px)  { .rdacc-preset-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .rdacc-preset-grid { grid-template-columns: 1fr 1fr 1fr; } }

.rdacc-preset-card {
    border: 1px solid var(--rd-border);
    background: var(--rd-panel);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    box-shadow: var(--rd-shadow-card);
    transition: transform 180ms var(--rd-ease-lift),
                border-color 180ms var(--rd-ease-lift),
                box-shadow 180ms var(--rd-ease-lift);
}

.rdacc-preset-card:hover {
    border-color: var(--rd-accent);
    transform: translateY(-2px);
    box-shadow: var(--rd-shadow-card-hover);
}

.rdacc-preset-card:active { transform: translateY(0); }

.rdacc-preset-card h4 {
    margin: 0 0 6px;
    color: var(--rd-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.rdacc-preset-card p {
    margin: 0;
    color: var(--rd-text-2);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* --------------------------- scenario description --------------------------- */

.rdacc-scenario-desc {
    background: var(--rd-accent-soft);
    border: 1px solid rgba(58, 142, 224, 0.32);
    border-left: 4px solid var(--rd-accent);
    border-radius: 0 10px 10px 0;
    padding: 10px 14px;
    margin: 0 0 clamp(14px, 2.2vw, 20px);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--rd-accent-text);
    min-height: 22px;
}

.rdacc-scenario-desc:empty { display: none; }

.rdacc-field[hidden] { display: none; }

/* --------------------------- repeated safety band above copy --------------------------- */

.rdacc-result-warning {
    background: var(--rd-error-soft);
    color: var(--rd-error-text);
    border: 1px solid rgba(196, 74, 74, 0.45);
    border-left: 4px solid var(--rd-error);
    border-radius: 0 8px 8px 0;
    padding: 9px 12px;
    margin: 8px 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* --------------------------- result options row --------------------------- */

.rdacc-result-options {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 8px 0 10px;
    font-size: 0.88rem;
    color: var(--rd-text-2);
}

.rdacc-result-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    min-height: 28px;
}

/* --------------------------- sticky mini-TOC --------------------------- */

.rdacc-toc {
    position: sticky;
    top: 8px;
    z-index: 5;
    background: var(--rd-panel);
    border: 1px solid rgba(58, 142, 224, 0.32);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 0 clamp(12px, 2vw, 18px);
    box-shadow: var(--rd-shadow-card);
}

.rdacc-toc-title {
    display: inline-block;
    margin-right: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rd-accent-text);
}

.rdacc-toc-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.rdacc-toc-list a {
    display: inline-block;
    padding: 5px 12px;
    background: var(--rd-accent-soft);
    color: var(--rd-accent-text);
    border: 1px solid rgba(58, 142, 224, 0.32);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    transition: background 140ms var(--rd-ease-lift),
                color 140ms var(--rd-ease-lift);
}

.rdacc-toc-list a:hover {
    background: var(--rd-accent);
    color: #ffffff;
}

/* --------------------------- profile bulk actions --------------------------- */

.rdacc-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 clamp(12px, 2vw, 18px);
}

.rdacc-result[id] { scroll-margin-top: 64px; }

/* --------------------------- simulator state --------------------------- */

.rdacc-sim-state {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    background: var(--rd-panel);
    border: 1px solid var(--rd-border);
    padding: 12px 14px;
    border-radius: 10px;
    margin: 8px 0;
    font-size: 0.9rem;
    font-family: var(--rd-mono);
    font-variant-numeric: tabular-nums;
}

.rdacc-sim-state .key { color: var(--rd-text); font-weight: 600; }
.rdacc-sim-state .val.on  { color: var(--rd-good-text); font-weight: 700; }
.rdacc-sim-state .val.off { color: var(--rd-error-text); font-weight: 700; }

/* --------------------------- footer --------------------------- */

.rdacc-footer {
    margin-top: clamp(16px, 2.5vw, 24px);
    padding-top: 14px;
    border-top: 1px solid var(--rd-border);
    text-align: center;
    color: var(--rd-text-2);
    font-size: 0.86rem;
    line-height: 1.55;
}

.rdacc-disclaimer {
    margin: 0 0 6px;
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------- toast --------------------------- */

.rdacc-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--rd-accent);
    color: #ffffff;
    padding: 12px 20px;
    border: 1px solid #2872c0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                0 4px 14px rgba(28, 75, 130, 0.22);
    animation: rdacc-toast-fade 1.9s var(--rd-ease-out) forwards;
    pointer-events: none;
}

@keyframes rdacc-toast-fade {
    0%   { opacity: 0; transform: translate(-50%, 8px); }
    15%  { opacity: 1; transform: translate(-50%, 0); }
    80%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -6px); }
}

@media (prefers-reduced-motion: reduce) {
    .rdacc-toast { animation: none; }
}

/* --------------------------- product slot (future affiliate) --------------------------- */

.rdacc-product-slot { margin-top: 8px; }
.rdacc-product-slot:empty { display: none; }

/* --------------------------- accessibility utility --------------------------- */

.rdacc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}