/* ============================================================================
   Varelyno v11 — Sales deal and Custom project types. See v11-deal.js.
   Built on the QIP card family (v10-qip.css); only what is new lives here.
   A deal is amber, a custom project rose, so each is recognisable on any
   project colour.
   ========================================================================== */

.qip.deal{--qv:#c86f12}
.qip.cus{--qv:#b03a6e}
.qip-badge.deal{background:linear-gradient(135deg,#9a5b00,#7c4700);box-shadow:0 4px 10px -6px #c86f12}
.qip-badge.cus{background:linear-gradient(135deg,#b23e72,#8f2c5a);box-shadow:0 4px 10px -6px #b03a6e}
.detail-tab.deal-tab{color:#a85a0c}
.detail-tab.custom-tab{color:#9a2f60}
.detail-tab.deal-tab .qip-tab-count{background:color-mix(in srgb,#c86f12 13%,transparent);color:#a85a0c}
.detail-tab.custom-tab .qip-tab-count{background:color-mix(in srgb,#b03a6e 13%,transparent);color:#9a2f60}
.deal-glance{--qv:#c86f12}
.cus-glance{--qv:#b03a6e}

/* the type picker: five cards */
.qip-types.five{grid-template-columns:repeat(6,minmax(0,1fr))}
.qip-types.five>.qip-type-card{grid-column:span 2}
.qip-types.five>.qip-type-card:nth-child(n+4){grid-column:span 3}
@media(max-width:760px){.qip-types.five{grid-template-columns:1fr 1fr}.qip-types.five>.qip-type-card,.qip-types.five>.qip-type-card:nth-child(n+4){grid-column:auto}}
@media(max-width:640px){.qip-types.five{grid-template-columns:1fr}}

/* shared bits */
.deal-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.deal-stage-head{display:grid;gap:2px;margin-bottom:6px}
.deal-stage-head b{font-size:17px;letter-spacing:-.01em}
.deal-stage-head small{font-size:12.5px;color:var(--muted)}
.deal-say{margin:2px 0 10px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.deal-checks{display:grid;gap:4px;margin:4px 0 10px}
.deal-check{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:11px;border:1px solid var(--line);background:var(--surface,#fff)}
.deal-check label{flex:1;display:flex!important;align-items:center;gap:9px;margin:0!important;font-weight:500!important;font-size:13.5px;cursor:pointer;color:var(--text)}
.deal-check input{width:17px;height:17px;accent-color:var(--qv);flex:none}
.deal-check.done span{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.deal-check small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.deal-check small.late{color:#c0392b;font-weight:650}
.deal-check .btn.link{padding:2px 6px}

/* the stage bar: a lost deal greys out */
.deal-steps.is-lost li i{filter:grayscale(1);opacity:.6}
.deal-steps a,.cus-steps a{cursor:pointer}

/* the deal */
.deal-offer{display:block;margin-top:3px;font-size:14px;font-weight:550;color:var(--muted);letter-spacing:0}
.deal-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.deal-figs>div{display:grid;gap:2px;padding:10px 12px;border-radius:13px;background:color-mix(in srgb,var(--qv) 6%,var(--surface,#fff));border:1px solid color-mix(in srgb,var(--qv) 16%,var(--line))}
.deal-figs small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.deal-figs b{font-size:19px;font-weight:750;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.deal-figs em{font-style:normal;font-size:11px;color:var(--muted)}
.deal-figs .late b,.deal-figs .late em{color:#c0392b}
@media(max-width:760px){.deal-figs{grid-template-columns:1fr 1fr}}

.deal-next.late{border-color:color-mix(in srgb,#c0392b 45%,var(--line))}
.deal-next-row{display:flex;align-items:flex-start;gap:11px}
.deal-next-row input{width:19px;height:19px;margin-top:2px;accent-color:var(--qv)}
.deal-next-row b{display:block;font-size:15.5px}
.deal-next-row small{font-size:12.5px;color:var(--muted)}
.deal-next.late .deal-next-row small{color:#c0392b;font-weight:650}
.deal-next-row.done b{text-decoration:line-through;color:var(--muted)}

.deal-lost{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin-bottom:10px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,#8a97ab 14%,transparent)}
.deal-lost span{font-size:13px;color:var(--muted)}

.deal-all{margin-top:6px}
.deal-all summary{cursor:pointer;font-size:12.5px;font-weight:650;color:var(--muted)}
.deal-all-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:10px}
.deal-all-grid>div{padding:9px 11px;border-radius:12px;border:1px solid var(--line);font-size:12.5px}
.deal-all-grid>div.on{border-color:var(--qv);box-shadow:0 0 0 1px var(--qv)}
.deal-all-grid small{color:var(--muted)}
.deal-all-grid ul{margin:6px 0 0;padding-left:16px;display:grid;gap:2px}
.deal-all-grid li.done{color:var(--muted);text-decoration:line-through}

.deal-contacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.deal-contact{position:relative;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:13px;border:1px solid var(--line);background:var(--surface,#fff)}
.deal-contact>div{flex:1;min-width:0;display:grid;gap:1px}
.deal-contact b{font-size:14px}
.deal-contact small{font-size:12px;color:var(--muted)}
.deal-contact p{margin:4px 0 0;font-size:12.5px;line-height:1.5}
.deal-reach a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 45%,transparent);overflow-wrap:anywhere}
.deal-stance{flex:none;width:11px;height:11px;margin-top:5px;border-radius:50%;background:#b8c2d1}
.deal-stance.s-for{background:#2FA96B}
.deal-stance.s-neutral{background:#E3A21A}
.deal-stance.s-against{background:#d0453a}

.deal-quiet{margin:0 0 10px;padding:7px 11px;border-radius:10px;font-size:12.5px;font-weight:650;color:#8a5604;background:color-mix(in srgb,#E3A21A 14%,transparent)}
.deal-timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.deal-timeline li{position:relative;display:flex;align-items:flex-start;gap:12px;padding:9px 0 9px 0;border-top:1px dashed var(--line)}
.deal-timeline li:first-child{border-top:0}
.deal-timeline li>div{flex:1;min-width:0;display:grid;gap:1px}
.deal-timeline b{font-size:13.5px}
.deal-timeline small{font-size:12px;color:var(--muted)}
.deal-timeline p{margin:3px 0 0;font-size:13px;line-height:1.5;white-space:pre-wrap}
.deal-act-type{flex:none;min-width:70px;text-align:center;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:750;color:var(--qv);background:color-mix(in srgb,var(--qv) 11%,transparent)}

.deal-quote-list{display:grid;gap:8px}
.deal-quote{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:13px;border:1px solid var(--line)}
.deal-quote>div{flex:1;min-width:0;display:grid;gap:1px}
.deal-quote small{font-size:12px;color:var(--muted)}
.deal-quote p{margin:3px 0 0;font-size:13px;line-height:1.5}
.deal-q-value{font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.deal-q-status{flex:none;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:750;background:var(--line2,#eef2f8);color:var(--muted)}
.deal-q-status.q-sent{background:color-mix(in srgb,#1E7FD0 13%,transparent);color:#185f9c}
.deal-q-status.q-accepted{background:color-mix(in srgb,#2FA96B 15%,transparent);color:#1f7a4c}
.deal-q-status.q-declined{background:color-mix(in srgb,#d0453a 13%,transparent);color:#a3322a}

.deal-outcome.won{border-color:color-mix(in srgb,#2FA96B 45%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,#2FA96B 8%,var(--surface,#fff)),var(--surface,#fff) 60%)}
.deal-outcome.lost{background:linear-gradient(135deg,color-mix(in srgb,#8a97ab 10%,var(--surface,#fff)),var(--surface,#fff) 60%)}
.deal-result{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:10px}
.deal-result b{font-size:20px}
.deal-outcome.won .deal-result b{color:#1f7a4c}
.deal-result span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* custom */
.cus-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px;margin-top:12px}
.cus-preset{display:grid;gap:4px;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface,#fff);color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s,transform .15s}
.cus-preset:hover{border-color:var(--qv);transform:translateY(-1px)}
.cus-preset b{font-size:14px}
.cus-preset small{font-size:12px;color:var(--muted);line-height:1.45}
.cus-preset.own{border-style:dashed}
.cus-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px}
.cus-field{position:relative;display:grid;gap:2px;padding:10px 12px;border-radius:13px;background:color-mix(in srgb,var(--qv) 6%,var(--surface,#fff));border:1px solid color-mix(in srgb,var(--qv) 16%,var(--line))}
.cus-field small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cus-field b{font-size:15px;overflow-wrap:anywhere}
.cus-field .btn{position:absolute;top:4px;right:4px}
.cus-stage-list{display:grid;gap:9px}
.cus-stage{padding:10px 12px;border-radius:14px;border:1px solid var(--line)}
.cus-stage.on{border-color:var(--qv);box-shadow:0 0 0 1px var(--qv)}
.cus-stage>header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cus-stage>header small{font-size:12px;color:var(--muted)}
.cus-stage .deal-checks{margin-bottom:4px}
.cus-no{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;border:2px solid var(--line);color:var(--muted)}
.cus-stage.done .cus-no{background:var(--qv);border-color:var(--qv);color:#fff}
.cus-stage.on .cus-no{border-color:var(--qv);color:var(--qv)}

/* the map ring, and the label on cards */
.graph-node.ptype-deal{--pt:#d9821c}
.graph-node.ptype-custom{--pt:#c4477f}
.graph-node.ptype-custom > .v10-ptype-ring{border-style:dotted}
.qip-badge.v10-ptype-tag.deal{background:linear-gradient(135deg,#f0a43a,#c86f12)}
.qip-badge.v10-ptype-tag.cus{background:linear-gradient(135deg,#e0679b,#b03a6e)}

/* evening themes */
html[data-tone=dark] .detail-tab.deal-tab{color:#ffc27a}
html[data-tone=dark] .detail-tab.custom-tab{color:#ff9cc6}
html[data-tone=dark] .deal-check,html[data-tone=dark] .deal-contact,html[data-tone=dark] .cus-preset{background:transparent}
html[data-tone=dark] .deal-quiet{color:#ffd27a}
html[data-tone=dark] .deal-q-status.q-sent{color:#8cc4ff}
html[data-tone=dark] .deal-q-status.q-accepted,html[data-tone=dark] .deal-outcome.won .deal-result b{color:#7fe0ae}
html[data-tone=dark] .deal-q-status.q-declined,html[data-tone=dark] .deal-check small.late,html[data-tone=dark] .deal-figs .late b,html[data-tone=dark] .deal-figs .late em,html[data-tone=dark] .deal-next.late .deal-next-row small{color:#ff8f86}
html[data-tone=dark] .deal-act-type{color:#ffc27a}
html[data-tone=dark] .qip.cus .deal-act-type{color:#ff9cc6}