/* ================================================================
   Seren — Self-Evolving Reflective Engine Network - Soul Audit Styles
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

.tie-soul-audit {
    --tie-text:    #1A1A2E;
    --tie-muted:   #6B7280;
    --tie-border:  #E8E8ED;
    --tie-surface: #FFFFFF;
    --tie-accent:  #2563EB;
    --dti-low:     #059669;
    --dti-mid:     #D97706;
    --dti-high:    #DC2626;

    font-family: 'DM Sans', system-ui, sans-serif;
    color:       var(--tie-text);
    max-width:   760px;
    margin:      2rem auto;
}

.tie-soul-audit * { box-sizing: border-box; }

/* ── Header ────────────────────────────────────────────────────── */
.tie-audit-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--tie-surface);
    border:          1px solid var(--tie-border);
    border-radius:   12px;
    padding:         20px 24px;
    margin-bottom:   16px;
    flex-wrap:       wrap;
    gap:             14px;
}

.tie-audit-title {
    display:     flex;
    align-items: center;
    gap:         14px;
}

.tie-audit-mark {
    font-size:  28px;
    color:      var(--tie-accent);
    flex-shrink:0;
}

.tie-audit-title h2 {
    font-size:   17px !important;
    font-weight: 600 !important;
    color:       var(--tie-text) !important;
    margin:      0 !important;
    padding:     0 !important;
    border:      none !important;
}

.tie-audit-sub {
    font-size:  12px;
    color:      var(--tie-muted);
    font-style: italic;
    margin-top: 2px;
}

.tie-audit-actions {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
}

.tie-audit-date {
    font-size:  11px;
    color:      var(--tie-muted);
    font-family:'DM Mono', monospace;
}

.tie-btn-pdf {
    background:    var(--tie-accent);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    padding:       9px 16px;
    font-size:     13px;
    font-family:   'DM Sans', sans-serif;
    cursor:        pointer;
    font-weight:   500;
    transition:    background .15s;
    text-decoration: none;
    display:       inline-block;
}

.tie-btn-pdf:hover { background: #1D4ED8; }

/* ── Seren intro ───────────────────────────────────────────────── */
.tie-audit-seren-intro {
    background:    #F0F4FF;
    border-left:   3px solid var(--tie-accent);
    border-radius: 0 8px 8px 0;
    padding:       14px 18px;
    margin-bottom: 16px;
    font-style:    italic;
    color:         #374151;
    font-size:     14px;
    line-height:   1.65;
}

/* ── Sections ──────────────────────────────────────────────────── */
.tie-audit-section {
    background:    var(--tie-surface);
    border:        1px solid var(--tie-border);
    border-radius: 10px;
    padding:       22px 24px;
    margin-bottom: 14px;
}

.tie-audit-section-header {
    display:         flex;
    align-items:     center;
    gap:             12px;
    margin-bottom:   18px;
    padding-bottom:  12px;
    border-bottom:   1px solid var(--tie-border);
}

.tie-audit-num {
    font-family:    'DM Mono', monospace;
    font-size:      11px;
    color:          var(--tie-muted);
    letter-spacing: .1em;
}

.tie-audit-section-header h3 {
    font-size:   16px !important;
    font-weight: 600 !important;
    color:       var(--tie-text) !important;
    margin:      0 !important;
    padding:     0 !important;
    border:      none !important;
    flex:        1;
}

.tie-audit-badge {
    font-size:     10px;
    background:    #FEF3C7;
    color:         #92400E;
    padding:       3px 8px;
    border-radius: 999px;
    font-weight:   500;
    white-space:   nowrap;
}

.tie-audit-section-intro {
    font-size:     13px;
    color:         var(--tie-muted);
    font-style:    italic;
    margin-bottom: 16px;
    line-height:   1.6;
}

/* ── Stats ─────────────────────────────────────────────────────── */
.tie-audit-stat-row {
    display:               grid;
    grid-template-columns: repeat(4,1fr);
    gap:                   10px;
    margin-bottom:         18px;
}

.tie-audit-stat {
    background:    #F7F7FA;
    border:        1px solid var(--tie-border);
    border-radius: 8px;
    padding:       12px;
    text-align:    center;
    display:       flex;
    flex-direction:column;
    align-items:   center;
}

.tie-audit-stat-val {
    font-size:   26px;
    font-weight: 600;
    font-family: 'DM Mono', monospace;
    line-height: 1;
    margin-bottom: 5px;
}

.tie-audit-stat-lbl {
    font-size:  10px;
    color:      var(--tie-muted);
    text-align: center;
}

.tie-dti-col-low  { color: var(--dti-low) !important; }
.tie-dti-col-mid  { color: var(--dti-mid) !important; }
.tie-dti-col-high { color: var(--dti-high) !important; }

.tie-audit-narrative {
    font-size:  14px;
    color:      #374151;
    line-height:1.75;
}

/* ── Archetype drift ───────────────────────────────────────────── */
.tie-audit-arch-row {
    display:     flex;
    align-items: center;
    gap:         14px;
    margin-bottom: 16px;
    flex-wrap:   wrap;
}

.tie-audit-arch-card {
    flex:          1;
    background:    #F0F4FF;
    border:        1px solid #C7D7FD;
    border-radius: 8px;
    padding:       12px 16px;
    min-width:     160px;
    display:       flex;
    flex-direction:column;
}

.tie-audit-arch-drift { background: #FFFBEB; border-color: #FDE68A; }
.tie-audit-drift-arrow { font-size: 20px; color: var(--tie-muted); }

.tie-arch-label {
    font-size:      10px;
    color:          var(--tie-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom:  4px;
}

.tie-arch-name {
    font-size:   16px;
    font-weight: 600;
    color:       var(--tie-text);
    margin-bottom: 2px;
}

.tie-arch-tagline {
    font-size:  12px;
    color:      var(--tie-muted);
    font-style: italic;
}

/* ── Decision loops ────────────────────────────────────────────── */
.tie-audit-loops { margin-bottom: 16px; }

.tie-audit-loop-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 14px;
    background:    #FFFBEB;
    border:        1px solid #FDE68A;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size:     13px;
    flex-wrap:     wrap;
}

.tie-loop-card  { font-weight: 600; color: var(--tie-text); flex: 1; min-width: 120px; }
.tie-loop-count { color: var(--tie-muted); }
.tie-loop-dti   { color: var(--dti-mid); font-weight: 500; }

/* ── Shadow audit ──────────────────────────────────────────────── */
.tie-audit-shadow { border-color: #E0E7FF; }

.tie-audit-findings { margin-bottom: 4px; }

.tie-audit-finding {
    border-radius: 8px;
    padding:       14px 16px;
    margin-bottom: 10px;
    border:        1px solid;
}

.tie-audit-finding.sev-high   { background: #FEF2F2; border-color: #FECACA; }
.tie-audit-finding.sev-medium { background: #FFFBEB; border-color: #FDE68A; }
.tie-audit-finding.sev-low    { background: #ECFDF5; border-color: #A7F3D0; }

.tie-finding-headline { font-size: 14px; font-weight: 600; color: var(--tie-text); margin-bottom: 6px; }
.tie-finding-body     { font-size: 13px; color: #374151; line-height: 1.65; }

/* ── Playbook ───────────────────────────────────────────────────── */
.tie-audit-playbook { border-color: #D1FAE5; }

.tie-audit-rec {
    margin-bottom: 18px;
    padding-bottom:18px;
    border-bottom: 1px solid var(--tie-border);
}

.tie-audit-rec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.tie-rec-title { font-size: 14px; font-weight: 600; color: var(--tie-text); margin-bottom: 6px; }
.tie-rec-body  { font-size: 13px; color: #374151; line-height: 1.7; }

/* ── Sign-off ───────────────────────────────────────────────────── */
.tie-audit-signoff {
    text-align:  right;
    font-style:  italic;
    color:       var(--tie-muted);
    font-size:   13px;
    margin-top:  16px;
    padding-top: 16px;
    border-top:  1px solid var(--tie-border);
}

/* ── Upgrade prompt ────────────────────────────────────────────── */
.tie-upgrade-wrap {
    max-width: 600px;
    margin:    2rem auto;
    font-family:'DM Sans', system-ui, sans-serif;
}

.tie-upgrade-card {
    background:    var(--tie-surface, #fff);
    border:        1px solid #E8E8ED;
    border-radius: 16px;
    padding:       36px 32px;
    text-align:    center;
}

.tie-upgrade-mark { font-size: 40px; color: #2563EB; display: block; margin-bottom: 14px; }

.tie-upgrade-card h2 {
    font-size:   22px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    padding:     0 !important;
    border:      none !important;
    color:       #1A1A2E !important;
}

.tie-upgrade-tagline { font-size: 14px; color: #6B7280; margin-bottom: 28px; font-style: italic; }

.tie-upgrade-features { text-align: left; margin-bottom: 28px; }

.tie-upgrade-feature {
    display:       flex;
    gap:           14px;
    align-items:   flex-start;
    margin-bottom: 16px;
}

.tie-feature-icon { font-size: 12px; color: #2563EB; margin-top: 3px; flex-shrink: 0; }

.tie-upgrade-feature strong { display: block; font-size: 14px; color: #1A1A2E; margin-bottom: 2px; }
.tie-upgrade-feature p { font-size: 13px; color: #6B7280; line-height: 1.5; margin: 0; }

.tie-upgrade-price {
    margin-bottom: 20px;
    display:       flex;
    flex-direction:column;
    align-items:   center;
    gap:           4px;
}

.tie-price {
    font-size:   36px;
    font-weight: 600;
    color:       #1A1A2E;
    font-family: 'DM Mono', monospace;
    line-height: 1;
}

.tie-price-note { font-size: 12px; color: #6B7280; }

.tie-btn-upgrade {
    display:        inline-block;
    background:     #1A1A2E;
    color:          #fff !important;
    border:         none;
    border-radius:  10px;
    padding:        14px 32px;
    font-size:      15px;
    font-weight:    500;
    font-family:    'DM Sans', sans-serif;
    cursor:         pointer;
    text-decoration:none;
    margin-bottom:  28px;
    transition:     background .2s;
}

.tie-btn-upgrade:hover { background: #2D3561; }

.tie-license-activate { border-top: 1px solid #E8E8ED; padding-top: 20px; }
.tie-license-intro { font-size: 13px; color: #6B7280; margin-bottom: 10px; }

.tie-license-row {
    display: flex;
    gap:     8px;
}

.tie-license-input {
    flex:          1;
    border:        1px solid #E8E8ED;
    border-radius: 8px;
    padding:       10px 14px;
    font-size:     14px;
    font-family:   'DM Sans', sans-serif;
    outline:       none;
}

.tie-license-input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

.tie-btn-activate {
    background:    #2563EB;
    color:         #fff;
    border:        none;
    border-radius: 8px;
    padding:       10px 18px;
    font-size:     14px;
    font-family:   'DM Sans', sans-serif;
    cursor:        pointer;
    font-weight:   500;
    transition:    background .15s;
}

.tie-btn-activate:hover { background: #1D4ED8; }

.tie-license-error {
    background:    #FEF2F2;
    border:        1px solid #FECACA;
    border-radius: 6px;
    padding:       10px 14px;
    font-size:     13px;
    color:         #DC2626;
    margin-bottom: 10px;
    text-align:    left;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tie-audit-stat-row { grid-template-columns: repeat(2,1fr); }
    .tie-audit-header   { flex-direction: column; align-items: flex-start; }
    .tie-upgrade-card   { padding: 24px 20px; }
    .tie-license-row    { flex-direction: column; }
}

/* ── Book recommendation ────────────────────────────────────────── */
.tie-audit-book { border-color: #FDE68A; }

.tie-book-card {
    display:        flex;
    gap:            18px;
    align-items:    flex-start;
    background:     #FFFBEB;
    border:         1px solid #FDE68A;
    border-radius:  10px;
    padding:        16px;
    text-decoration:none;
    color:          inherit;
    transition:     background .15s, border-color .15s;
    margin-bottom:  12px;
}

.tie-book-card:hover {
    background:   #FEF9C3;
    border-color: #FCD34D;
}

.tie-book-cover { flex-shrink: 0; }

.tie-book-info {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.tie-book-title {
    font-size:   15px;
    font-weight: 600;
    color:       var(--tie-text);
    line-height: 1.3;
}

.tie-book-author {
    font-size:  12px;
    color:      var(--tie-muted);
    font-style: italic;
}

.tie-book-reason {
    font-size:   13px;
    color:       #374151;
    line-height: 1.65;
    margin:      6px 0 8px;
}

.tie-book-cta {
    font-size:   12px;
    font-weight: 500;
    color:       var(--tie-accent);
}

.tie-book-disclosure {
    font-size:  11px;
    color:      var(--tie-muted);
    font-style: italic;
}