/* банк-калькулятор | legume
   Грузится внутрь Shadow DOM скриптом bank-calc.js — стили форума сюда не
   долетают, эти наружу не вытекают. Дизайн правится ТОКЕНАМИ ниже.

   Как перекрасить под форум, не трогая этот файл — в стилях форума:
     .custom_tag_bank { --lbank-accent: #c06; --lbank-card: #fff; }
   (CSS-переменные — единственное, что проходит сквозь Shadow DOM.)

   По умолчанию токены цепляются к переменным Риджа (--link, --text,
   --catbody, --font…), а если их нет — берут нейтральные значения.
   Тёмная тема: скрипт ставит хосту атрибут data-dark, когда на html/body
   есть .dark (селектор меняется data-dark у <script>). */

:host{
    all:initial;
    display:block;

    --_card:var(--lbank-card, #e7e9e8);
    --_row:var(--lbank-row, rgba(255, 255, 255, .55));
    --_line:var(--lbank-line, rgba(var(--text, 30, 30, 32), .12));
    --_txt:var(--lbank-text, rgba(var(--text, 30, 30, 32), .85));
    --_hi:var(--lbank-text-hi, rgb(var(--text, 30, 30, 32)));
    --_dim:var(--lbank-text-dim, rgba(var(--text, 30, 30, 32), .5));
    --_acc:var(--lbank-accent, rgb(var(--link, 56, 108, 110)));
    --_on:var(--lbank-on, rgba(var(--link, 56, 108, 110), .1));
    --_on-line:var(--lbank-on-line, rgba(var(--link, 56, 108, 110), .35));
    --_earn:var(--lbank-earn, #3f7f6a);
    --_spend:var(--lbank-spend, #a0504a);
    --_btn:var(--lbank-btn, rgba(var(--text, 30, 30, 32), .07));
    --_act:var(--lbank-act, #2f4a4c);
    --_act-txt:var(--lbank-act-text, #eef2f1);
    --_shadow:var(--lbank-shadow, 0 14px 40px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .45));
    --_radius:var(--lbank-radius, 26px);
    --_max:var(--lbank-max-width, 880px);
    --_serif:var(--lbank-font-title, var(--font2, 'The Silver Editorial', Georgia, serif));
    --_sans:var(--lbank-font, var(--font, 'Rubik', sans-serif));
    --_caps:var(--lbank-font-caps, var(--font5, 'Jost', sans-serif));
}
:host([data-dark]){
    --_card:var(--lbank-card-dark, rgb(var(--catbody, 31, 31, 35)));
    --_row:var(--lbank-row-dark, rgba(255, 255, 255, .035));
    --_line:var(--lbank-line-dark, rgba(255, 255, 255, .08));
    --_txt:var(--lbank-text-dark, rgba(var(--text, 226, 226, 230), .85));
    --_hi:var(--lbank-text-hi-dark, rgb(var(--text, 226, 226, 230)));
    --_dim:var(--lbank-text-dim-dark, rgba(var(--text, 226, 226, 230), .45));
    --_btn:var(--lbank-btn-dark, rgba(255, 255, 255, .07));
    --_earn:var(--lbank-earn-dark, #7cc2a8);
    --_spend:var(--lbank-spend-dark, #d08a80);
    --_act:var(--lbank-act-dark, #1f5557);
    --_shadow:var(--lbank-shadow-dark, 0 14px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .05));
}

*, *::before, *::after{ box-sizing:border-box; }
button, input{ font:inherit; color:inherit; margin:0; }

.bank{
    max-width:var(--_max);
    margin:6px auto 14px;
    padding:22px 24px 20px;
    border-radius:var(--_radius);
    background:var(--_card);
    box-shadow:var(--_shadow);
    color:var(--_txt);
    font:400 11.5px/1.45 var(--_sans);
    text-align:left;
}

.cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.h{
    display:flex; align-items:center; gap:10px;
    margin:0 0 10px;
    font:italic 400 20px/1 var(--_serif);
    color:var(--_hi);
}
.h::after{ content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg, var(--_acc), transparent); opacity:.5; }
.col--earn .h{ color:var(--_earn); }
.col--spend .h{ color:var(--_spend); }
.sub{
    margin:10px 0 6px 4px;
    font:500 9px/1 var(--_caps);
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--_dim);
}
.gap{ height:10px; }

.row{
    margin:0 0 4px;
    padding:6px 8px 6px 12px;
    border-radius:14px;
    background:var(--_row);
    box-shadow:inset 0 0 0 1px var(--_line);
    transition:background .2s ease, box-shadow .2s ease;
}
.row.is-on{ background:var(--_on); box-shadow:inset 0 0 0 1px var(--_on-line); }
.top{ display:flex; align-items:center; gap:10px; }
.name{ flex:1 1 auto; min-width:0; }
.price{ flex:none; font:500 11px/1 var(--_caps); letter-spacing:.04em; }
.col--earn .price{ color:var(--_earn); }
.col--spend .price{ color:var(--_spend); }
.ctl{ flex:none; display:flex; align-items:center; gap:4px; }
.btn{
    width:24px; height:24px;
    padding:0;
    border:none;
    border-radius:50%;
    font:400 15px/24px var(--_sans);
    color:var(--_hi);
    background:var(--_btn);
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
}
.btn:hover{ color:#fff; background:var(--_acc); }
.n{ min-width:20px; text-align:center; font:500 12px/1 var(--_caps); color:var(--_hi); }
.proof{
    display:none;
    width:100%;
    margin:6px 0 2px;
    padding:6px 12px;
    border:none;
    border-radius:10px;
    font:400 11px/1.3 var(--_sans);
    color:var(--_txt);
    background:var(--_card);
    box-shadow:inset 0 0 0 1px var(--_line);
    outline:none;
}
.proof::placeholder{ color:var(--_dim); }
.row.is-on .proof{ display:block; }
.proof:focus{ box-shadow:inset 0 0 0 1px var(--_acc); }
.proof.is-err{ box-shadow:inset 0 0 0 1px var(--_spend); }

/* отбивка */
.sum{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
    margin:18px 0 0;
    padding-top:16px;
    border-top:1px solid var(--_line);
}
.s{
    padding:10px 14px;
    border-radius:16px;
    background:var(--_row);
    box-shadow:inset 0 0 0 1px var(--_line);
    text-align:center;
}
.s span{ display:block; margin-bottom:4px; font:500 8.5px/1 var(--_caps); letter-spacing:.24em; text-transform:uppercase; color:var(--_dim); }
.s b{ font:400 20px/1.1 var(--_serif); }
.s--earn b{ color:var(--_earn); }
.s--spend b{ color:var(--_spend); }
.s--total{ background:var(--_on); box-shadow:inset 0 0 0 1px var(--_on-line); }
.s--total b{ color:var(--_hi); }
.s--total.is-neg b{ color:var(--_spend); }

.acts{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.note{ flex:1 1 auto; font-size:11px; color:var(--_spend); }
.act{
    padding:6px 16px 7px;
    border:none;
    border-radius:999px;
    font:var(--lbank-act-font, italic 400 15px/1.2 var(--_serif));
    color:var(--_act-txt);
    background:var(--_act);
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}
.act:hover{ background:var(--_acc); transform:translateY(-1px); }
.act--soft, .act--soft:hover{ color:var(--_txt); background:var(--_row); box-shadow:inset 0 0 0 1px var(--_line); }

/* ширину меряем у самого калькулятора: у qsdb нет meta viewport, @media врёт */
.bank{ container-type:inline-size; }
@container (max-width:600px){
    .cols, .sum{ grid-template-columns:1fr; }
}