/* The client control center's Overview, Onboarding, Plan & features, Requests and Activity in the
   desktop console (desk-cc.js). Built on desk.css: d-block + d-glassbox rows like Billing. Classes
   start with d-. */

/* a padded part of a glass box, ruled from the one above */
.d-ccsec { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); font-family: var(--body); font-size: 14px; min-width: 0; }
.d-glassbox > .d-ccsec:first-child { border-top: 0; }
.d-ccsec[hidden] { display: none; }
.d-ccsub { display: flex; flex-direction: column; gap: 10px; }
.d-ccsub[hidden] { display: none; }
.d-ccstack { gap: 22px; }
.d-ccp { margin: 0; }
.d-cchint { margin: 0; font-size: 13px; color: var(--ink-500); text-wrap: pretty; }
.d-ccv { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; text-align: right; font-weight: 500; min-width: 0; }
.d-ccclear { color: var(--sage-ink); font-weight: 600; }
.d-ferr { display: block; margin-top: 2px; color: var(--rust-600); font: 500 12.5px var(--body); }

/* inputs */
.d-select { height: 30px; padding: 0 28px 0 10px; border: 0; border-radius: 8px; background: rgba(31, 26, 22, .05); font: 400 13.5px var(--body); color: var(--ink-900); outline: 0; max-width: 100%; }
.d-select:focus { box-shadow: inset 0 0 0 1.5px var(--ink-900); }
.d-field .d-select { height: 34px; }
.d-input--area { height: auto; padding: 10px 12px; resize: vertical; font: 400 14px/1.45 var(--body); }
.d-ccsec .d-input { width: 100%; }
.d-ccsec .d-row > .d-input { flex: 1 1 180px; width: auto; min-width: 140px; }
.d-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-800); cursor: pointer; }
.d-check[hidden] { display: none; }
.d-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--rust-600); flex: none; }

/* Needs you */
.d-ccneed { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--line); }
.d-glassbox > .d-ccneed:first-child { border-top: 0; }
.d-ccneed .d-dot { width: 8px; height: 8px; }
.d-ccneed__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--body); }
.d-ccneed__text strong { font-weight: 600; font-size: 15px; }
.d-ccneed__text span { font-size: 13.5px; color: var(--ink-600); }

/* six numbers in one strip */
.d-ttiles--6 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.d-ttile .d-row--between { gap: 6px; }

/* quote form leads */
.d-cclead { border-top: 1px solid var(--line); }
.d-glassbox > .d-cclead:first-child { border-top: 0; }
.d-cclead summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; list-style: none; font-size: 14px; }
.d-cclead summary::-webkit-details-marker { display: none; }
.d-cclead summary:hover strong { color: var(--rust-600); }
.d-cclead__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-cclead__body { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 12px; font-size: 14px; }
.d-cclead__body p { margin: 0; white-space: pre-wrap; }

/* calls */
.d-ccform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.d-ccform .d-field input { min-width: 0; }

/* review */
.d-ccreview { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto auto; align-items: center; gap: 6px 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.d-ccreview__said, .d-ccreview__note { grid-column: 1 / -1; }
.d-ccreview__note[hidden] { display: none; }

/* pitch, sandbox, said no */
.d-ccprices { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.d-ccticks { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--ink-800); }
.d-ccdanger { background: rgba(194, 70, 31, .05); }
.d-ccdanger .d-label { color: var(--rust-ink); }

/* onboarding steps */
.d-ccsteps { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.d-ccsteps li { height: 26px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; font: 500 12.5px var(--body); color: var(--ink-500); box-shadow: inset 0 0 0 1px var(--line); }
.d-ccsteps li.is-done { background: var(--sage-100); color: var(--sage-ink); box-shadow: none; }
.d-ccsteps li.is-now { background: var(--ink-900); color: var(--sand-100); box-shadow: none; font-weight: 600; }
.d-ccpanel { min-width: 0; }

/* plan picker */
.d-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.d-plan { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--d-box); text-align: left; font: inherit; color: var(--ink-900); cursor: pointer; min-width: 0; }
.d-plan:hover { background: rgba(251, 247, 240, .95); }
.d-plan.is-on { box-shadow: inset 0 0 0 2px var(--rust-600); cursor: default; }
.d-plan.is-picked { box-shadow: inset 0 0 0 2px var(--ink-900); }
.d-plan.is-empty { cursor: default; opacity: .7; }
.d-plan__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }
.d-plan__name { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.d-plan__price { font: 400 30px/.95 var(--display); }
.d-ccchange[hidden] { display: none; }
.d-cceffect { margin: 0; font-size: 14.5px; font-weight: 500; text-wrap: pretty; }
.d-ccwarn { align-items: flex-start; font-weight: 400; }
.d-ccwarn p { margin: 0; }
.d-cclost { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.d-cclost li { display: flex; align-items: center; gap: 8px; }

/* pages meter */
.d-meter { width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: rgba(31, 26, 22, .08); appearance: none; -webkit-appearance: none; }
.d-meter::-webkit-progress-bar { background: rgba(31, 26, 22, .08); border-radius: 999px; }
.d-meter::-webkit-progress-value { background: var(--sage-600); border-radius: 999px; }
.d-meter::-moz-progress-bar { background: var(--sage-600); border-radius: 999px; }
.d-meter.is-over::-webkit-progress-value { background: var(--rust-600); }
.d-meter.is-over::-moz-progress-bar { background: var(--rust-600); }

/* feature switches */
.d-ccfeat { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.d-glassbox > .d-ccfeat:first-child { border-top: 0; }
.d-ccfeat.is-locked .d-line__k > strong { color: var(--ink-500); }
.d-ccfeat__note { font-size: 12.5px; color: var(--ochre-ink); }
.d-ccfeat__why { margin: 4px 0 0; font-size: 12.5px; color: var(--rust-ink); }
.d-ccfeat__why[hidden] { display: none; }
.d-switch.is-locked { opacity: .45; cursor: help; }
.d-ccinc { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

/* requests */
.d-ccreq { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; align-items: start; gap: 6px 16px; padding: 12px 16px; border-top: 1px solid var(--line); font-family: var(--body); }
.d-glassbox > .d-ccreq:first-child { border-top: 0; }
.d-ccreq__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.d-ccreq__what { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14px; }
.d-ccreq__what p { margin: 0; }
.d-ccclamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) { .d-ccreq { grid-template-columns: 1fr; } }

/* activity */
.d-ccact { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 220px) auto; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.d-glassbox > .d-ccact:first-child { border-top: 0; }
.d-ccact__what { font-weight: 500; min-width: 0; }