/* ======================================
   FuncGen Mist Theme (revised)
   palette: #AA99BD #9396C1 #7898C1 #74ACC7 #A4C4DB
   Usage: import AFTER styles.css
   Changes:
   - Stronger but still premium contrast
   - REMOVE vertical accent bars everywhere
   ====================================== */

:root{

    /* 1) 给一个更深的"锚点色"当主色（不然永远发灰） */
    --primary: #4B6799;     /* deep blue anchor */
    --primary2: #6B749E;    /* secondary */

    /* 2) pill/hover 不要用 rgba 直接糊：用 color-mix 更干净（不会脏灰） */
    --pill: color-mix(in srgb, var(--primary) 10%, white);
    --hover: color-mix(in srgb, var(--primary) 6%, white);

    /* 让 styles.css 里所有用 --blue 的地方自动变成主题色 */
    --blue: var(--primary);
    --blue2: var(--primary2);

    /* Mist palette */
    --mist-1:#AA99BD; /* P1 */
    --mist-2:#9396C1; /* P2 */
    --mist-3:#7898C1; /* P3 */
    --mist-4:#74ACC7; /* P4 */
    --mist-5:#A4C4DB; /* P5 */

    /* inks */
    --mist-ink: #2F4E66;
    --mist-ink-2:#355A78;

    /* panel borders/shadows */
    --panel-border: rgba(15,23,42,0.10);
    --panel-border-hover: rgba(15,23,42,0.16);

    --shadow-soft: 0 1px 2px rgba(15,23,42,.06), 0 10px 24px rgba(15,23,42,.06);
    --shadow-hover: 0 2px 6px rgba(15,23,42,.08), 0 14px 34px rgba(15,23,42,.08);

    /* Banner */
    --banner-bg: linear-gradient(
            90deg,
            rgba(170,153,189,0.13) 0%,
            rgba(116,172,199,0.11) 55%,
            rgba(164,196,219,0.13) 100%
    );
    --banner-border: rgba(120,152,193,0.22);

    /* Use banner gradient for constraint blocks (lighter version) */
    --constraint-bg: linear-gradient(
            90deg,
            rgba(170,153,189,0.12) 0%,
            rgba(116,172,199,0.10) 55%,
            rgba(164,196,219,0.12) 100%
    );

    /* Shared overlay + ring */
    --mist-overlay-hover: 0.10;
    --mist-overlay-active: 0.18;
    --mist-ring-alpha: 0.42;

    /* Constraints hover */
    --constraint-hover-alpha: 0.05;

    /* =========================
       Mode accents (KEY)
       ========================= */
    --wt-accent:     #4B6799;  /* deep blue */
    --struct-accent: #2F8F7A;  /* greener teal */
    --anno-accent:   #7366A6;  /* lighter purple-slate */

    /* =========================
       Constraint accents (semantic text colors)
       ========================= */
    --c-anno:   #7366A6;
    --c-struct: #2F8F7A;
    --c-msa:    #4B6799;

    /* =========================
       Unified constraint base (use MSA tone)
       - rows will be subtle variants of this
       ========================= */
    --c-constraint-base: var(--c-msa);
}

/* --------------------------------------
   Global: remove any vertical accent bars
   -------------------------------------- */
.mode-intro::after,
details.constraint::after{
    content: none !important;
    display: none !important;
    width: 0 !important;
    background: transparent !important;
}

/* --------------------------------------
   A) Top banner tint
   -------------------------------------- */
.banner{
    background: var(--banner-bg);
    border-color: var(--banner-border);
    position: relative;
}
.banner::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: var(--radius);
    pointer-events:none;
    background: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0) 42%);
    opacity: 0.40;
}

/* --------------------------------------
   B) Mode cards (left 3 cards)
   -------------------------------------- */
.mode-btn{
    position: relative;
    overflow: hidden;
    border-color: var(--panel-border);
    box-shadow: var(--shadow-soft);
}
.mode-btn:hover{
    border-color: var(--panel-border-hover);
    box-shadow: var(--shadow-hover);
}

/* overlay layer */
.mode-btn::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: var(--radius2);
    pointer-events:none;
    opacity:0;
    transition: opacity .15s ease;
}
.mode-btn:hover::before{ opacity: var(--mist-overlay-hover); }
.mode-btn.active::before{ opacity: var(--mist-overlay-active); }

/* active base */
.mode-btn.active{
    background: linear-gradient(
            180deg,
            rgba(255,255,255,0.97),
            rgba(164,196,219,0.06)
    );
}

/* per-mode overlay gradients */
.mode-btn[data-mode="annotation"]::before,
.mode-btn.mode-anno::before{
    background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--anno-accent) 90%, white) 0%,
            color-mix(in srgb, var(--mist-2) 68%, white) 55%,
            rgba(255,255,255,0) 100%
    );
}
.mode-btn[data-mode="wt_guided"]::before,
.mode-btn.mode-wt::before{
    background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--wt-accent) 92%, white) 0%,
            color-mix(in srgb, var(--mist-3) 78%, white) 55%,
            rgba(255,255,255,0) 100%
    );
}
.mode-btn[data-mode="structure_guided"]::before,
.mode-btn.mode-struct::before{
    background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--struct-accent) 92%, white) 0%,
            color-mix(in srgb, var(--mist-5) 82%, white) 60%,
            rgba(255,255,255,0) 100%
    );
}

/* --------------------------------------
   Mode accents: bind --mode-accent
   -------------------------------------- */
.mode-btn[data-mode="wt_guided"],
.mode-intro[data-mode="wt_guided"]{
    --mode-accent: var(--wt-accent);
}
.mode-btn[data-mode="structure_guided"],
.mode-intro[data-mode="structure_guided"]{
    --mode-accent: var(--struct-accent);
}
.mode-btn[data-mode="annotation"],
.mode-intro[data-mode="annotation"]{
    --mode-accent: var(--anno-accent);
}

/* Use mode accent for active ring (consistent) */
.mode-btn.active{
    box-shadow: var(--shadow-soft), 0 0 0 3px color-mix(in srgb, var(--mode-accent) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--mode-accent) 52%, var(--panel-border)) !important;
}

/* Mode intro tags follow the mode accent */
.mode-intro .feature-tag{
    color: var(--mode-accent) !important;
    border-color: color-mix(in srgb, var(--mode-accent) 18%, var(--panel-border)) !important;
    background: color-mix(in srgb, var(--mode-accent) 9%, white) !important;
}

/* --------------------------------------
   C) Right-side mode intro card tint
   -------------------------------------- */
.mode-intro{
    position: relative;
    overflow: hidden;
    border-color: var(--panel-border);
    box-shadow: var(--shadow-soft);
}
.mode-intro::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: var(--radius2);
    pointer-events:none;
    opacity:1;
    background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--mode-accent) 12%, white) 0%,
            color-mix(in srgb, var(--mode-accent) 7%, white) 52%,
            rgba(255,255,255,0) 100%
    );
}
.mode-intro > *{ position: relative; z-index: 1; }

/* --------------------------------------
   D) Functional Guidance constraints rows
   - unify all three to MSA-tone base
   - keep VERY subtle per-row variation (tiny gradient difference)
   -------------------------------------- */
details.constraint{
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.90);
    border-color: var(--panel-border);
    box-shadow: var(--shadow-soft);
}
details.constraint:hover{
    border-color: var(--panel-border-hover);
    box-shadow: var(--shadow-hover);
}

/* row tint base */
details.constraint::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:14px;
    pointer-events:none;
    opacity:1;
}

/* Unified base: all use MSA-tone (blue) */
/* row tint base */
details.constraint::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:14px;
    pointer-events:none;

    /* apply banner-like gradient */
    background: var(--constraint-bg);

    /* control strength here */
    opacity: 0.85;
}

/* If you still want a tiny difference between the 3 blocks, keep it subtle */
details.constraint.anno::before{ opacity: 0.88; }
details.constraint.struct::before{ opacity: 0.84; }
details.constraint.msa::before{ opacity: 0.86; }

details.constraint > *{ position: relative; z-index: 1; }

/* Bind an accent per constraint row (for right-side label colors) */
details.constraint.anno{   --row-accent: var(--c-anno); }
details.constraint.struct{ --row-accent: var(--c-struct); }
details.constraint.msa{    --row-accent: var(--c-msa); }

/* Right-side label / small meta text inside summary */
details.constraint summary small,
details.constraint summary .muted,
details.constraint summary .right,
details.constraint summary .hint,
details.constraint summary .tag{
    color: color-mix(in srgb, var(--row-accent) 55%, #64748b) !important;
}

/* badge (MSA) */
/*.msa-badge{*/
/*    background: color-mix(in srgb, var(--c-msa) 9%, white) !important;*/
/*    border: 1px solid color-mix(in srgb, var(--c-msa) 18%, var(--panel-border)) !important;*/
/*    color: color-mix(in srgb, var(--c-msa) 65%, var(--mist-ink)) !important;*/
/*}*/

/* =========================================================
   PATCH: Make WT-guided + MSA areas cleaner (more blue, less gray)
   ========================================================= */

/* Slightly richer WT/MSA anchor blue (cleaner than gray-blue) */
:root{
    --wt-accent: #3E5F9E;   /* richer deep blue (less gray) */
    --c-msa:     #3E5F9E;   /* keep MSA consistent with WT-blue */
    --c-constraint-base: var(--c-msa);
}

/* WT-guided RIGHT card background: more blue tint, less muddy */
.mode-intro[data-mode="wt_guided"]::before{
    background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--wt-accent) 15%, white) 0%,
            color-mix(in srgb, var(--wt-accent) 9%,  white) 55%,
            rgba(255,255,255,0) 100%
    ) !important;
}

/* WT-guided pills/tags inside the right card: make them bluer & crisper */
.mode-intro[data-mode="wt_guided"] .pill{
    background: color-mix(in srgb, var(--wt-accent) 11%, white) !important;
    color: var(--wt-accent) !important;
    border: 1px solid color-mix(in srgb, var(--wt-accent) 22%, var(--panel-border)) !important;
}
.mode-intro[data-mode="wt_guided"] .feature-tag{
    background: color-mix(in srgb, var(--wt-accent) 11%, white) !important;
    border-color: color-mix(in srgb, var(--wt-accent) 26%, var(--panel-border)) !important;
    color: var(--wt-accent) !important;
}

/* Keep MSA badge clean blue */
/*.msa-badge{*/
/*    background: color-mix(in srgb, var(--c-msa) 9%, white) !important;*/
/*    border: 1px solid color-mix(in srgb, var(--c-msa) 20%, var(--panel-border)) !important;*/
/*    color: color-mix(in srgb, var(--c-msa) 78%, var(--mist-ink)) !important;*/
/*}*/

/* =========================================================
   Unify right-side summary text color to MSA blue
   (GO / InterPro / EC, Motifs / Secondary Structure, MSA Profile)
   ========================================================= */
details.constraint.anno summary small,
details.constraint.anno summary .muted,
details.constraint.anno summary .right,
details.constraint.anno summary .hint,
details.constraint.anno summary .tag,
details.constraint.struct summary small,
details.constraint.struct summary .muted,
details.constraint.struct summary .right,
details.constraint.struct summary .hint,
details.constraint.struct summary .tag,
details.constraint.msa summary small,
details.constraint.msa summary .muted,
details.constraint.msa summary .right,
details.constraint.msa summary .hint,
details.constraint.msa summary .tag{
    color: color-mix(in srgb, var(--c-msa) 78%, #64748b) !important;
}

details.constraint::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:14px;
    pointer-events:none;
    background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0) 55%);
    opacity: 0.35;
}