/* AI Budget Planner: builds on /styles.css tokens and /tools/shared/learn.css */

/* Hero */
.bp-hero { padding-bottom: clamp(88px, 10vw, 140px); }
.bp-back { margin-bottom: 28px; }
.bp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.bp-meta .chip { background: rgba(255, 255, 255, .85); }

/* Section shells */
.bp { background: var(--bg-2); padding: clamp(56px, 7vw, 100px) 0 clamp(64px, 8vw, 110px); scroll-margin-top: 64px; }
.bp-monitor { padding: clamp(64px, 8vw, 110px) 0; }
.bp-prices { background: var(--bg-2); padding: clamp(64px, 8vw, 110px) 0; }
.bp-head h2 { margin-top: 14px; font-size: clamp(30px, 3.4vw, 46px); max-width: 20ch; }
.bp-head > p:not(.mono) { margin-top: 16px; max-width: 36em; color: var(--text); }
.bp-head--wide { margin-bottom: 36px; }
.bp-card { background: #fff; border: 1px solid var(--line); padding: clamp(20px, 2.4vw, 32px); }
.bp-card h3 { margin-top: 10px; font-size: clamp(22px, 2vw, 28px); }
.bp-sub { margin-top: 8px; font-size: 16px; color: var(--text); max-width: 46em; }
.bp-print-head { display: none; }

/* Controls */
.bp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bp-field > span, .bp-field > label > span { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); display: flex; justify-content: space-between; gap: 8px; }
.bp-field small { font-size: 14px; line-height: 1.4; color: var(--soft); }
.bp-field input[type="number"], .bp-field input[type="text"], .bp-field input[type="month"], .bp-field select, .bp-wl__name, .bp-paste textarea, .bp-money input, .bp-budget__in input {
  width: 100%; min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid #c9ccd2; border-radius: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.bp-field select, .bp-pages { appearance: none; -webkit-appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230d2463' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; }
.bp-field input:hover, .bp-field select:hover, .bp-paste textarea:hover { border-color: #9aa0aa; }
.bp-field input:focus, .bp-field select:focus, .bp-wl__name:focus, .bp-paste textarea:focus, .bp-money input:focus, .bp-budget__in input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.bp-field--inline { flex-direction: column; }
.bp-field input[type="range"] { width: 100%; height: 44px; accent-color: var(--blue); cursor: pointer; }
.bp-val { color: var(--blue); font-family: var(--mono); }
.bp-pages { margin-top: 6px; width: 100%; min-height: 44px; padding: 0 34px 0 12px; font: inherit; font-size: 14px; color: var(--blue); border: 1px dashed #b9c6ff; border-radius: 0; cursor: pointer; }
.bp-pages:focus { outline: none; border-color: var(--blue); border-style: solid; }

.bp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px #c9ccd2; background: #fff; transition: box-shadow .25s ease, color .25s ease, background-color .25s ease, transform .2s var(--ease); }
.bp-btn:hover { box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue); }
.bp-btn:active { transform: scale(.98); }
.bp-btn--blue { background: var(--blue); color: #fff; box-shadow: none; }
.bp-btn--blue:hover { background: var(--blue-deep); color: #fff; box-shadow: none; }
.bp-link { min-height: 44px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); text-decoration: underline; text-underline-offset: 4px; }
.bp-link:hover { color: var(--blue); }

/* Layout */
.bp-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.bp-summary { position: sticky; top: 88px; }

/* Help */
.bp-help { margin-top: 28px; display: grid; gap: 8px; }
.bp-help .lx-why { margin-top: 0; }
.bp-convert { margin-top: 20px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); }
.bp-convert > .mono { color: var(--navy); }
.bp-convert__row { margin-top: 10px; display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }
.bp-convert__row .bp-field { width: 140px; }
.bp-convert__eq { font-size: 24px; color: var(--soft); padding-bottom: 6px; }
.bp-convert__out { font-size: 20px; font-weight: 500; color: var(--blue); padding-bottom: 8px; letter-spacing: -.01em; }
.bp-convert__rule { margin-top: 10px; font-size: 15px; color: var(--text); }

/* Workload cards */
.bp-list { margin-top: 24px; display: grid; gap: 16px; }
.bp-empty { padding: 28px; border: 1px dashed #c9ccd2; color: var(--text); background: #fff; }
.bp-wl { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--c, var(--blue)); padding: 18px clamp(16px, 2vw, 24px) 20px; animation: bpIn .5s var(--ease) both; }
@keyframes bpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bp-wl__head { display: flex; align-items: center; gap: 10px; }
.bp-wl__sw { flex: none; width: 12px; height: 12px; background: var(--c); }
.bp-wl__name { font-size: 19px !important; font-weight: 500; letter-spacing: -.01em; border-color: transparent !important; padding: 0 8px !important; margin-left: -8px; }
.bp-wl__name:hover { border-color: #c9ccd2 !important; }
.bp-wl__name:focus { border-color: var(--blue) !important; }
.bp-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--soft); transition: color .2s ease, background-color .2s ease; }
.bp-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bp-x:hover { color: var(--blue); background: #f3f5ff; }
.bp-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 18px; }
.bp-field--wide, .bp-custom { grid-column: 1 / -1; }
.bp-custom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; background: #f3f5ff; }
.bp-toggle { display: flex; align-items: center; gap: 14px; min-height: 44px; cursor: pointer; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 14px; }
.bp-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bp-toggle__ui { flex: none; position: relative; width: 46px; height: 26px; background: #c9ccd2; transition: background-color .25s var(--ease); }
.bp-toggle__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; transition: transform .25s var(--ease); }
.bp-toggle input:checked + .bp-toggle__ui { background: var(--blue); }
.bp-toggle input:checked + .bp-toggle__ui::after { transform: translateX(20px); }
.bp-toggle input:focus-visible + .bp-toggle__ui { outline: 2px solid var(--blue); outline-offset: 3px; }
.bp-toggle b { display: block; font-weight: 500; font-size: 15px; }
.bp-toggle small { display: block; font-size: 13px; color: var(--soft); line-height: 1.4; }
.bp-wl__cost { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text); }
.bp-wl__cost b { color: var(--navy); font-weight: 600; font-size: 16px; }
.bp-add { margin-top: 18px; display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.bp-add .bp-field { flex: 1 1 240px; }

/* Summary card */
.bp-totals { border-top: 3px solid var(--blue); }
.bp-totals > .mono { color: var(--navy); }
.bp-budget { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.bp-budget > .mono { color: var(--soft); font-size: 12px; }
.bp-budget__in { position: relative; display: block; }
.bp-budget__in > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--soft); }
.bp-budget__in input { padding-left: 26px; font-size: 18px; }
.bp-kpis { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.bp-kpi { padding: 14px 0; border-bottom: 1px solid var(--line); }
.bp-kpi:nth-child(odd):not(.bp-kpi--main) { padding-right: 12px; }
.bp-kpi--main { grid-column: 1 / -1; }
.bp-kpi dt { color: var(--soft); font-size: 12px; }
.bp-kpi dd { margin-top: 4px; font-size: 24px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bp-kpi--main dd { font-size: clamp(40px, 4vw, 54px); color: var(--blue); line-height: 1.05; }
.bp-fit, .bp-flag { position: relative; display: block; margin-top: 16px; padding: 10px 14px 10px 38px; font-size: 15px; background: var(--bg-2); border-left: 3px solid #c9ccd2; }
.bp-fit > span, .bp-flag > span { position: absolute; left: 14px; top: 10px; font-weight: 700; width: 1em; text-align: center; }
.is-ok.bp-fit, .is-ok.bp-flag { border-color: #1a7f4b; background: #eef7f1; }
.is-ok.bp-fit > span, .is-ok.bp-flag > span { color: #1a7f4b; }
.is-warn.bp-fit, .is-warn.bp-flag { border-color: #a15c00; background: #fff6e8; }
.is-warn.bp-fit > span, .is-warn.bp-flag > span { color: #a15c00; }
.is-over.bp-fit, .is-over.bp-flag { border-color: #b3261e; background: #fdeeed; }
.is-over.bp-fit > span, .is-over.bp-flag > span { color: #b3261e; }
.bp-mix { margin-top: 22px; }
.bp-mix > .mono { color: var(--soft); font-size: 12px; }
.bp-stack { margin-top: 10px; display: flex; height: 18px; background: var(--bg-2); overflow: hidden; }
.bp-stack span { display: block; height: 100%; transition: width .6s var(--ease); }
.bp-stack span + span { box-shadow: inset 2px 0 0 #fff; }
.bp-legend { margin-top: 12px; display: grid; gap: 6px; }
.bp-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.bp-legend i { width: 12px; height: 12px; }
.bp-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-legend b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--navy); }

/* What this means */
.bp-means { margin-top: clamp(32px, 4vw, 48px); border-left: 3px solid var(--blue); }
.bp-means__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.bp-means__body { margin-top: 14px; display: grid; gap: 10px; max-width: 62em; }
.bp-means__body p { color: var(--text); }
.bp-means__body b { color: var(--ink); font-weight: 600; }
.bp-means__body .bp-lead { font-size: clamp(19px, 1.6vw, 22px); color: var(--ink); letter-spacing: -.01em; }
.bp-means .bp-flag { margin-top: 4px; }
.lx-actions a.lx-act { text-decoration: none; }

/* Results grid */
.bp-results { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; }
.bp-proj { grid-column: 1 / -1; margin: 0; }
.bp-chart { margin-top: 18px; }
.bp-chart svg { width: 100%; height: auto; overflow: visible; }
.bp-grid-l { stroke: var(--line); stroke-width: 1; }
.bp-ax { font-family: var(--mono); font-size: 12px; fill: var(--soft); }
.bp-bar { fill: var(--blue); transform-box: fill-box; transform-origin: 50% 100%; transition: fill .2s ease; }
.bp-bar:hover { fill: var(--blue-deep); }
.is-intro .bp-bar { animation: bpGrow .8s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes bpGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bp-bud { stroke: var(--navy); stroke-width: 2; stroke-dasharray: 6 4; }
.bp-bud-t { font-family: var(--mono); font-size: 12px; fill: var(--navy); letter-spacing: .04em; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.bp-mark { fill: #b3261e; }
.bp-mark-t { font-family: var(--mono); font-size: 12px; fill: #b3261e; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.bp-dot { fill: #fff; stroke: #b3261e; stroke-width: 2.5; }
.bp-chart__key { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text); }
.bp-chart__key li { display: flex; align-items: center; gap: 8px; }
.bp-chart__key i { width: 14px; height: 10px; }
.k-plan { background: var(--blue); }
.k-over { background: repeating-linear-gradient(45deg, #0d2463 0 3px, #7f9bff 3px 5px); }
.k-bud { height: 0 !important; border-top: 2px dashed var(--navy); }
.k-act { width: 10px !important; border-radius: 50%; border: 2.5px solid #b3261e; background: #fff; }

/* Levers */
.bp-lever-list { margin-top: 18px; display: grid; gap: 0; }
.bp-lever { padding: 16px 0; border-top: 1px solid var(--line); }
.bp-lever__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.bp-lever h4 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.bp-lever__save b { font-size: 20px; font-weight: 500; color: var(--navy); font-variant-numeric: tabular-nums; }
.bp-lever__save span { font-size: 13px; color: var(--soft); margin-left: 4px; }
.bp-lever__bar { margin-top: 8px; height: 4px; background: var(--bg-2); }
.bp-lever__bar span { display: block; height: 100%; background: #7f9bff; transition: width .6s var(--ease); }
.bp-lever.is-best .bp-lever__bar span { background: var(--blue); }
.bp-lever.is-best .bp-lever__save b { color: var(--blue); }
.bp-lever > p { margin-top: 8px; font-size: 15px; color: var(--text); }
.bp-tag { display: inline-block; margin-left: 8px; padding: 2px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--blue); color: #fff; vertical-align: 2px; }

/* Tables */
.bp-scroll { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bp-scroll:focus-visible { outline-offset: 2px; }
.bp-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.bp-table th, .bp-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bp-table thead th { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); border-bottom-color: #c9ccd2; white-space: nowrap; }
.bp-table tbody th { font-weight: 500; }
.bp-table th small { display: block; font-size: 12px; color: var(--soft); font-weight: 400; }
.bp-table .r { text-align: right; white-space: nowrap; }
.bp-table tr.is-current { background: #f3f5ff; box-shadow: inset 3px 0 0 var(--blue); }
.bp-table .bp-tag { margin-left: 0; margin-top: 4px; }
.bp-down { color: #1a7f4b; }
.bp-up { color: var(--soft); }
.bp-models .bp-table td:nth-child(2) { color: var(--text); font-size: 14px; }

/* Monitor */
.bp-mon { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.bp-mon__bar { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.bp-mon__bar .bp-field { width: 200px; }
.bp-act { min-width: 560px; }
.bp-act td, .bp-act th { padding: 6px 10px; }
.bp-act tbody th { white-space: nowrap; font-weight: 400; }
.bp-m { display: inline-block; width: 34px; font-family: var(--mono); font-size: 12px; color: var(--soft); }
.bp-money { position: relative; display: block; width: 130px; }
.bp-money > span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--soft); font-size: 15px; }
.bp-money input { padding-left: 22px; font-size: 15px; }
.bp-act tr.is-over td:nth-child(4) { color: #b3261e; }
.bp-act tr.is-warn td:nth-child(4) { color: #a15c00; }
.bp-act tr.is-ok td:nth-child(4) { color: #1a7f4b; }
.bp-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.bp-st > span { font-weight: 700; width: 1em; text-align: center; }
.bp-st--ok > span { color: #1a7f4b; } .bp-st--warn > span { color: #a15c00; } .bp-st--over > span { color: #b3261e; }
.bp-mon__sum { margin-top: 18px; }
.bp-mon__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.bp-mon__kpis div { padding: 14px 12px 14px 0; }
.bp-mon__kpis dt { font-size: 12px; color: var(--soft); }
.bp-mon__kpis dd { margin-top: 4px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bp-mon__side { display: grid; gap: 20px; }
.bp-paste > label { color: var(--navy); display: block; }
.bp-paste textarea { margin-top: 12px; padding: 10px 12px; min-height: 120px; font-family: var(--mono); font-size: 14px; resize: vertical; }
.bp-paste .bp-btn { margin-top: 10px; }
.bp-paste code, .bp-csv-msg code { font-family: var(--mono); font-size: .9em; background: var(--bg-2); padding: 1px 4px; }
.bp-csv-msg:empty { display: none; }
.bp-csv-msg { margin-top: 12px; padding: 10px 14px; font-size: 14px; border-left: 3px solid #c9ccd2; background: var(--bg-2); }
.bp-csv-msg p > span { font-weight: 700; margin-right: 6px; }
.bp-csv-msg ul { margin-top: 6px; padding-left: 18px; list-style: disc; color: var(--text); }
.bp-csv-msg.is-ok { border-color: #1a7f4b; background: #eef7f1; } .bp-csv-msg.is-ok p > span { color: #1a7f4b; }
.bp-csv-msg.is-warn { border-color: #a15c00; background: #fff6e8; } .bp-csv-msg.is-warn p > span { color: #a15c00; }
.bp-csv-msg.is-err { border-color: #b3261e; background: #fdeeed; } .bp-csv-msg.is-err p > span { color: #b3261e; }
.bp-checks { margin-top: 12px; display: grid; gap: 10px; }
.bp-checks li { position: relative; padding-left: 28px; font-size: 16px; color: var(--text); }
.bp-checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border: 1.5px solid var(--blue); }
.bp-checks b { color: var(--ink); font-weight: 500; }
.bp-monitor .lx-note { margin-top: 0; }

/* Myth */
.bp-myth { margin-top: clamp(32px, 4vw, 48px); }

/* Prices */
.bp-prices .bp-head p a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.bp-ptable { background: #fff; min-width: 560px; }
.bp-notes { margin-top: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--text); }
.bp-notes b { color: var(--ink); font-weight: 500; }
.bp-disclaimer { margin-top: 18px; padding: 14px 18px; font-size: 14px; color: var(--text); border-left: 3px solid var(--navy); background: #fff; max-width: 62em; }

/* Responsive */
@media (max-width: 1020px) {
  .bp-layout, .bp-results, .bp-mon { grid-template-columns: minmax(0, 1fr); }
  .bp-summary { position: static; order: -1; }
}
@media (max-width: 640px) {
  .bp-custom { grid-template-columns: minmax(0, 1fr); }
  .bp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 12px; }
  .bp-grid .bp-field small { display: none; }
  .bp-mon__kpis { grid-template-columns: 1fr 1fr; }
  .bp-means__head .lx-actions { width: 100%; }
  .bp-convert__out { font-size: 17px; }
  .bp-models .bp-table th:nth-child(2), .bp-models .bp-table td:nth-child(2), .bp-ptable th:nth-child(2), .bp-ptable td:nth-child(2) { display: none; }
  .bp-ptable { min-width: 0; }
  .bp-table th, .bp-table td { padding: 10px 8px; }
  .bp-act { min-width: 0; }
  .bp-act thead { display: none; }
  .bp-act tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .bp-act tbody th, .bp-act tbody td { padding: 0; border: 0; }
  .bp-act tbody th { grid-column: 1 / -1; font-weight: 500; }
  .bp-act td[data-out="plan"]::before { content: "Plan "; color: var(--soft); font-size: 14px; }
  .bp-act td:nth-child(3) { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .bp-act td[data-out="var"], .bp-act td[data-out="st"] { grid-column: 1; }
  .bp-act td:empty { display: none; }
  .bp-money { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-wl, .is-intro .bp-bar { animation: none; }
  .bp-stack span, .bp-lever__bar span, .bp-toggle__ui, .bp-toggle__ui::after { transition: none; }
}

/* Print */
@media print {
  .bp-hero, .bp-help, .bp-convert, .bp-add, .bp-x, .bp-pages, .lx-actions, .bp-paste, .bp-mon__bar .bp-link, .lx-guide, .cta, .nav, .foot { display: none !important; }
  .bp, .bp-prices { background: #fff; padding: 0; }
  .bp-print-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .bp-layout, .bp-results, .bp-mon { grid-template-columns: 1fr; }
  .bp-summary { position: static; }
  .bp-card, .bp-wl { break-inside: avoid; }
}