/* ---------------------------------------------------------------------------
   REEVES -- the generic CRM page's styles (moved verbatim out of index.html)
   Linked from index.html between the fitness rules and Finance's, the place
   in the cascade they always held. Built from Finance's tokens only
   (tests/crm-view.test.js holds every colour here to Finance's palette).
   --------------------------------------------------------------------------- */
  /* CRM (preview). The Finance page's language, exactly: the page root wears .fin, so every token, the Geist type,
     the tabular figures, the cards, the glass panel and the first-open motion are Finance's own; the shell wears
     fv-finance for the same gradient. What CRM adds is built from those tokens only (tests/crm-view.test.js holds
     every colour here to Finance's palette). The one bold thing is the pipeline board: columns that read left to
     right as money moves toward won, each with its odds as a gold meter. */
  .crm-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin:0 -16px 16px;padding:12px 16px;background:linear-gradient(180deg,rgba(10,16,21,.94),rgba(10,16,21,.78));
    -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 var(--fin-stroke)}
  .crm-bar-end{display:flex;gap:8px;flex:0 0 auto}
  .crm-view{animation:crm-view .32s cubic-bezier(.2,.8,.2,1)}
  @keyframes crm-view{from{opacity:0;transform:translateY(6px)}}

  /* Buttons, inputs and chips: Finance's control shapes (the Close button, the time-frame switch, the tags) */
  .fv-body .crm-btn{flex:0 0 auto;width:auto;max-width:none;padding:8px 16px;border-radius:12px;background:var(--fin-raised);color:var(--fin-ink);
    font:600 13px/20px 'Geist',sans-serif;box-shadow:var(--fin-shadow);transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s}
  .fv-body .crm-btn:hover{transform:translateY(-1px)}
  .fv-body .crm-btn-primary{background:var(--fin-gold);color:#0A0B10;box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 20px -10px rgba(214,175,60,.7)}
  .fv-body .crm-btn-quiet{background:transparent;color:var(--fin-muted);box-shadow:inset 0 0 0 1px var(--fin-stroke)}
  .fv-body .crm-btn-danger{background:transparent;color:var(--fin-loss);box-shadow:inset 0 0 0 1px rgba(242,125,107,.24)}
  .fv-body .crm-btn[disabled]{opacity:.45;transform:none}
  .crm-input{display:block;width:100%;box-sizing:border-box;padding:10px 12px;border:0;border-radius:12px;background:var(--fin-well);color:var(--fin-ink);
    font:400 15px/20px 'Geist',sans-serif;box-shadow:inset 0 0 0 1px var(--fin-stroke);transition:box-shadow .18s;-webkit-appearance:none;appearance:none}
  .crm-input::placeholder{color:var(--fin-faint)}
  .crm-input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--fin-gold),0 0 0 3px rgba(214,175,60,.16)}
  textarea.crm-input{min-height:88px;resize:vertical}
  input[type="date"].crm-input{color-scheme:dark;min-height:40px}
  .crm-select{position:relative}
  .crm-select::after{content:'';position:absolute;right:14px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--fin-muted);border-bottom:1.5px solid var(--fin-muted);
    transform:translateY(-70%) rotate(45deg);pointer-events:none}
  .crm-select .crm-input{padding-right:36px}
  .crm-check{display:flex;align-items:center;gap:10px;font-size:14px;line-height:20px;color:var(--fin-ink)}
  .crm-check input{width:18px;height:18px;margin:0;accent-color:var(--fin-gold)}
  .crm-label{display:block;margin-bottom:6px;font-size:12px;line-height:16px;color:var(--fin-muted)}
  .crm-form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:24px}
  .crm-form-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
  .crm-err{margin-top:16px;padding:8px 12px;border-radius:12px;font-size:13px;line-height:20px;color:var(--fin-loss);
    background:rgba(242,125,107,.1);box-shadow:inset 0 0 0 1px rgba(242,125,107,.24)}
  .crm-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .crm-chips::-webkit-scrollbar{display:none}
  .fv-body .crm-chip{flex:0 0 auto;width:auto;max-width:none;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--fin-muted);
    font:600 12px/16px 'Geist',sans-serif;transition:background-color .18s,color .18s}
  .fv-body .crm-chip[aria-pressed="true"]{background:var(--fin-raised);color:var(--fin-ink);box-shadow:0 1px 0 var(--fin-hi) inset,0 0 0 1px var(--fin-stroke) inset}
  .crm-chip-n{margin-left:6px;color:var(--fin-faint);font-weight:500}
  .crm-t-neutral,.fin-tag.crm-t-neutral{color:var(--fin-muted);background:rgba(255,255,255,.06)}
  .crm-t-gold,.fin-tag.crm-t-gold{color:var(--fin-gold);background:rgba(214,175,60,.14)}
  .crm-t-gain,.fin-tag.crm-t-gain{color:var(--fin-gain);background:rgba(95,211,154,.13)}
  .crm-t-warn,.fin-tag.crm-t-warn{color:var(--fin-warn);background:rgba(244,166,59,.14)}
  .crm-t-loss,.fin-tag.crm-t-loss{color:var(--fin-loss);background:rgba(242,125,107,.15)}

  /* Overview: Finance's grid, CRM's cards */
  .crm-dash > .crm-w-rate,.crm-dash > .crm-w-comm{grid-column:span 1}
  /* a book's own cards (data.cards): figures as label-value rows, or a small table with a column per period */
  .crm-dash > .crm-w-extra{grid-column:1/-1}
  .crm-kv{display:grid;gap:0;margin:16px 0 0}
  .crm-kv > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;box-shadow:inset 0 -1px 0 var(--fin-stroke)}
  .crm-kv > div:last-child{box-shadow:none}
  .crm-kv dt{font-size:13px;line-height:20px;color:var(--fin-muted)}
  .crm-kv dd{margin:0;font-size:15px;line-height:20px;font-weight:600;color:var(--fin-ink);text-align:right}
  .crm-kt{display:grid;margin-top:16px}
  .crm-kt-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,96px));gap:12px;align-items:baseline;padding:10px 0;box-shadow:inset 0 -1px 0 var(--fin-stroke)}
  .crm-kt-row:last-child{box-shadow:none}
  .crm-kt-row .fin-nm{font-size:13px;line-height:20px;color:var(--fin-muted)}
  .crm-kt-row .fin-amt{text-align:right;font-size:15px;line-height:20px;font-weight:600;color:var(--fin-ink)}
  .crm-kt-head{padding-top:0}
  .crm-kt-head span{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fin-faint);text-align:right}
  .crm-sub{margin-top:4px;font-size:13px;line-height:20px;color:var(--fin-muted)}
  .crm-sub b{color:var(--fin-ink);font-weight:600}
  .crm-stage-rows{display:grid;gap:12px;margin-top:20px}
  .crm-stage-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;font-size:13px;line-height:20px}
  .crm-stage-row .fin-nm{color:var(--fin-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crm-stage-row .fin-amt{color:var(--fin-body);text-align:right}
  .crm-stage-row .fin-amt small{margin-left:8px;color:var(--fin-faint);font-size:12px}
  .crm-stage-row .fin-track{grid-column:1/-1}
  .crm-rate{display:flex;align-items:center;gap:16px}
  .crm-rate .fin-ring{width:88px;height:88px;flex:0 0 auto}
  .crm-rate-none{font-size:28px;line-height:36px;font-weight:500;color:var(--fin-faint)}
  .crm-weeks{display:block;width:100%;height:64px;margin-top:16px;overflow:visible}
  .crm-wk{fill:rgba(245,243,236,.12)}
  .crm-wk-now{fill:var(--fin-gold)}
  .crm-kinds{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
  .crm-months{display:block;width:100%;height:150px;margin-top:8px;overflow:visible}
  .crm-mo{fill:rgba(245,243,236,.12)}
  .crm-mo-now{fill:var(--fin-gold)}
  .crm-mo-lbl{fill:var(--fin-faint);font:500 11px 'Geist',sans-serif}
  .crm-mo-val{fill:var(--fin-muted);font:500 11px 'Geist',sans-serif;font-variant-numeric:tabular-nums}
  .crm-stats{margin:20px 0 0}
  .fv-body button.fin-bar{width:100%;max-width:none;padding:0;border-radius:0;background:transparent;color:inherit;text-align:left;font:inherit}
  .fv-body button.fin-bar:hover .fin-nm{color:var(--fin-gold)}
  .crm-dot{display:inline-block;width:10px;height:10px;border-radius:3px;background:currentColor}
  .fv-body button.fin-bill{display:flex;width:100%;max-width:none;margin:0;border-radius:0;background:transparent;color:inherit;text-align:left;font:inherit;
    transition:background-color .18s}
  .fv-body button.fin-bill:hover{background:rgba(255,255,255,.03)}
  .crm-fu-more{margin-top:12px;font-size:12px;line-height:16px;color:var(--fin-faint)}

  /* The first open of an empty book: what do you sell */
  .crm-dash > .crm-hero{grid-column:1/-1}
  .crm-hero h2{font-size:24px;line-height:32px;letter-spacing:-.02em}
  .crm-hero p{margin:8px 0 0;max-width:36em;font-size:14px;line-height:22px;color:var(--fin-muted)}
  .crm-presets{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:24px}
  .fv-body .crm-preset{display:flex;flex-direction:column;justify-content:flex-start;width:100%;max-width:none;padding:16px;border-radius:16px;background:var(--fin-well);color:var(--fin-body);text-align:left;font:inherit;
    box-shadow:inset 0 0 0 1px var(--fin-stroke);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background-color .18s}
  .fv-body .crm-preset:hover{background:var(--fin-raised);transform:translateY(-1px);box-shadow:var(--fin-shadow)}
  .crm-preset b{display:block;font-size:15px;line-height:24px;font-weight:600;color:var(--fin-ink)}
  .crm-preset span{display:block;font-size:13px;line-height:20px;color:var(--fin-muted)}
  .crm-preset small{display:block;margin-top:8px;font-size:12px;line-height:16px;color:var(--fin-faint)}
  /* S6: the company presets, one short row under the kinds of selling; each a full-height touch target */
  .crm-companies{margin-top:24px;padding-top:16px;border-top:1px solid var(--fin-stroke)}
  .crm-hero p.crm-companies-q{margin:0;font-size:13px;line-height:20px;color:var(--fin-muted)}
  .crm-companies-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .fv-body .crm-chip.crm-company{min-height:44px;padding:12px 16px;font-size:13px;line-height:20px;color:var(--fin-body);box-shadow:inset 0 0 0 1px var(--fin-stroke)}
  .fv-body .crm-chip.crm-company:hover{background:var(--fin-raised);color:var(--fin-ink)}
  .crm-empty{padding:40px 24px;text-align:center}
  .crm-empty h2{font-size:20px;line-height:28px}
  .crm-empty p{margin:8px auto 24px;max-width:28em;font-size:14px;line-height:22px;color:var(--fin-muted)}

  /* The pipeline board */
  .crm-board-wrap{margin:0 -16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .crm-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);gap:12px;padding:4px 16px 24px;min-width:min-content}
  .crm-col{display:flex;flex-direction:column;min-height:360px;border-radius:20px;background:var(--fin-well);box-shadow:inset 0 0 0 1px var(--fin-stroke);
    scroll-snap-align:start;scroll-margin-left:16px;transition:box-shadow .18s,background-color .18s}
  .crm-col.crm-drop{background:rgba(214,175,60,.06);box-shadow:inset 0 0 0 1px rgba(214,175,60,.5)}
  .crm-col-head{padding:16px 16px 12px}
  .crm-col-name{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;line-height:20px;font-weight:600;color:var(--fin-ink)}
  .crm-col-name span{font-weight:500;color:var(--fin-faint);font-size:12px}
  .crm-col-sum{margin-top:2px;font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.02em;color:var(--fin-ink)}
  .crm-col-won .crm-col-sum{color:var(--fin-gain)}
  .crm-col-lost .crm-col-sum{color:var(--fin-muted)}
  .crm-odds{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;line-height:16px;color:var(--fin-faint)}
  .crm-odds .fin-track{flex:1;height:4px}
  .crm-col-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:0 8px 8px}
  .fv-body .crm-deal{display:block;width:100%;max-width:none;padding:12px 14px;border-radius:14px;background:var(--fin-card);color:var(--fin-body);text-align:left;font:inherit;
    box-shadow:var(--fin-shadow);cursor:grab;touch-action:manipulation;transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s,opacity .18s}
  .fv-body .crm-deal:hover{background:var(--fin-raised);transform:translateY(-1px)}
  .fv-body .crm-deal.crm-lifted{opacity:.35;transform:none}
  .crm-deal-t{display:block;font-size:14px;line-height:20px;font-weight:500;color:var(--fin-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crm-deal-c{display:block;font-size:12px;line-height:16px;color:var(--fin-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crm-deal-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
  .crm-deal-v{font-size:14px;line-height:20px;font-weight:600;color:var(--fin-ink)}
  .crm-deal-d{font-size:12px;line-height:16px;color:var(--fin-faint)}
  .crm-deal-d.fin-tag{padding:0 8px;line-height:20px}
  .fv-body .crm-deal.crm-ghost{position:fixed;z-index:60;top:0;left:0;width:248px;margin:0;pointer-events:none;transform:rotate(-2deg);background:var(--fin-raised);
    box-shadow:0 1px 0 var(--fin-hi) inset,0 0 0 1px rgba(214,175,60,.5) inset,0 30px 60px -20px rgba(0,0,0,.8)}
  .crm-col-empty{margin:0 8px 8px;padding:20px 12px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--fin-stroke);font-size:13px;line-height:20px;color:var(--fin-faint);text-align:center}
  .crm-col-more{padding:4px 8px 8px;font-size:12px;line-height:16px;color:var(--fin-faint);text-align:center}

  /* Customers */
  .crm-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
  .crm-search{position:relative;flex:1 1 260px;min-width:0}
  .crm-search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--fin-faint);pointer-events:none}
  .crm-search .crm-input{padding-left:36px}
  .crm-tools .crm-select{flex:0 0 auto;width:180px}
  .crm-tools .crm-chips{flex:1 1 100%}
  .crm-list{padding:8px 20px}
  .fv-body .crm-cust{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;
    width:calc(100% + 16px);max-width:none;margin:0 -8px;padding:10px 8px;border-radius:12px;background:transparent;color:var(--fin-ink);text-align:left;font:inherit;
    transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s,box-shadow .18s}
  .fv-body .crm-cust + .crm-cust::before{content:'';position:absolute;left:56px;right:8px;top:0;height:1px;background:var(--fin-stroke)}
  .fv-body .crm-cust:hover{background:var(--fin-raised);transform:translateY(-1px);box-shadow:var(--fin-shadow);z-index:1}
  .fv-body .crm-cust:hover::before,.fv-body .crm-cust:hover + .crm-cust::before{opacity:0}
  .crm-av{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;font:700 12px/1 'Geist',sans-serif;letter-spacing:.02em}
  .crm-cust .fin-nm{display:block;font-size:14px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crm-cust .fin-inst{display:block;font-size:12px;line-height:16px;color:var(--fin-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crm-cust-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
  .crm-cust-due{font-size:12px;line-height:16px;color:var(--fin-faint);white-space:nowrap}
  .crm-cust-due.crm-late{color:var(--fin-loss)}
  .crm-cust-due.crm-now{color:var(--fin-warn)}
  .crm-cust-won{display:none;font-size:14px;line-height:20px;font-weight:600;text-align:right}
  .crm-list-foot{display:flex;justify-content:center;padding:12px 0 4px}
  .crm-none{padding:32px 0;font-size:14px;line-height:22px;color:var(--fin-faint);text-align:center}

  /* The panel: Finance's glass panel, holding a customer, a deal or a form */
  .crm-p-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
  .crm-p-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .crm-ask{margin:0 0 14px}   /* why the form opened on one field */
  .fv-body .crm-asked .crm-input{box-shadow:inset 0 0 0 1px var(--fin-gold)}   /* the field it asks for */
  .crm-sec{margin-top:32px}
  .crm-sec h3{margin:0 0 8px;font-size:13px;line-height:16px;font-weight:600;color:var(--fin-muted)}
  .crm-facts{margin:0}
  .crm-fact{display:flex;justify-content:space-between;gap:16px;padding:10px 0;font-size:14px;line-height:20px}
  .crm-fact + .crm-fact{border-top:1px solid var(--fin-stroke)}
  .crm-fact dt{color:var(--fin-muted)}
  .crm-fact dd{margin:0;min-width:0;color:var(--fin-ink);text-align:right;overflow-wrap:anywhere;white-space:pre-wrap}
  .crm-fact a{color:var(--fin-gold);text-decoration:none}
  .crm-fact a:hover{text-decoration:underline}
  .fv-body .crm-mini{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:none;padding:10px 0;border-radius:0;background:transparent;
    color:var(--fin-ink);text-align:left;font:500 14px/20px 'Geist',sans-serif}
  .fv-body .crm-mini + .crm-mini{border-top:1px solid var(--fin-stroke)}
  .crm-mini span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crm-mini em{display:flex;align-items:center;gap:8px;font-style:normal;font-weight:600}
  .crm-big-sm{margin-top:24px;font-size:32px;line-height:40px;font-weight:400;letter-spacing:-.03em;color:var(--fin-ink)}
  .crm-stages{display:flex;flex-wrap:wrap;gap:6px}
  /* Won / Lost / Reopen on a host-held book: Won is the one primary; Lost an outline in the loss tone */
  .crm-outcome{margin-top:16px}
  .crm-outcome .crm-p-actions{margin-top:0}
  .crm-outcome-why{margin:0 0 16px}
  .fv-body .crm-outcome .crm-btn{min-height:48px;padding:12px 24px;font-size:15px}
  .fv-body .crm-btn.crm-lost{color:var(--fin-loss)}
  .crm-log{margin-top:8px;padding:16px;border-radius:16px;background:var(--fin-well);box-shadow:inset 0 0 0 1px var(--fin-stroke)}
  .crm-log .fin-tf{display:flex;flex-wrap:wrap;margin-bottom:12px}
  .crm-log-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
  .crm-log-foot .crm-input{width:auto}
  .crm-tl{position:relative;margin-top:8px;padding-left:36px}
  .crm-tl::before{content:'';position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:var(--fin-stroke)}
  .crm-tl-day{position:relative;margin:16px 0 8px;font-size:12px;line-height:16px;font-weight:600;color:var(--fin-faint)}
  .crm-tl-day:first-child{margin-top:0}
  .crm-tl-item{position:relative;padding:2px 0 14px}
  .crm-tl-ic{position:absolute;left:-36px;top:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px}
  .crm-tl-ic svg{width:14px;height:14px}
  .crm-tl-what{font-size:14px;line-height:20px;font-weight:500;color:var(--fin-ink)}
  .crm-tl-what time{margin-left:8px;font-size:12px;font-weight:400;color:var(--fin-faint)}
  .crm-tl-note{margin-top:2px;font-size:13px;line-height:20px;color:var(--fin-body);white-space:pre-wrap;overflow-wrap:anywhere}
  .crm-tl-sys .crm-tl-what{font-weight:400;color:var(--fin-muted)}
  .crm-toast{position:fixed;left:50%;bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));z-index:62;padding:10px 16px;border-radius:14px;
    background:rgba(28,33,38,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--fin-shadow);
    color:var(--fin-ink);font:500 14px/20px 'Geist',sans-serif;transform:translateX(-50%);animation:crm-toast .36s cubic-bezier(.34,1.42,.5,1)}
  .crm-toast.crm-toast-err{color:var(--fin-loss)}
  @keyframes crm-toast{from{opacity:0;transform:translate(-50%,12px)}}
  .fv-body .crm-toast-act{width:auto;max-width:none;margin-left:12px;padding:2px 10px;border-radius:8px;background:rgba(214,175,60,.14);color:var(--fin-gold);
    font:600 13px/20px 'Geist',sans-serif}
  .crm-bulking .crm-toast{bottom:max(104px,calc(env(safe-area-inset-bottom) + 96px))}

  /* v328: bulk -- the selection and the bar at the foot that acts on it */
  .crm-bulk{position:fixed;left:50%;bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));z-index:42;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
    width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;padding:10px 12px;border-radius:20px;transform:translateX(-50%);
    background:rgba(28,33,38,.9);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:var(--fin-shadow);
    animation:crm-toast .36s cubic-bezier(.34,1.42,.5,1)}
  .crm-bulk-n{padding:0 8px;font-size:14px;line-height:20px;font-weight:600;color:var(--fin-ink)}
  .crm-bulk .crm-input{width:auto;padding-top:8px;padding-bottom:8px;font-size:13px}
  .crm-bulk .crm-select .crm-input{padding-right:32px}
  .crm-bulking .crm-list,.crm-bulking .crm-board{padding-bottom:96px}
  .crm-selbox{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:var(--fin-well);
    box-shadow:inset 0 0 0 1.5px var(--fin-stroke);color:#0A0B10;transition:background-color .18s,box-shadow .18s}
  .crm-selbox svg{width:16px;height:16px;opacity:0;transition:opacity .18s}
  [aria-pressed="true"] > .crm-selbox{background:var(--fin-gold);box-shadow:none}
  [aria-pressed="true"] > .crm-selbox svg{opacity:1}
  .fv-body .crm-cust[aria-pressed="true"]{background:rgba(214,175,60,.06)}
  .fv-body .crm-deal[aria-pressed="false"]{cursor:pointer}
  .fv-body .crm-deal[aria-pressed="true"]{cursor:pointer;box-shadow:0 0 0 1.5px rgba(214,175,60,.7) inset,var(--fin-shadow)}
  .crm-board-tools{justify-content:space-between}
  .crm-board-sum{margin:0;font-size:13px;line-height:20px;color:var(--fin-muted)}
  .fv-body .crm-btn[aria-pressed="true"]{color:var(--fin-ink);box-shadow:inset 0 0 0 1px rgba(214,175,60,.5)}
  .crm-say{margin:16px auto 0;font-size:13px;line-height:20px;color:var(--fin-faint)}

  /* S7: Setup -- the pipeline, the fields and the history, by hand. Rows like Settings rows: a name, a faint line under
     it, a chevron on every row that opens (U9). The read-back is the change in the server's words, then Save change. */
  .fv-body .crm-setup-btn{display:inline-flex;align-items:center;gap:8px}
  .crm-setup-btn svg{width:16px;height:16px;flex:0 0 auto}
  .crm[data-view="setup"] [data-crm="addcust"],.crm[data-view="setup"] [data-crm="adddeal"],
  .crm[data-view="pay"] [data-crm="addcust"],.crm[data-view="pay"] [data-crm="adddeal"]{display:none}   /* M3: Pay adds nothing either */
  .crm-setup > .crm-set{grid-column:1/-1;align-self:start}
  .crm-set .crm-sub{margin-top:8px}
  .crm-set-rows{display:grid;margin-top:8px}
  .fv-body .crm-set-row{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:12px;width:100%;max-width:none;min-height:56px;
    margin:0;padding:8px 0;border-radius:0;background:transparent;color:var(--fin-ink);text-align:left;font:inherit;transition:color .18s}
  .fv-body .crm-set-row + .crm-set-row{border-top:1px solid var(--fin-stroke)}
  .fv-body .crm-set-row:hover .fin-nm{color:var(--fin-gold)}
  .crm-set-words{min-width:0}
  .crm-set-words .fin-nm{display:block;font-size:15px;line-height:24px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .18s}
  .crm-set-words small{display:block;font-size:12px;line-height:16px;color:var(--fin-faint)}
  .crm-chev{grid-column:3;width:16px;height:16px;color:var(--fin-faint)}   /* the chevrons line up, with a tag before them or not */
  .crm-set-group{margin-top:24px}
  .crm-set-group h3{margin:0;font-size:13px;line-height:16px;font-weight:600;color:var(--fin-muted)}
  .crm-set-none{margin:8px 0 0;font-size:13px;line-height:20px}
  .fv-body .crm-set-add{margin-top:16px}
  .crm-set-hlist{margin-top:8px}
  .crm-set-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 0}
  .crm-set-h + .crm-set-h{border-top:1px solid var(--fin-stroke)}
  .crm-set-hw{min-width:0}
  .crm-set-hw p{margin:0;font-size:14px;line-height:22px;color:var(--fin-ink);overflow-wrap:anywhere}
  .crm-set-hw time{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--fin-faint)}
  .crm-set-h-undone .crm-set-hw p{color:var(--fin-muted)}
  .crm-set-h .fin-tag,.crm-set-h .crm-btn{flex:0 0 auto}
  .crm-change{display:grid;gap:8px;margin:24px 0 0;padding:0;list-style:none}
  .crm-change li{padding:12px 16px;border-radius:12px;background:var(--fin-well);box-shadow:inset 0 0 0 1px var(--fin-stroke);font-size:15px;line-height:22px;color:var(--fin-ink);overflow-wrap:anywhere}
  .crm-change-note{margin:16px 0 0;font-size:13px;line-height:20px}
  .crm-form.crm-form-one{grid-template-columns:minmax(0,1fr);margin-top:8px}
  .crm-set-remove{margin-top:32px;padding-top:16px;border-top:1px solid var(--fin-stroke)}
  .crm-set-remove p{margin:0 0 12px;font-size:13px;line-height:20px}

  /* S8: the pay plan. On its card, the plan read back and its worked example; in the builder, the worked example
     stays in view at the top (the one thing to watch while building) and each part is a well of its own. */
  .crm-pp-lines{display:grid;gap:8px;margin:8px 0 0;padding:0;list-style:none}
  .crm-pp-lines li{position:relative;padding-left:16px;font-size:14px;line-height:22px;color:var(--fin-body)}
  .crm-pp-lines li::before{content:'';position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--fin-faint)}
  .crm-pp-say{margin:16px 0 0;font-size:15px;line-height:24px;font-weight:500;color:var(--fin-ink)}
  .crm-pp-now .crm-sub{margin-top:8px}
  .crm-pp-ex{position:sticky;top:-24px;z-index:2;margin:24px -8px 0;padding:16px;border-radius:16px;background:var(--fin-raised);box-shadow:var(--fin-shadow)}
  .crm-pp-ex .crm-pp-say{margin:0}
  .crm-pp-open .crm-pp-say{color:var(--fin-muted)}
  .crm-pp-wait{margin:8px 0 0;font-size:13px;line-height:20px;color:var(--fin-warn)}
  .crm-pp-exrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
  .crm-pp-blocks{display:grid;gap:16px;margin-top:24px}
  .crm-pp-block{padding:16px;border-radius:16px;background:var(--fin-well);box-shadow:inset 0 0 0 1px var(--fin-stroke)}
  .crm-pp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .crm-pp-head b{display:block;font-size:15px;line-height:24px;font-weight:600;color:var(--fin-ink)}
  .crm-pp-head small{display:block;font-size:12px;line-height:16px;color:var(--fin-faint)}
  .crm-pp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
  .crm-pp-grid .crm-wide{grid-column:1/-1}
  .crm-pp-steps{display:grid;gap:8px;margin-top:16px}
  .crm-pp-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;gap:12px;align-items:end}
  .fv-body .crm-pp-x{width:40px;height:40px;padding:0;font-size:18px;line-height:40px}
  .crm-pp-steps > .crm-btn{justify-self:start}
  .crm-pp-counts{display:grid;gap:12px;margin:16px 0 0;padding:0;border:0}
  .crm-pp-counts legend{padding:0;margin-bottom:4px}
  .crm-pp-note{margin:12px 0 0;font-size:13px;line-height:20px}
  .crm-pp-add,.crm-pp-cal{margin-top:24px}

  /* S9: customers in from a spreadsheet -- four connected steps (U17), the file's columns matched to the user's
     fields, the check before anything is added, the imports with Undo on their card */
  .crm-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:24px 0 0;padding:0;list-style:none;counter-reset:crm-step}
  .crm-steps li{position:relative;padding-top:12px;font-size:12px;line-height:16px;font-weight:600;color:var(--fin-faint);counter-increment:crm-step}
  .crm-steps li::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px;background:var(--fin-stroke)}
  .crm-steps li.crm-step-done{color:var(--fin-muted)}
  .crm-steps li.crm-step-done::before{background:var(--fin-muted)}
  .crm-steps li.crm-step-now{color:var(--fin-ink)}
  .crm-steps li.crm-step-now::before{background:var(--fin-gold)}
  .crm-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:160px;margin-top:24px;padding:24px;border-radius:16px;
    background:var(--fin-well);box-shadow:inset 0 0 0 1px var(--fin-stroke);text-align:center;cursor:pointer;transition:box-shadow .18s,background-color .18s}
  .crm-drop:hover{background:var(--fin-raised)}
  .crm-drop:focus-within{box-shadow:inset 0 0 0 1px var(--fin-gold),0 0 0 3px rgba(214,175,60,.16)}
  .crm-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
  .crm-drop b{font-size:15px;line-height:24px;font-weight:600;color:var(--fin-ink)}
  .crm-drop span{max-width:28em;font-size:13px;line-height:20px;color:var(--fin-muted)}
  .crm-drop.crm-busy{opacity:.7;pointer-events:none}
  .crm-imp-lede{margin:16px 0 0;font-size:13px;line-height:20px}
  .crm-imp-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end;padding:12px 0;border-top:1px solid var(--fin-stroke)}
  .crm-imp-from{min-width:0;padding-bottom:10px}
  .crm-imp-from b{display:block;font-size:14px;line-height:20px;font-weight:600;color:var(--fin-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crm-imp-from small{display:block;font-size:12px;line-height:16px;color:var(--fin-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crm-imp-more{color:var(--fin-muted)}
  .crm-imp-notes{margin-top:16px;padding:12px 16px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--fin-stroke)}
  .crm-imp-notes summary{font-size:14px;line-height:20px;font-weight:500;color:var(--fin-body);cursor:pointer}
  .crm-imp-notes ul{margin:8px 0 0;padding-left:16px;font-size:13px;line-height:20px;color:var(--fin-muted)}
  .crm-imp-h{margin:24px 0 0;font-size:13px;line-height:16px;font-weight:600;color:var(--fin-muted)}
  /* M3: Pay -- this pay month, what is next (each step a meter), the year, every sale's pay, pay by month */
  .crm-pay > .crm-paycard{grid-column:1/-1;align-self:start}
  .crm-pay > .crm-pay-empty{grid-column:1/-1}
  .crm-pay-step{display:grid;gap:4px;padding:12px 0}
  .crm-pay-step + .crm-pay-step{border-top:1px solid var(--fin-stroke)}
  .crm-pay-step b{font-size:15px;line-height:22px;font-weight:600;color:var(--fin-ink)}
  .crm-pay-step span:not(.fin-track){font-size:13px;line-height:20px;color:var(--fin-muted)}
  .crm-pay-step .fin-track{margin-top:4px}
  .crm-pay-step small{font-size:12px;line-height:16px;color:var(--fin-faint)}
  .crm-pay-pipe{margin-top:12px}
  .fv-body .crm-pay-row{grid-template-columns:minmax(0,1fr) auto 16px}
  .crm-pay-amt{font-size:15px;line-height:20px;font-weight:600;color:var(--fin-ink)}
  /* M2: what haven't I been paid on -- the amount owed, each finding a disclosure, a line that matches no sale set apart */
  .crm-pay-owed{margin-top:8px;color:var(--fin-warn)}
  .crm-pay-ok{margin:12px 0 0;font-size:15px;line-height:22px;color:var(--fin-gain)}
  .crm-change li.crm-stmt-miss{color:var(--fin-muted)}
  /* S12: the dashboard -- a saved report is a card of bars like the Status card, with an Export; the cards list */
  .crm-dash > .crm-w-report{grid-column:1/-1}
  .crm-rep-bars{margin-top:16px}
  .crm-rep-none{margin:12px 0 0;font-size:13px;line-height:20px}
  .fv-body .crm-rep-export{margin-top:16px}
  .crm-card-list{display:grid;margin-top:16px}
  .crm-card-row{display:grid;grid-template-columns:minmax(0,1fr) 40px 40px;gap:8px;align-items:center;min-height:56px;border-top:1px solid var(--fin-stroke)}
  .crm-card-row:first-child{border-top:0}
  /* S11: a sale from a photo -- the ways in, side by side; the reading, something moving (S3); the two forms */
  .crm-imp-ways{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .crm-reading{display:flex;align-items:center;gap:12px;min-height:160px;margin-top:24px;padding:24px;border-radius:16px;background:var(--fin-well);
    box-shadow:inset 0 0 0 1px var(--fin-stroke);font-size:14px;line-height:20px;color:var(--fin-body)}
  .crm-reading-dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--fin-gold);animation:crm-pulse 1.2s ease-in-out infinite}
  @keyframes crm-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
  .crm-photo-miss b{display:block;font-size:14px;line-height:20px;font-weight:600;color:var(--fin-warn)}
  .crm-photo-sec{margin-top:8px}
  .crm-photo-sec h3{margin:8px 0 0;font-size:13px;line-height:16px;font-weight:600;color:var(--fin-muted)}
  .fv-body .crm-imp-pick{width:100%;max-width:none;min-height:48px;margin-top:12px}   /* S10: the phone's own contact picker, under the file */

  .fv-body .crm-btn:focus-visible,.fv-body .crm-chip:focus-visible,.fv-body .crm-set-row:focus-visible,.fv-body .crm-deal:focus-visible,.fv-body .crm-cust:focus-visible,
  .fv-body .crm-preset:focus-visible,.fv-body .crm-mini:focus-visible,.fv-body button.fin-bill:focus-visible,.fv-body button.fin-bar:focus-visible{outline:2px solid var(--fin-gold);outline-offset:2px}

  @media (min-width:720px){
    .crm-dash > .crm-w-rate,.crm-dash > .crm-w-comm,.crm-dash > .crm-w-pipe,.crm-dash > .crm-w-won,.crm-dash > .crm-w-follow,.crm-dash > .crm-w-act,.crm-dash > .crm-w-status{grid-column:span 3}
    .crm-dash > .crm-w-trend{grid-column:span 6}
    .crm-dash > .crm-w-extra{grid-column:span 3}
    .crm-dash > .crm-w-report{grid-column:span 3}
    .crm-dash.crm-dash-custom > .fin-card{grid-column:span 3}
    .crm-setup > .crm-set-dash{grid-column:span 3}
    .crm-dash > .crm-w-extra-wide{grid-column:span 6}
    .crm-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
    .crm-form{grid-template-columns:repeat(2,minmax(0,1fr))}
    .crm-form .crm-wide{grid-column:1/-1}
    .fv-body .crm-cust{grid-template-columns:36px minmax(0,1fr) 220px 120px}
    .crm-cust-end{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
    .crm-cust-won{display:block}
    .crm-list{padding:8px 24px}
    .crm-setup > .crm-set-pipe,.crm-setup > .crm-set-fields,.crm-setup > .crm-set-pay{grid-column:span 3}
    .crm-pay > .crm-paycard{grid-column:span 3}
    .crm-setup > .crm-set-fields{grid-row:span 2}   /* S8: the tall list of fields on the right; the pipeline and the pay plan stacked on the left */
  }
  @media (min-width:1100px){
    .crm-dash > .crm-w-pipe{grid-column:span 5}
    .crm-dash > .crm-w-won{grid-column:span 4}
    .crm-dash > .crm-w-rate{grid-column:span 3}
    .crm-dash > .crm-w-follow{grid-column:span 5}
    .crm-dash > .crm-w-act{grid-column:span 4}
    .crm-dash > .crm-w-comm{grid-column:span 3}
    .crm-dash > .crm-w-trend{grid-column:span 7}
    .crm-dash > .crm-w-status{grid-column:span 5}
    .crm-dash > .crm-w-extra{grid-column:span 4}
    .crm-dash > .crm-w-report{grid-column:span 6}
    .crm-dash.crm-dash-custom > .fin-card{grid-column:span 6}   /* S12: cards the user chose and ordered: two even columns */
    .crm-setup > .crm-set-dash{grid-column:span 6}
    .crm-dash > .crm-w-extra-wide{grid-column:span 12}
    .crm-presets{grid-template-columns:repeat(3,minmax(0,1fr))}   /* S6: six kinds of selling, two rows of three */
    .crm-setup > .crm-set-pipe,.crm-setup > .crm-set-fields,.crm-setup > .crm-set-pay{grid-column:span 6}
    .crm-pay > .crm-paycard{grid-column:span 6}   /* S7: the pipeline and the fields side by side, half each */
    .crm-board{padding:4px 24px 24px;grid-auto-columns:minmax(208px,1fr)}   /* the board breaks out to the window’s width (fitBoard) */
  }
  @media (max-width:719px){   /* a phone shows the one add button the view needs */
    .crm[data-view="pipeline"] [data-crm="addcust"],.crm:not([data-view="pipeline"]) [data-crm="adddeal"]{display:none}
    .crm-setup-btn .crm-btn-label{display:none}   /* S7: the icon alone, so the views and the bar fit at 390 */
    .fv-body .crm-setup-btn{padding:8px 10px}
  }
  @media (max-width:420px){
    [data-crm="addcust"] .crm-btn-label,[data-crm="adddeal"] .crm-btn-label{display:none}   /* M3: four views in the bar: the add button is its "+" (it is named for screen readers) */
    .fv-body [data-crm="addcust"],.fv-body [data-crm="adddeal"]{min-width:40px;padding:8px 12px}
    .crm-rate{flex-direction:column;align-items:flex-start;gap:8px}
    .crm-rate .fin-ring{width:72px;height:72px}
  }
  @media (max-width:380px){   /* M3: the smallest phones keep the four views and the bar on one line */
    .crm-bar{gap:8px}
    .crm-bar-end{gap:6px}
    .fv-body .crm-bar .fin-tf button{padding-left:7px;padding-right:7px}
  }
  @media (prefers-reduced-motion:reduce){
    .crm-view,.crm-toast,.crm-reading-dot{animation:none}
    .fv-body .crm-btn,.fv-body .crm-deal,.fv-body .crm-cust,.fv-body .crm-preset{transition:none}
    .fv-body .crm-btn:hover,.fv-body .crm-deal:hover,.fv-body .crm-cust:hover,.fv-body .crm-preset:hover{transform:none}
  }