/* BRAINYTECH Clarity Suite — local CSS, no external assets */
:root {
    --bt-blue: #2020d8;
    --bt-green: #00d67a;
    --bt-cyan: #0e7cd0;
    --bt-violet: #6612d5;
    --bt-magenta: #d100d1;
    --bt-black: #000015;
    --bt-white: #FAFAFF;
    --bt-muted: #5f6272;
    --bt-border: rgba(0,0,21,.10);
    --bt-shadow: 0 24px 60px rgba(0,0,21,.08);
}

html { scroll-behavior: smooth; }

body {
    font-family: Verdana, Geneva, sans-serif;
    color: var(--bt-black);
    background:
        radial-gradient(circle at top left, rgba(32,32,216,.08), transparent 35rem),
        linear-gradient(180deg, #fff, var(--bt-white));
}

a { color: var(--bt-blue); }
a:hover { color: var(--bt-violet); }

.btn-primary {
    --bs-btn-bg: var(--bt-blue);
    --bs-btn-border-color: var(--bt-blue);
    --bs-btn-hover-bg: #1717a8;
    --bs-btn-hover-border-color: #1717a8;
    --bs-btn-active-bg: #11117f;
    --bs-btn-active-border-color: #11117f;
}

.btn-outline-primary {
    --bs-btn-color: var(--bt-blue);
    --bs-btn-border-color: var(--bt-blue);
    --bs-btn-hover-bg: var(--bt-blue);
    --bs-btn-hover-border-color: var(--bt-blue);
}

.text-primary { color: var(--bt-blue) !important; }
.bg-primary { background-color: var(--bt-blue) !important; }

.clarity-navbar {
    background: rgba(0,0,21,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.clarity-navbar .navbar-brand,
.clarity-navbar .nav-link {
    color: #fff;
}
.clarity-navbar .nav-link:hover { color: #dfe4ff; }
.navbar-toggler { border-color: rgba(255,255,255,.35); }
.navbar-toggler-icon { filter: invert(1); }

.brand-mark {
    /*width: 24px;*/
    /*height: 24px;*/
    display: inline-block;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--bt-green) 5%, var(--bt-cyan) 25%, var(--bt-blue) 45%, var(--bt-blue) 55%, var(--bt-violet) 75%, var(--bt-magenta) 95%);
    box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
}
.hero::after {
    content: "";
    position: absolute;
    inset: auto -20% -30% auto;
    width: 55rem;
    height: 55rem;
    background: radial-gradient(circle, rgba(102,18,213,.14), transparent 60%);
    z-index: -1;
}
.hero-sm, .tool-hero, .report-hero {
    background: linear-gradient(135deg, rgba(32,32,216,.08), rgba(0,214,122,.04));
    border-bottom: 1px solid var(--bt-border);
}
.eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .76rem;
    font-weight: 700;
    color: var(--bt-blue);
}

.hero-panel, .method-card {
    background: rgba(255,255,255,.90);
    border: 1px solid var(--bt-border);
    border-radius: 28px;
    padding: 1.5rem;
}
.hero-panel { box-shadow: var(--bt-shadow); }
.panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .75rem;
}
.panel-grid > div {
    border: 1px solid var(--bt-border);
    border-radius: 18px;
    padding: 1rem;
    background: #fff;
}
.panel-grid span {
    display: block;
    color: var(--bt-muted);
    font-size: .78rem;
}
.panel-grid strong {
    display: block;
    font-size: 1rem;
    margin-top: .2rem;
}

.kpi {
    background: #fff;
    border: 1px solid var(--bt-border);
    border-radius: 22px;
    padding: 1.2rem;
    box-shadow: 0 10px 30px rgba(0,0,21,.04);
}
.kpi strong {
    display: block;
    font-size: 2rem;
    color: var(--bt-blue);
}
.kpi span {
    color: var(--bt-muted);
    font-size: .9rem;
}

.tool-card {
    border-radius: 24px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px rgba(0,0,21,.12) !important;
}
.tool-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, var(--bt-blue), var(--bt-violet));
}

.decision-list {
    display: grid;
    gap: .75rem;
}
.decision {
    display: block;
    border-radius: 999px;
    padding: .9rem 1.2rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--bt-border);
}
.decision-launch { border-left: 8px solid var(--bt-green); }
.decision-frame { border-left: 8px solid var(--bt-cyan); }
.decision-experiment { border-left: 8px solid var(--bt-blue); }
.decision-defer { border-left: 8px solid var(--bt-violet); }
.decision-discard { border-left: 8px solid var(--bt-magenta); }

.clarity-form .card,
.report-page .card,
.admin-page .card {
    border-radius: 24px;
}
.clarity-step { display: none; }
.clarity-step.active { display: block; }

.step-indicator {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.step-dot {
    border: 1px solid var(--bt-border);
    background: #fff;
    border-radius: 999px;
    padding: .35rem .7rem .35rem .35rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--bt-muted);
}
.step-dot span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(32,32,216,.10);
    color: var(--bt-blue);
    font-weight: 700;
}
.step-dot.active {
    border-color: var(--bt-blue);
    color: var(--bt-black);
    box-shadow: 0 10px 30px rgba(32,32,216,.10);
}
.step-dot.active span {
    background: var(--bt-blue);
    color: #fff;
}
.step-dot em {
    font-style: normal;
    font-size: .85rem;
}

.form-control, .form-select {
    border-radius: 14px;
    padding: .8rem 1rem;
    border-color: rgba(0,0,21,.16);
}
.form-control:focus, .form-select:focus {
    border-color: var(--bt-blue);
    box-shadow: 0 0 0 .25rem rgba(32,32,216,.14);
}

.clarity-progress { height: 12px; border-radius: 999px; background: rgba(32,32,216,.10); }
.clarity-progress .progress-bar,
.clarity-progress-sm .progress-bar {
    background: linear-gradient(90deg, var(--bt-cyan), var(--bt-blue), var(--bt-violet));
}
.clarity-progress-sm { height: 9px; border-radius: 999px; background: rgba(0,0,21,.08); }

.score-circle {
    --score: 0;
    width: 190px;
    height: 190px;
    margin-left: auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #fff 0 58%, transparent 59%),
        conic-gradient(var(--bt-blue) calc(var(--score) * 1%), rgba(0,0,21,.10) 0);
    box-shadow: var(--bt-shadow);
}
.score-circle div {
    text-align: center;
}
.score-circle strong {
    display: block;
    font-size: 3rem;
    line-height: 1;
}
.score-circle span {
    color: var(--bt-muted);
}
.score-success { background: radial-gradient(circle at center, #fff 0 58%, transparent 59%), conic-gradient(var(--bs-success) calc(var(--score) * 1%), rgba(0,0,21,.10) 0); }
.score-primary { background: radial-gradient(circle at center, #fff 0 58%, transparent 59%), conic-gradient(var(--bt-blue) calc(var(--score) * 1%), rgba(0,0,21,.10) 0); }
.score-warning { background: radial-gradient(circle at center, #fff 0 58%, transparent 59%), conic-gradient(var(--bs-warning) calc(var(--score) * 1%), rgba(0,0,21,.10) 0); }
.score-danger { background: radial-gradient(circle at center, #fff 0 58%, transparent 59%), conic-gradient(var(--bs-danger) calc(var(--score) * 1%), rgba(0,0,21,.10) 0); }

.metric-card {
    border: 1px solid var(--bt-border);
    border-radius: 18px;
    padding: 1rem;
    background: #fff;
    height: 100%;
}
.metric-card span {
    color: var(--bt-muted);
    font-size: .85rem;
    display: block;
}
.metric-card strong {
    color: var(--bt-black);
    font-size: 1.35rem;
}

.clarity-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.clarity-list li {
    padding-left: 1.4rem;
    position: relative;
    margin-bottom: .75rem;
}
.clarity-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55rem;
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--bt-green);
}
.clarity-list.warning li::before { background: var(--bs-warning); }

.clarity-actions li { margin-bottom: .75rem; }

.clarity-offer-card {
    border-radius: 24px;
    background: linear-gradient(180deg, #fff, rgba(32,32,216,.04));
}

.clarity-footer {
    background: var(--bt-black);
    color: #fff;
}
.footer-link { color: #fff; text-decoration: none; }
.footer-link:hover { color: #dfe4ff; }

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.admin-tabs a {
    text-decoration: none;
    border: 1px solid var(--bt-border);
    border-radius: 999px;
    padding: .55rem .9rem;
    background: #fff;
    color: var(--bt-black);
}
.admin-tabs a.active {
    background: var(--bt-blue);
    color: #fff;
    border-color: var(--bt-blue);
}
.admin-kpi {
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--bt-border);
    padding: 1.3rem;
    box-shadow: 0 10px 30px rgba(0,0,21,.04);
}
.admin-kpi span { color: var(--bt-muted); display: block; }
.admin-kpi strong { font-size: 2rem; color: var(--bt-blue); }
.admin-pre {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 560px;
    overflow: auto;
    background: #f6f7fb;
    padding: 1rem;
    border-radius: 16px;
}

.portfolio-matrix {
    position: relative;
    min-height: 390px;
    margin: 1rem 1.5rem 2rem 2.5rem;
    border-left: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    border-radius: .5rem;
    background:
        linear-gradient(to right, transparent 49.7%, rgba(100,116,139,.18) 50%, transparent 50.3%),
        linear-gradient(to top, transparent 49.7%, rgba(100,116,139,.18) 50%, transparent 50.3%),
        linear-gradient(135deg, rgba(34,197,94,.07), rgba(239,68,68,.07));
}

.matrix-label-y { position:absolute; left:-2.6rem; top:45%; transform:rotate(-90deg); color:#64748b; font-size:.8rem; }
.matrix-label-x { position:absolute; right:0; bottom:-1.8rem; color:#64748b; font-size:.8rem; }
.matrix-point { position:absolute; width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 2px 8px rgba(15,23,42,.28); transform:translate(-50%,50%); }
.matrix-point span { display:none; position:absolute; left:12px; top:8px; white-space:nowrap; background:#17243c; color:#fff; padding:.25rem .4rem; border-radius:.3rem; font-size:.72rem; z-index:3; }
.matrix-point:hover span, .matrix-point:focus span { display:block; }
.status-dot { display:inline-block; width:.65rem; height:.65rem; border-radius:50%; margin-right:.5rem; }
.action-card { border:1px solid #e2e8f0; border-left:4px solid #4f46e5; border-radius:.5rem; padding:.75rem; background:#fff; }
.action-card small { display:block; margin-top:.35rem; color:#64748b; }

.entry-card {
    border-top: 4px solid var(--clarity-primary, #0b5d78) !important;
}

.entry-number {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #0b5d78, #12324a);
}

.entry-outcome {
    padding: .9rem 1rem;
    border-radius: .9rem;
    background: #eef6f8;
    color: #17384a;
    font-size: .93rem;
}

.confidence-pill {
    display: inline-flex;
    align-items: center;
    padding: .55rem .8rem;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
}

.confidence-high { background: #dff4e8; color: #155b35; }
.confidence-medium { background: #fff0c7; color: #755400; }
.confidence-low { background: #ffe2dc; color: #8b2d20; }

.professional-report-page { position: relative; }
.professional-watermark {
    position: fixed;
    inset: 42% auto auto 50%;
    transform: translate(-50%, -50%) rotate(-26deg);
    z-index: 0;
    pointer-events: none;
    color: rgba(14, 49, 70, .055);
    font-size: clamp(2.4rem, 8vw, 7rem);
    font-weight: 900;
    letter-spacing: .08em;
    white-space: nowrap;
}

.report-version {
    padding: .35rem .7rem;
    border: 1px solid rgba(15, 48, 68, .2);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.scenario-grid > div {
    padding: 1rem;
    border-radius: .85rem;
    background: #f4f7f8;
}

.scenario-grid span,
.scenario-grid strong { display: block; }
.scenario-grid span { color: #63717a; font-size: .82rem; }

@media (max-width: 575.98px) {
    .scenario-grid { grid-template-columns: 1fr; }
}

@media print {
    .professional-watermark { color: rgba(14, 49, 70, .08); }
    .professional-report-page .navbar,
    .professional-report-page .clarity-footer,
    .professional-report-page .btn { display: none !important; }
}

.doc-card {
    border: 1px solid var(--bt-border);
    border-radius: 18px;
    padding: 1rem;
    background: #fff;
    height: 100%;
}
.doc-card strong { display: block; color: var(--bt-blue); }
.doc-card span { color: var(--bt-muted); font-size: .82rem; }
.doc-card p { margin: .5rem 0 0; }

.demo-result-item {
    border: 1px solid var(--bt-border);
    border-radius: 18px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff;
}
.demo-result-item mark {
    background: rgba(0,214,122,.20);
    padding: .05rem .15rem;
    border-radius: .2rem;
}

@media (max-width: 991px) {
    .score-circle {
        margin-left: 0;
        width: 150px;
        height: 150px;
    }
    .score-circle strong { font-size: 2.3rem; }
}

@media print {
    .clarity-navbar, .clarity-footer, .btn, .admin-tabs, .step-indicator {
        display: none !important;
    }
    body {
        background: #fff !important;
    }
    .card, .hero-panel, .method-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    .report-hero, .tool-hero, .hero-sm {
        background: #fff !important;
    }
    a[href]::after { content: ""; }
}


/* Guided answer cards — patch 2026-06-14 */
.field-help {
    color: var(--bt-muted);
    font-size: .92rem;
    line-height: 1.45;
}

.clarity-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.clarity-choice {
    border: 1px solid var(--bt-border);
    background: #fff;
    border-radius: 18px;
    padding: .95rem 1rem;
    min-height: 100%;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}

.clarity-choice strong {
    display: block;
    color: var(--bt-black);
    margin-bottom: .25rem;
}

.clarity-choice span {
    display: block;
    color: var(--bt-muted);
    font-size: .84rem;
    line-height: 1.35;
}

.btn-check:focus + .clarity-choice,
.btn-check:focus-visible + .clarity-choice {
    border-color: var(--bt-blue);
    box-shadow: 0 0 0 .2rem rgba(32,32,216,.16);
}

.btn-check:checked + .clarity-choice {
    border-color: var(--bt-blue);
    background:
        linear-gradient(180deg, rgba(32,32,216,.06), rgba(32,32,216,.02)),
        #fff;
    box-shadow: 0 12px 32px rgba(32,32,216,.12);
    transform: translateY(-1px);
}

.clarity-choice:hover {
    border-color: rgba(32,32,216,.45);
    box-shadow: 0 10px 28px rgba(0,0,21,.06);
}

.choice-feedback {
    display: none !important;
    margin-top: .5rem;
    color: #b42318;
    font-size: .86rem;
}

.was-validated .clarity-choice-grid:not(.has-choice) + .choice-feedback {
    display: block !important;
}

.step-dot.completed span {
    background: var(--bt-green);
    color: var(--bt-black);
}

.report-page .clarity-list li + li,
.report-page .clarity-actions li + li {
    margin-top: .45rem;
}

.report-context {
    display: grid;
    grid-template-columns: minmax(11rem, 32%) 1fr;
    gap: .65rem 1rem;
}
.report-context dt {
    color: var(--bt-muted);
    font-size: .86rem;
    font-weight: 700;
    margin: 0;
}
.report-context dd {
    margin: 0;
    white-space: pre-line;
}
.module-group-label {
    color: var(--bt-blue);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.module-card {
    background: #fff;
    border: 1px solid var(--bt-border);
    border-radius: 1.35rem;
    transition: transform .18s ease, box-shadow .18s ease;
}
.module-card:hover {
    box-shadow: 0 1rem 2.2rem rgba(0,0,21,.08);
    transform: translateY(-2px);
}
.module-card .module-outcome {
    border-left: 3px solid var(--bt-green);
    padding-left: .85rem;
}
.demo-script-step {
    align-items: start;
    display: grid;
    gap: .85rem;
    grid-template-columns: 2.25rem 1fr;
}
.demo-script-step > span {
    background: var(--bt-blue);
    border-radius: 50%;
    color: #fff;
    display: grid;
    font-weight: 800;
    height: 2.25rem;
    place-items: center;
    width: 2.25rem;
}

@media (max-width: 767px) {
    .clarity-choice-grid {
        grid-template-columns: 1fr;
    }
    .report-context {
        gap: .15rem;
        grid-template-columns: 1fr;
    }
    .report-context dd { margin-bottom: .65rem; }
}