/* ============================================================================
   synergy-display.css — fused runes in the rune table, and the manager
   ----------------------------------------------------------------------------
   Violet deliberately, not green: green already means "custom rune" in the
   rune table (custom-runes-backend.css) and the two must not read alike.
   ========================================================================== */

/* ── a synergy in the rune table ──────────────────────────────────────── */
.runes-table tbody tr.synergy-rune-row {
    background: rgba(167, 139, 250, 0.11) !important;
    border-left: 3px solid rgba(167, 139, 250, 0.7);
}
.runes-table tbody tr.synergy-rune-row:nth-child(even) {
    background: rgba(167, 139, 250, 0.09) !important;
}
.runes-table tbody tr.synergy-rune-row:hover,
.runes-table tbody tr.synergy-rune-row:nth-child(even):hover {
    background: rgba(167, 139, 250, 0.2) !important;
    box-shadow: 0 4px 16px rgba(167, 139, 250, 0.28);
}
.runes-table tbody tr.synergy-rune-row .rune-name {
    color: #c4b5fd !important;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(167, 139, 250, 0.4);
    /* "storm (create + air + bestow + cold)" needs room to wrap rather than
       spilling into the description column. */
    white-space: normal;
    line-height: 1.35;
}
.runes-table tbody tr.synergy-rune-row .col-runic {
    color: #b9a8f5;
    font-style: italic;
    white-space: normal;
}

/* ── the manager ──────────────────────────────────────────────────────── */
.syn-manager-modal { max-width: 860px; width: 96vw; }

.syn-field input,
.syn-field input:focus,

.syn-editor-msg { flex: 1 1 auto; font-size: 12.5px; min-width: 0; }
.syn-msg-error { color: #f4a4a4; }
.syn-msg-info  { color: #9ca3af; font-style: italic; }

.syn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.syn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.syn-table thead th {
    position: sticky;
    top: 0;
    padding: 9px 10px;
    background: rgba(18, 17, 28, 0.98);
    border-bottom: 1px solid rgba(167, 139, 250, 0.3);
    color: #9ca3af;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.syn-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
    color: #d6d9e0;
}
.syn-row-own { background: rgba(167, 139, 250, 0.09); }
.syn-row:hover { background: rgba(167, 139, 250, 0.15); }
.syn-col-name { font-weight: 600; color: #c4b5fd; white-space: nowrap; }
.syn-col-runes { min-width: 200px; }
.syn-runes-list { color: #b9a8f5; font-style: italic; }
.syn-rune-count {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    font-size: 10.5px;
    color: #9ca3af;
}
.syn-col-tier { text-align: right; white-space: nowrap; }
.syn-col-act { text-align: right; white-space: nowrap; }
.syn-tag-own {
    margin-left: 7px;
    padding: 1px 6px;
    background: rgba(123, 201, 166, 0.2);
    border: 1px solid rgba(123, 201, 166, 0.45);
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: 0.05em;
    color: #7bc9a6;
}
.syn-type-essence  { color: #7bc9a6; }
.syn-type-form     { color: #5b9bd5; }
.syn-type-additive { color: #d9a441; }
.syn-empty { padding: 22px 10px; text-align: center; color: #9ca3af; font-style: italic; }

@media (max-width: 640px) {
            .syn-editor-msg { flex: 1 1 100%; order: -1; }
    .syn-table { font-size: 12px; }
    .syn-col-runes { min-width: 150px; }
}

/* ── the view switch, when it sits on the manager ─────────────────────────
   Same .syn-pill markup as the settings menu (draw-cast.css styles the switch
   itself); this only gives it a frame in its new home. */
.syn-view-switch {
    /* The modal is a flex column, so this was shrinking to 7.8px around a
       56.9px pill and `overflow: hidden` cropped it to a sliver. */
    flex: 0 0 auto;
    margin: 0 0 14px;
    border: 1px solid rgba(123, 201, 166, 0.28);
    border-radius: 12px;
    background: rgba(123, 201, 166, 0.06);
    overflow: hidden;
}
.syn-view-switch .syn-pill {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
}

/* ── the view switch label ────────────────────────────────────────────────
   `.syn-pill-text` is a flex item with `flex: 0 1 auto`, so its width settled
   on the TITLE ("Enable synergy view", 127.7px). The sub-line is longer in the
   on-state — "29 synergies shown in the rune list" — and simply ran out of the
   box and over whatever sat beside it. Letting the column grow fixes both
   copies of the switch at once. */
.syn-pill {
    align-items: center;
    gap: 11px;
}
.syn-pill-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.syn-pill-title {
    line-height: 1.3;
    white-space: normal;
}
.syn-pill-sub {
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ── lean manager: blurb, switch, one scrolling table, footer ──────────── */
.syn-manager-modal {
    max-width: 960px;
    width: 96vw;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}

.syn-blurb {
    flex: 0 0 auto;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #9ca3af;
}
.syn-blurb strong { color: #c4b5fd; }
.syn-blurb em { color: #b9a8f5; font-style: italic; }

/* the table is the window you scroll — the modal itself does not */
.syn-table-wrap {
    flex: 1 1 auto;
    min-height: 140px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(167, 139, 250, 0.22);
    border-radius: 10px;
}

.syn-in {
    width: 100%;
    min-width: 0;
    padding: 5px 7px;
    background: rgba(12, 12, 20, 0.7);
    border: 1px solid rgba(167, 139, 250, 0.22);
    border-radius: 6px;
    color: #e8eaf0;
    font-family: 'Lora', serif;
    font-size: 12.5px;
    box-sizing: border-box;
}
.syn-in:focus { outline: none; border-color: rgba(167, 139, 250, 0.6); }
.syn-in-tier { text-align: right; }
.syn-row-new .syn-in { border-style: dashed; }
.syn-row-new .syn-col-name::before {
    content: 'new';
    display: block;
    margin-bottom: 3px;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7bc9a6;
}
.syn-desc-ro { color: #8b93a1; font-size: 12px; }
.syn-col-desc { min-width: 170px; }

.syn-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
}
.syn-foot .syn-editor-msg { flex: 1 1 auto; font-size: 12.5px; min-width: 0; }
.syn-clear-btn {
    padding: 9px 16px;
    background: rgba(220, 90, 110, 0.12);
    border: 1px solid rgba(220, 90, 110, 0.4);
    border-radius: 8px;
    color: #f0a0ae;
    font-family: 'Lora', serif;
    font-size: 13px;
    cursor: pointer;
}
.syn-clear-btn:hover { background: rgba(220, 90, 110, 0.22); }

@media (max-width: 640px) {
    .syn-manager-modal { max-height: 92vh; }
    .syn-blurb { font-size: 12px; }
    .syn-col-desc { min-width: 130px; }
    .syn-foot { flex-wrap: wrap; }
    .syn-foot .syn-editor-msg { flex: 1 1 100%; order: -1; }
}

/* ── tier is worked out, not typed ────────────────────────────────────── */
.syn-table th.syn-col-tier small {
    display: block;
    margin-top: 1px;
    font-size: 8.5px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #7bc9a6;
    opacity: 0.85;
}
.syn-tier-auto {
    display: inline-block;
    min-width: 22px;
    padding: 3px 7px;
    background: rgba(123, 201, 166, 0.1);
    border: 1px solid rgba(123, 201, 166, 0.28);
    border-radius: 6px;
    color: #7bc9a6;
    font-weight: 600;
    text-align: center;
}
.syn-tier-auto.syn-tier-pending {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.12);
    color: #6b7280;
    font-weight: 400;
}

/* discount is authored; tier is derived from it */
.syn-col-disc { white-space: nowrap; text-align: right; }
.syn-in-disc { width: 62px; text-align: right; }