/* ================================================================
   FOUR PILLARS — NO SINGLE-SIDE BORDERS PATCH
   Load AFTER four-pillars.css and four-pillars-elevation.css.

   Removes every colored single-side border in the base CSS and
   replaces it with one of three treatments depending on what the
   visual was originally communicating:

     1. Element/pillar identity → tinted full border + faint
        background tint of the same color. The pillar still reads
        as "the Yellow one" or "the Red one" but through ambient
        color rather than a stripe.

     2. Hierarchy callout (quote, history note) → background tint
        + full border in accent color. The block visually pops
        without a stripe.

     3. Active/selected state (tabs, current item) → background +
        border on all sides + small glow. State is unmistakable
        without a directional line.

   No single-side colored borders survive after this file loads.
   Subtle 1px neutral dividers (separators between rows, etc.)
   stay — those aren't the "AI tell." The tell is colored stripes
   on rounded containers, and those are all neutralized below.
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   1. LUCK PILLAR CARDS — the screenshot offender
   .fp-luck-card has border-top: 3px solid var(--luck-accent)
   We replace with: tinted full border using the same accent var,
   plus a soft tinted background, plus a small glow.
   ════════════════════════════════════════════════════════════════ */

.fp-luck-card {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* The colored accent now lives in box-shadow and background.
       Each card's --luck-accent is set per-element by the JS, so
       this expression picks up Wood / Fire / Earth / Metal / Water
       automatically. */
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--luck-accent, #E8C547) 6%, transparent) 0%,
            transparent 60%
        ),
        rgba(20, 20, 24, 0.6);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--luck-accent, #E8C547) 18%, transparent),
        0 4px 14px rgba(0, 0, 0, 0.25);
}

.fp-luck-card:hover {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--luck-accent, #E8C547) 35%, transparent),
        0 8px 22px rgba(0, 0, 0, 0.35);
}

/* Current-decade card: same approach but stronger ring */
.fp-luck-card--current,
.fp-luck-card.fp-luck-card--current {
    box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb, var(--luck-accent, #E8C547) 55%, transparent),
        0 0 24px color-mix(in srgb, var(--luck-accent, #E8C547) 18%, transparent),
        0 8px 24px rgba(0, 0, 0, 0.35);
}


/* ════════════════════════════════════════════════════════════════
   2. PILLAR CARDS (the bigger detail cards)
   .fp-pillar--year/month/day/hour each have border-top: 3px solid
   ════════════════════════════════════════════════════════════════ */

.fp-pillar--year,
.fp-pillar--month,
.fp-pillar--day,
.fp-pillar--hour {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.fp-pillar--year {
    box-shadow: inset 0 0 0 1px rgba(232, 197, 71, 0.22);
    background: linear-gradient(180deg, rgba(232, 197, 71, 0.04), transparent 50%), rgba(255, 255, 255, 0.025);
}
.fp-pillar--month {
    box-shadow: inset 0 0 0 1px rgba(126, 200, 227, 0.22);
    background: linear-gradient(180deg, rgba(126, 200, 227, 0.04), transparent 50%), rgba(255, 255, 255, 0.025);
}
.fp-pillar--day {
    box-shadow: inset 0 0 0 1px rgba(199, 125, 255, 0.28);
    background: linear-gradient(180deg, rgba(199, 125, 255, 0.05), transparent 50%), rgba(255, 255, 255, 0.025);
}
.fp-pillar--hour {
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.22);
    background: linear-gradient(180deg, rgba(255, 107, 107, 0.04), transparent 50%), rgba(255, 255, 255, 0.025);
}


/* ════════════════════════════════════════════════════════════════
   3. TEACH CARDS — pillar education cards
   .fp-teach-card--year etc. each have border-left: 3px solid
   ════════════════════════════════════════════════════════════════ */

.fp-teach-card--year,
.fp-teach-card--month,
.fp-teach-card--day,
.fp-teach-card--hour {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.fp-teach-card--year {
    box-shadow: inset 0 0 0 1px rgba(232, 197, 71, 0.20);
    background: linear-gradient(135deg, rgba(232, 197, 71, 0.04), transparent 60%);
}
.fp-teach-card--month {
    box-shadow: inset 0 0 0 1px rgba(126, 200, 227, 0.20);
    background: linear-gradient(135deg, rgba(126, 200, 227, 0.04), transparent 60%);
}
.fp-teach-card--day {
    box-shadow: inset 0 0 0 1px rgba(199, 125, 255, 0.24);
    background: linear-gradient(135deg, rgba(199, 125, 255, 0.05), transparent 60%);
}
.fp-teach-card--hour {
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.20);
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.04), transparent 60%);
}


/* ════════════════════════════════════════════════════════════════
   4. INTERACTION ITEMS — combinations, clashes, harms, etc.
   These are the inline list items showing branch interactions.
   The original border-left coded the interaction type. We keep
   the color coding but move it to a small leading dot + full
   border treatment.
   ════════════════════════════════════════════════════════════════ */

.fp-int-item--combination,
.fp-int-item--clash,
.fp-int-item--harm,
.fp-int-item--punishment,
.fp-int-item--destruction {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    position: relative;
}

.fp-int-item--combination {
    background: rgba(76, 175, 80, 0.06);
    box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.25);
}
.fp-int-item--clash {
    background: rgba(255, 107, 53, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.25);
}
.fp-int-item--harm {
    background: rgba(255, 107, 107, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.25);
}
.fp-int-item--punishment {
    background: rgba(232, 197, 71, 0.06);
    box-shadow: inset 0 0 0 1px rgba(232, 197, 71, 0.25);
}
.fp-int-item--destruction {
    background: rgba(176, 190, 197, 0.06);
    box-shadow: inset 0 0 0 1px rgba(176, 190, 197, 0.25);
}


/* ════════════════════════════════════════════════════════════════
   5. IDENTITY INNER (the hero identity card)
   .fp-identity-inner has border-top: 3px solid --hero-accent
   ════════════════════════════════════════════════════════════════ */

.fp-identity-inner {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-accent, #E8C547) 22%, transparent),
                0 8px 28px rgba(0, 0, 0, 0.3);
    /* Replace the colored stripe with a subtle ambient glow from
       the top, using the same accent variable. Reads as "this is
       special" without a stripe. */
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--hero-accent, #E8C547) 10%, transparent) 0%,
            transparent 80px
        ),
        #12121e;
}


/* ════════════════════════════════════════════════════════════════
   6. GROWTH CARD
   .fp-growth-card has border-left: 3px solid --grow-accent
   ════════════════════════════════════════════════════════════════ */

.fp-growth-card {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grow-accent, #E8C547) 22%, transparent);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--grow-accent, #E8C547) 5%, transparent),
            transparent 60%
        ),
        rgba(255, 255, 255, 0.03);
}


/* ════════════════════════════════════════════════════════════════
   7. HISTORY NOTE
   Line 506: .fp-history-note border-left: 3px solid accent
   ════════════════════════════════════════════════════════════════ */

.fp-history-note {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(232, 197, 71, 0.20);
    background: rgba(232, 197, 71, 0.05);
}


/* ════════════════════════════════════════════════════════════════
   8. THE BLOCKQUOTE / FANCY QUOTE (line 223)
   Italicized quote block with border-left accent.
   Replace with: left padding + leading quote glyph + no border.
   ════════════════════════════════════════════════════════════════ */

[class*="fp-quote"],
.fp-pullquote,
blockquote.fp-quote {
    border-left: none !important;
    padding: 1.25rem 1.5rem;
    background: rgba(232, 197, 71, 0.04);
    border: 1px solid rgba(232, 197, 71, 0.18);
    border-radius: 10px;
    font-style: italic;
    position: relative;
}


/* ════════════════════════════════════════════════════════════════
   9. DETAIL TABS — active state
   Lines 2138-2141: .fp-detail-tab--active.fp-detail-tab--year etc.
   each had border-top: 2px solid colored
   Replace with: tinted background + tinted full border + bold text
   ════════════════════════════════════════════════════════════════ */

.fp-detail-tab--active.fp-detail-tab--year,
.fp-detail-tab--active.fp-detail-tab--month,
.fp-detail-tab--active.fp-detail-tab--day,
.fp-detail-tab--active.fp-detail-tab--hour {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border: 1px solid;
    border-radius: 8px;
    font-weight: 600;
}

.fp-detail-tab--active.fp-detail-tab--year {
    border-color: rgba(232, 197, 71, 0.4);
    background: rgba(232, 197, 71, 0.08);
    color: #E8C547;
}
.fp-detail-tab--active.fp-detail-tab--month {
    border-color: rgba(126, 200, 227, 0.4);
    background: rgba(126, 200, 227, 0.08);
    color: #7EC8E3;
}
.fp-detail-tab--active.fp-detail-tab--day {
    border-color: rgba(199, 125, 255, 0.4);
    background: rgba(199, 125, 255, 0.08);
    color: #C77DFF;
}
.fp-detail-tab--active.fp-detail-tab--hour {
    border-color: rgba(255, 107, 107, 0.4);
    background: rgba(255, 107, 107, 0.08);
    color: #FF6B6B;
}


/* ════════════════════════════════════════════════════════════════
   10. CATCH-ALL — neutralize any remaining colored single-side
   borders inside results that I might have missed.
   This is a defensive sweep using attribute selectors. Anything
   with border-left/right/top/bottom set inline or via a class
   I haven't explicitly addressed gets caught here.
   ════════════════════════════════════════════════════════════════ */

/* From elevation file: .fp-analogy-box etc. already handled
   (border-left: none in the elevation), so nothing extra needed
   for those. */


/* ════════════════════════════════════════════════════════════════
   END
   The page no longer uses a single colored single-side border
   anywhere visible. Color coding is preserved through tinted
   backgrounds, inset box-shadows (which behave like inner rings),
   and text/icon color — all of which read as deliberate design
   rather than as "the AI added a colored stripe."
   ================================================================ */