/* EV Calculator — page-specific styles
 *  (global site styles remain in /css/style.css) */

.calc-wrap {
    max-width: 820px;
    margin: 6rem auto 4rem;
    padding: 0 2rem;
}
.calc-header { margin-bottom: 2rem; }
.calc-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fafafa;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}
.calc-subtitle { font-size: 0.9375rem; color: #6b7280; }

.inputs-block {
    background: rgba(23,23,23,0.95);
    border: 1px solid rgba(55,65,81,0.4);
    border-radius: 6px;
    padding: 2rem;
    margin-bottom: 1.25rem;
}
.row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.5rem;
}
.field input[type="text"],
.field input[type="number"] {
    width: 100%;
    background: rgba(9,12,16,0.8);
    border: 1px solid rgba(55,65,81,0.5);
    border-radius: 4px;
    padding: 0.65rem 0.875rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    color: #fafafa;
    outline: none;
    transition: border-color 0.2s;
}
.field input:focus { border-color: rgba(96,165,250,0.5); }
.field input::placeholder { color: #4b5563; }

.scenarios-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 1rem;
}
.scenario-list { display: flex; flex-direction: column; gap: 1rem; }
.scenario-card {
    border: 1px solid rgba(55,65,81,0.35);
    border-radius: 5px;
    padding: 1rem 1.25rem 1.25rem;
    background: rgba(9,12,16,0.4);
}
.scenario-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}
.scenario-card-num {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4b5563;
    font-family: 'Inter', sans-serif;
}
.remove-btn {
    background: none; border: none; color: #4b5563;
    font-size: 1rem; cursor: pointer; padding: 0; line-height: 1;
    transition: color 0.2s;
}
.remove-btn:hover { color: #fca5a5; }
.remove-btn:disabled { opacity: 0.2; cursor: not-allowed; }
.scenario-top-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 0.875rem;
}
.prob-input-wrap { position: relative; }
.prob-input-wrap input { padding-right: 2rem; }
.prob-suffix {
    position: absolute; right: 0.75rem; top: 50%;
    transform: translateY(-50%);
    color: #6b7280; font-size: 0.875rem; pointer-events: none;
}
.prob-total-row {
    display: flex; justify-content: flex-end;
    align-items: center; gap: 0.5rem;
    margin-top: 1rem; font-size: 0.8125rem;
}
.prob-total-label { color: #6b7280; }
.prob-total-val { font-family: 'Inter', sans-serif; font-weight: 600; color: #fafafa; }
.prob-total-val.over { color: #fca5a5; }
.prob-total-val.ok   { color: #6ee7b7; }

.actions-row { display: flex; gap: 0.875rem; margin-top: 1.5rem; }
.btn-add {
    background: none; border: 1px solid rgba(55,65,81,0.5); border-radius: 4px;
    color: #d1d5db; font-family: 'Inter', sans-serif; font-size: 0.875rem;
    font-weight: 500; padding: 0.6rem 1.25rem; cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.btn-add:hover { border-color: rgba(96,165,250,0.4); color: #93c5fd; }
.btn-calc {
    background: #60a5fa; border: none; border-radius: 4px;
    color: #090c10; font-family: 'Inter', sans-serif; font-size: 0.875rem;
    font-weight: 700; padding: 0.6rem 1.75rem; cursor: pointer;
    letter-spacing: 0.03em; transition: background 0.2s;
}
.btn-calc:hover { background: #93c5fd; }

/* RESULTS */
.results-block {
    background: rgba(23,23,23,0.95);
    border: 1px solid rgba(55,65,81,0.4);
    border-radius: 6px; padding: 2rem;
    margin-bottom: 1.25rem; display: none;
}
.results-block.visible { display: block; }

.section-label {
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #6b7280; margin-bottom: 1.25rem;
}
.section-note {
    font-size: 0.8125rem; color: #6b7280;
    margin-top: -0.875rem; margin-bottom: 1.25rem; line-height: 1.5;
}

/* EV CARDS */
.ev-summary {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 1rem; margin-bottom: 2rem;
}
.ev-card {
    background: rgba(9,12,16,0.6);
    border: 1px solid rgba(55,65,81,0.3);
    border-radius: 4px; padding: 1.25rem; min-width: 0;
}
.ev-card-label {
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #6b7280; margin-bottom: 0.5rem;
}
.ev-card-val {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.875rem, 2vw, 1.375rem);
    font-weight: 600; color: #fafafa; line-height: 1.2;
    word-break: break-all;
}
.ev-card-val.positive { color: #6ee7b7; }
.ev-card-val.negative { color: #fca5a5; }
.ev-card-val.neutral  { color: #fcd34d; }
.ev-card-sub { font-size: 0.72rem; color: #6b7280; margin-top: 0.3rem; }

/* OUTCOME BREAKDOWN */
.chart-rows { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 2rem; }
.chart-row {
    display: grid; grid-template-columns: 130px 1fr 90px;
    gap: 1rem; align-items: center;
}
.chart-row-name {
    font-size: 0.8125rem; color: #9ca3af;
    text-align: right; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.bar-track {
    background: rgba(55,65,81,0.2); border-radius: 2px;
    height: 24px; overflow: hidden;
}
.bar-fill {
    height: 100%; border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.chart-row-price {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem; color: #d1d5db;
    text-align: right; white-space: nowrap;
}
.chart-divider { border: none; border-top: 1px solid rgba(55,65,81,0.3); margin: 0.375rem 0; }

/* RISK/REWARD */
.rr-cards {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 1rem; margin-bottom: 1.5rem;
}
.rr-card {
    background: rgba(9,12,16,0.6);
    border: 1px solid rgba(55,65,81,0.3);
    border-radius: 4px; padding: 1.25rem; min-width: 0;
}
.rr-card-label {
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #6b7280; margin-bottom: 0.5rem;
}
.rr-card-val {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.875rem, 2vw, 1.375rem);
    font-weight: 600; color: #fafafa; line-height: 1.2;
    word-break: break-all;
}
.rr-card-val.positive { color: #6ee7b7; }
.rr-card-val.negative { color: #fca5a5; }
.rr-card-val.neutral  { color: #fcd34d; }
.rr-card-sub { font-size: 0.75rem; color: #6b7280; margin-top: 0.4rem; }

/* NUMBER LINE */
.number-line-wrap {
    margin-bottom: 1.5rem; padding: 1rem 1.25rem 1.25rem;
    background: rgba(9,12,16,0.4);
    border: 1px solid rgba(55,65,81,0.3); border-radius: 4px;
}
.nl-ratio-text {
    font-size: 0.8125rem; color: #9ca3af;
    margin-bottom: 1rem; font-family: 'Inter', sans-serif;
}
.nl-ratio-text strong { color: #fafafa; }
.number-line-track {
    position: relative; height: 6px;
    background: rgba(55,65,81,0.3); border-radius: 3px;
    margin: 2.25rem 5% 1.75rem;
}
.nl-down {
    position: absolute; height: 100%;
    border-radius: 3px 0 0 3px; background: #fca5a5;
    right: 50%; top: 0;
}
.nl-up {
    position: absolute; height: 100%;
    border-radius: 0 3px 3px 0; background: #6ee7b7;
    left: 50%; top: 0;
}
.nl-center {
    position: absolute; width: 10px; height: 10px;
    background: #fafafa; border-radius: 50%;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.nl-label {
    position: absolute; font-size: 0.72rem;
    font-family: 'Inter', sans-serif;
    top: -1.75rem; white-space: nowrap;
    max-width: 90px; overflow: hidden;
    text-overflow: ellipsis; text-align: center;
}
.nl-label-down { color: #fca5a5; left: 0%; transform: translateX(0); }
.nl-label-up   { color: #6ee7b7; right: 0%; left: auto; transform: translateX(0); text-align: right; }
.nl-label-curr { color: #fafafa; left: 50%; transform: translateX(-50%); }
.nl-legend {
    display: flex; justify-content: space-between;
    font-size: 0.72rem; color: #6b7280; margin-top: 0.5rem;
}

/* RR VERDICT */
.rr-verdict {
    padding: 0.875rem 1.25rem; border-radius: 4px;
    font-size: 0.8125rem; line-height: 1.55;
}
.rr-verdict.favorable    { background: rgba(110,231,183,0.06); border: 1px solid rgba(110,231,183,0.2); color: #d1d5db; }
.rr-verdict.unfavorable  { background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.2); color: #d1d5db; }
.rr-verdict.neutral-shape{ background: rgba(252,211,77,0.06);  border: 1px solid rgba(252,211,77,0.2);  color: #d1d5db; }
.rr-verdict strong { color: #fafafa; }

/* CANVAS */
#ev-canvas { width: 100%; border-radius: 6px; display: block; margin-bottom: 0.875rem; }
.btn-download {
    background: none; border: 1px solid rgba(55,65,81,0.5);
    border-radius: 4px; color: #d1d5db;
    font-family: 'Inter', sans-serif; font-size: 0.8125rem;
    font-weight: 500; padding: 0.6rem 1.25rem; cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.btn-download:hover { border-color: rgba(96,165,250,0.4); color: #93c5fd; }

/* SENSITIVITY */
.sens-rows { display: flex; flex-direction: column; gap: 1.25rem; }
.sens-row-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 0.5rem;
}
.sens-name { font-size: 0.875rem; color: #d1d5db; font-weight: 500; }
.sens-vals {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem; color: #9ca3af;
    display: flex; gap: 1rem;
}
.sens-ev-val { font-weight: 600; }
.sens-ev-val.positive { color: #6ee7b7; }
.sens-ev-val.negative { color: #fca5a5; }
.sens-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px; border-radius: 2px;
    background: rgba(55,65,81,0.4); outline: none; cursor: pointer;
}
.sens-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #60a5fa; cursor: pointer;
}

/* SHARE */
.share-block {
    background: rgba(23,23,23,0.95);
    border: 1px solid rgba(55,65,81,0.4);
    border-radius: 6px; padding: 1.5rem 2rem;
    margin-bottom: 1.25rem; display: none;
}
.share-block.visible { display: block; }
.share-row { display: flex; gap: 0.75rem; align-items: center; }
.share-url {
    flex: 1; background: rgba(9,12,16,0.8);
    border: 1px solid rgba(55,65,81,0.4); border-radius: 4px;
    padding: 0.6rem 0.875rem;
    font-family: 'Inter', sans-serif; font-size: 0.72rem;
    color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-copy {
    background: none; border: 1px solid rgba(55,65,81,0.5);
    border-radius: 4px; color: #d1d5db;
    font-family: 'Inter', sans-serif; font-size: 0.8125rem;
    font-weight: 500; padding: 0.6rem 1.25rem; cursor: pointer;
    white-space: nowrap; transition: border-color 0.2s, color 0.2s;
}
.btn-copy:hover { border-color: rgba(96,165,250,0.4); color: #93c5fd; }
.btn-copy.copied { border-color: rgba(110,231,183,0.4); color: #6ee7b7; }

/* HOW TO USE */
.how-block {
    background: rgba(59,130,246,0.04);
    border: 1px solid rgba(96,165,250,0.15);
    border-radius: 6px; padding: 1.5rem 2rem; margin-bottom: 1.25rem;
}
.how-title {
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #60a5fa; margin-bottom: 1rem;
}
.how-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.how-step-num {
    font-size: 0.72rem; font-weight: 700; color: #60a5fa;
    margin-bottom: 0.3rem; font-family: 'Inter', sans-serif;
}
.how-step-text { font-size: 0.8125rem; color: #9ca3af; line-height: 1.5; margin: 0; }

.divider { border: none; border-top: 1px solid rgba(55,65,81,0.3); margin: 2rem 0; }

/* utilities — replace former inline style="" attributes so style-src can drop 'unsafe-inline' */
.hidden { display: none; }
.leg-neg { color: #fca5a5; }
.leg-mid { color: #9ca3af; }
.leg-pos { color: #6ee7b7; }
.btn-download.is-spaced { margin-top: 0.875rem; }
.share-label-tight { margin-bottom: 0.75rem; }
.share-note { font-size: 0.8125rem; color: #6b7280; margin-bottom: 0.875rem; }
.footer-rule { margin: 2.5rem 0; opacity: 0.3; }

@media (max-width: 640px) {
    .row-2 { grid-template-columns: 1fr; }
    .scenario-top-row { grid-template-columns: 1fr 1fr; }
    .scenario-top-row .field:first-child { grid-column: 1/-1; }
    .ev-summary { grid-template-columns: 1fr 1fr; }
    .rr-cards { grid-template-columns: 1fr 1fr; }
    .chart-row { grid-template-columns: 100px 1fr 75px; }
    .how-steps { grid-template-columns: repeat(2,1fr); }
}