@import url('design-tokens.css');

/* Accessibility utilities */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }

/* Utility classes */
.full-width { width: 100%; }

/* The public stylesheet also defines questionnaire-intro for the marketing
   surface. Keep the authenticated app variant readable on Radzen's dark theme. */
.app-shell .questionnaire-intro {
    border-left-color: var(--color-primary);
    background: rgba(59, 130, 246, .14);
    color: var(--color-text);
}

.app-shell .questionnaire-intro strong {
    color: #f1f5f9;
}

.app-shell .questionnaire-intro span {
    color: #d1d5db;
    opacity: 1;
}

.app-shell .rz-steps .rz-steps-title {
    color: #9bb8ff;
}

/* Marketplace and billing pages use the public stylesheet inside the dark app shell. */
.app-shell .mp-header__title,
.app-shell .billing-header__title {
    color: #f1f5f9;
}

.app-shell .mp-header__lead,
.app-shell .billing-header__lead {
    color: #cbd5e1;
}

.app-shell .billing-card__title {
    color: #17312e;
}

.app-shell .pub-input {
    color: #1f2933;
    background-color: #fff;
    border-color: #64748b;
}

.app-shell .pub-input::placeholder {
    color: #475569;
    opacity: 1;
}

.app-shell .live-session__pet {
    background: #fff;
}

.app-shell .live-session__pet small,
.app-shell .live-session__pet span {
    color: #52645f;
    opacity: 1;
}

.app-shell .live-session__pet strong {
    color: #17312e;
}

.app-shell .live-session__back {
    border: 0;
    background: transparent;
}

.app-shell .mood-translator__eyebrow {
    color: #6ee7d8;
}

.app-shell .mood-translator__hero > p {
    color: #cbd5e1;
    opacity: 1;
}

.app-shell .rz-text[style*="rz-text-disabled-color"] {
    color: #cbd5e1 !important;
}

.app-shell .rz-button:disabled {
    color: #475569 !important;
    opacity: 1;
}

.app-shell .rz-profile-menu .rz-navigation-item.rz-state-highlight,
.app-shell .rz-profile-menu .rz-navigation-item:hover,
.app-shell .rz-profile-menu .rz-navigation-item:focus,
.app-shell .rz-profile-menu .rz-navigation-item.rz-state-highlight > span,
.app-shell .rz-profile-menu .rz-navigation-item:hover > span,
.app-shell .rz-profile-menu .rz-navigation-item:focus > span {
    color: #f8fafc !important;
}

.app-shell .question-card__question {
    color: var(--color-text);
}

.app-shell .answer-pill {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.app-shell .answer-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.app-shell .answer-pill--selected {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.app-shell .question-card ::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

/* Button base (will be extended later) */
.va-button { font: inherit; cursor: pointer; border:1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); padding: 0.5rem 1rem; border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.va-button:hover { background: var(--color-bg-alt); }
.va-button:disabled { opacity: .55; cursor:not-allowed; }

.va-button.primary { background: var(--color-primary); border-color: var(--color-primary); color:#fff; }
.va-button.primary:hover { background: var(--color-primary-hover); }
.va-button.danger { background: var(--color-danger); border-color: var(--color-danger); color:#fff; }
.va-button.danger:hover { background: var(--color-danger-hover); }

/* Sizes */
.va-button.xs { padding: 0.25rem 0.5rem; font-size: var(--font-size-xs); }
.va-button.sm { padding: 0.375rem 0.75rem; font-size: var(--font-size-sm); }
.va-button.lg { padding: 0.75rem 1.25rem; font-size: var(--font-size-lg); }

.va-button.full-width { width: 100%; }

/* Loading state */
.va-button.loading { position:relative; }
.va-button.loading::after { content:""; position:absolute; right:0.5rem; top:50%; width:14px; height:14px; margin-top:-7px; border:2px solid rgba(255,255,255,0.6); border-top-color:#fff; border-radius:50%; animation: spin 0.8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.filters-wrap { flex-wrap: wrap; }
.filter-input, .filter-select { min-width: 200px; flex: 1; }

.progress-bar { flex-wrap: wrap; }
@media (max-width: 768px) { .progress-bar { flex-direction: column !important; gap: var(--space-3) !important; } }

/* Interview media + reward gate */
.media-analysis-note, .summary-contract {
    display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem;
    border: 1px solid rgba(14, 122, 112, .22); border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 122, 112, .09), rgba(229, 156, 116, .10));
}
.media-analysis-note__icon, .summary-contract__mark { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #0e7a70; color: #fff; font-weight: 800; }
.media-analysis-note strong, .media-analysis-note span, .summary-contract strong, .summary-contract span { display: block; }
.media-analysis-note span, .summary-contract span { margin-top: .2rem; color: var(--color-text-muted); font-size: .9rem; line-height: 1.45; }
.media-file-name { display: inline-block; margin-right: .4rem; padding: .18rem .4rem; border-radius: 5px; background: rgba(14, 122, 112, .12); color: #0e7a70; font-size: .68rem; font-weight: 800; letter-spacing: .06em; }
.reward-ad-backdrop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1.25rem; background: rgba(18, 31, 39, .68); backdrop-filter: blur(10px); animation: reward-fade-in .22s ease-out; }
.reward-ad-card { width: min(100%, 560px); overflow: hidden; padding: 1.65rem; border: 1px solid rgba(255,255,255,.55); border-radius: 26px; color: #17323a; background: #fffaf3; box-shadow: 0 30px 100px rgba(0,0,0,.32); }
.reward-ad-card__topline { display: flex; justify-content: space-between; color: #6f817f; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.reward-ad-card__visual { position: relative; display: grid; place-items: center; height: 126px; margin: 1rem 0 1.2rem; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 48% 45%, #f9c79b 0, #f0a276 24%, #0e7a70 25%, #123e49 100%); }
.reward-ad-card__visual span { z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: #fffaf3; background: #17323a; font-size: 1.8rem; transform: rotate(-8deg); }
.reward-ad-card__visual i { position: absolute; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; }
.reward-ad-card__visual i:nth-child(2) { width: 240px; height: 240px; }.reward-ad-card__visual i:nth-child(3) { width: 310px; height: 310px; }
.reward-ad-card__eyebrow { margin: 0 0 .45rem; color: #0e7a70; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reward-ad-card h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.55rem, 4vw, 2.15rem); line-height: 1.08; }
.reward-ad-card__copy { margin: .85rem 0 1.2rem; color: #526365; line-height: 1.55; }
.reward-ad-progress { height: 7px; overflow: hidden; border-radius: 99px; background: #e5e0d7; }.reward-ad-progress__bar { height: 100%; border-radius: inherit; background: #e2764b; transition: width .35s ease; }
.reward-ad-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; color: #687978; font-size: .9rem; }.reward-ad-card__footer strong { color: #17323a; }.reward-ad-ready { color: #16805f; font-weight: 700; }
.reward-ad-card small { display: block; margin-top: 1.15rem; color: #84908d; font-size: .72rem; line-height: 1.4; }
@keyframes reward-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) { .reward-ad-card { padding: 1.15rem; border-radius: 20px; }.reward-ad-card__footer { align-items: stretch; flex-direction: column; }.reward-ad-card__footer .rz-button { width: 100%; } }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }.report-grid--wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.report-tile { min-height: 106px; padding: 1rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }.report-tile--accent { border-color: rgba(14,122,112,.28); background: linear-gradient(135deg, rgba(14,122,112,.08), rgba(255,255,255,.18)); }.report-tile__label, .report-kicker { display: block; color: #0e7a70; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.report-tile strong { display: block; margin-top: .45rem; line-height: 1.45; }.report-tile small { display: block; margin-top: .45rem; color: var(--color-text-muted); line-height: 1.4; }
.report-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.report-disclaimer { padding: .35rem .6rem; border-radius: 99px; color: #8b5a12; background: #fff4d8; font-size: .72rem; font-weight: 700; }.report-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }.report-columns h3 { margin: 0 0 .55rem; font-size: 1rem; }.report-columns ul { margin: 0; padding-left: 1.15rem; color: var(--color-text-muted); line-height: 1.55; }.report-columns li + li { margin-top: .45rem; }.report-warning { padding: 1rem; border-left: 4px solid #e2764b; border-radius: 10px; color: #744222; background: #fff3e7; line-height: 1.5; }.report-technical summary { cursor: pointer; color: var(--color-text-muted); font-size: .85rem; }.report-json { max-height: 360px; margin: 0; overflow: auto; white-space: pre-wrap; font: .78rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.answer-locked-card { display: flex; align-items: flex-start; gap: 1rem; border: 1px solid rgba(226,118,75,.35); background: linear-gradient(135deg, #fff9f2, #f4eee4); }.answer-locked-card__icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: #e2764b; font-size: 1.5rem; }.answer-locked-card h2 { margin: .2rem 0 .45rem; font-family: Georgia, serif; font-size: 1.45rem; }.answer-locked-card p { margin: 0 0 .9rem; color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 700px) { .report-grid, .report-grid--wide, .report-columns { grid-template-columns: 1fr; }.report-heading { flex-direction: column; }.answer-locked-card { flex-direction: column; } }

/* Preference Studio: calm, grouped settings instead of a technical form. */
.settings-studio { max-width: 1080px; margin: 0 auto; padding: clamp(1rem, 2.5vw, 2rem); border-radius: 24px; color: #17323a; background: #f7f8f4; }
.settings-studio__hero { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding: .5rem 0 2.25rem; }
.settings-studio__eyebrow { display:block; margin-bottom:.65rem; color:#08645b; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.settings-studio .settings-studio__hero h1 { margin:0; color:#17323a; font-family:Fraunces, Georgia, serif; font-size:clamp(2.3rem, 5vw, 4.25rem); font-weight:500; letter-spacing:-.045em; line-height:.95; }
.settings-studio__hero p { max-width:42rem; margin:.9rem 0 0; color:#52625f; font-size:1rem; line-height:1.6; }
.settings-studio__status { padding:.48rem .75rem; border:1px solid #e9c987; border-radius:999px; color:#8b5a12; background:#fff7e6; font-size:.75rem; font-weight:800; white-space:nowrap; }
.settings-studio__form { display:grid; gap:1rem; }
.settings-studio__section, .settings-studio__actions { border:1px solid rgba(23,50,58,.12); border-radius:24px; background:rgba(255,252,247,.86); box-shadow:0 15px 45px rgba(23,50,58,.06); }
.settings-studio__section { padding:clamp(1.2rem, 3vw, 2rem); }
.settings-studio__section--wide { background:linear-gradient(135deg, #f2f7f2, #fffaf3 68%); }
.settings-studio__section-head { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.6rem; }
.settings-studio__number { display:grid; place-items:center; flex:0 0 2.25rem; width:2.25rem; height:2.25rem; border-radius:50%; color:#fffaf3; background:#0e7a70; font-size:.72rem; font-weight:800; letter-spacing:.04em; }
.settings-studio__section h2 { margin:.1rem 0 .3rem; font-family:Fraunces, Georgia, serif; font-size:1.65rem; font-weight:500; letter-spacing:-.025em; }
.settings-studio__section h2 { color:#17323a; }
.settings-studio__section p { margin:0; color:#52615f; font-size:.9rem; line-height:1.5; }
.settings-studio__grid { display:grid; grid-template-columns:1.25fr .75fr .75fr; gap:1rem; }
.settings-studio__field { display:flex; flex-direction:column; gap:.45rem; }
.settings-studio__field label { color:#2c4b4d; font-size:.78rem; font-weight:800; letter-spacing:.02em; }
.settings-studio__field small, .settings-studio__choice small { display:block; margin-top:.2rem; color:#566460; font-size:.76rem; line-height:1.45; }
.settings-studio__select { min-height:2.75rem; width:100%; border-color:rgba(23,50,58,.18); border-radius:12px; background:#fff; }
.settings-studio__choices { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.8rem; }
.settings-studio__choice { display:flex; align-items:flex-start; gap:.75rem; min-height:6.5rem; padding:1rem; border:1px solid rgba(23,50,58,.12); border-radius:16px; background:#fff; cursor:pointer; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.settings-studio__choice:hover { transform:translateY(-2px); border-color:rgba(14,122,112,.42); box-shadow:0 10px 24px rgba(23,50,58,.08); }
.settings-studio__choice strong { display:block; color:#244447; font-size:.87rem; }
.settings-studio__checkbox { flex:0 0 auto; width:1.2rem; height:1.2rem; margin:.1rem 0 0; accent-color:#0e6d63; cursor:pointer; }
.settings-studio__checkbox:focus-visible { outline:3px solid #17323a; outline-offset:3px; }
.settings-studio__actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; background:#17323a; color:#fffaf3; }
.settings-studio__actions strong, .settings-studio__actions span { display:block; }
.settings-studio__actions strong { font-family:Fraunces, Georgia, serif; font-size:1.1rem; font-weight:500; }
.settings-studio__actions span { margin-top:.25rem; color:#b9cfca; font-size:.78rem; }
.settings-studio__action-buttons { display:flex; align-items:center; gap:.55rem; }
.settings-studio__actions .rz-button { border-radius:999px; }
.settings-studio__actions .rz-button.rz-light { color:#17323a; }
.rz-button.rz-primary { color:#fff !important; background-color:#1d4ed8 !important; border-color:#1d4ed8 !important; }
.rz-button.rz-light { color:#1f2933 !important; background-color:#f1f5f9 !important; border-color:#cbd5e1 !important; }
.rz-dropdown-panel { color:#17323a !important; background:#fff !important; border-color:#cbd5d1; }
.rz-dropdown-panel .rz-dropdown-items-wrapper { color:#17323a !important; background:#fff !important; }
.rz-dropdown-panel .rz-dropdown-item,
.rz-dropdown-panel .rz-dropdown-item > span { color:#374151 !important; }
.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight,
.rz-dropdown-panel .rz-dropdown-item.rz-state-focused { color:#17323a !important; background:#e8f3f1 !important; }
/* Radzen renders some dropdown popups in a portal outside the panel element. */
html body .rz-dropdown-item,
html body .rz-dropdown-item > span,
html body li[aria-label="Log out"],
html body li[aria-label="Log out"] > span { color:#17323a !important; background-color:#fff !important; }
html body .rz-dropdown-item.rz-state-highlight,
html body .rz-dropdown-item.rz-state-focused,
html body li[aria-label="Log out"].rz-state-highlight,
html body li[aria-label="Log out"].rz-state-focused { color:#17323a !important; background-color:#e8f3f1 !important; }
/* Radzen's dark theme injects the user-menu options into a body-level portal.
   Give the active option its own light surface and readable text. */
html body .rz-dropdown-item[aria-label="Settings"] > span,
html body li[aria-label="Log out"] > span { color:#17323a !important; background-color:#e8f3f1 !important; }
@media (max-width: 820px) { .settings-studio__grid, .settings-studio__choices { grid-template-columns:1fr; }.settings-studio__hero, .settings-studio__actions { align-items:flex-start; flex-direction:column; }.settings-studio__action-buttons { flex-wrap:wrap; width:100%; }.settings-studio__action-buttons .rz-button { flex:1; } }
@media (prefers-reduced-motion: reduce) { .settings-studio__choice { transition:none; } }
.report-risk-note { display:block; max-width:42rem; margin-top:.4rem; color:var(--color-text-muted); font-size:.82rem; line-height:1.45; }