/* =============================================================================
   compact-a.css · Today, Calls and Leads made compact (28 Sep 2026)
   Joe: "review entire dashboard and make it all more compact and easier to use
   like you just did the roadmap."

   The roadmap pattern: <details class="rmgrp"> with a 44px summary bar (name,
   count pill, chevron), open state kept in localStorage ("lom.fold.open").
   Loaded AFTER look2.css by dashboard.php. Delete this file and its <link> and
   the CSS goes back to look2; the folds are markup and would stay.
   Every tap target here is at least 44px. Nothing changes a colour token.
   ========================================================================== */

/* ---------------------------------------------------------- the fold bar -- */
html body .cmp-fold{margin:.4rem 0;padding:0;border:0;background:none;box-shadow:none}
html body .cmp-fold>summary,html body .cmp-tip>summary{list-style:none;display:flex;align-items:center;gap:.6rem;
  min-height:44px;cursor:pointer;padding:.2rem .75rem;border-radius:10px;box-sizing:border-box;
  background:var(--panel2,#0B1220);box-shadow:inset 0 0 0 1px var(--line,#243449);
  font-size:.95rem;font-weight:700;color:var(--ink,#E9F2FB);-webkit-tap-highlight-color:transparent}
html body .cmp-fold>summary::-webkit-details-marker,html body .cmp-tip>summary::-webkit-details-marker,
html body .cmp-more>summary::-webkit-details-marker{display:none}
html body .cmp-fold>summary::marker,html body .cmp-tip>summary::marker,html body .cmp-more>summary::marker{content:""}
html body .cmp-sum .cmp-l{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
html body .cmp-sum .rmn{flex:0 0 auto;min-width:1.8rem;text-align:center;font-size:.8rem;font-weight:700;
  padding:.1rem .45rem;border-radius:999px;background:rgba(255,255,255,.07)}
html body .cmp-sum .rmchev{flex:0 0 auto;color:var(--muted,#8FA6BD);font-size:.9rem}
html body .cmp-fb{padding:.4rem 0 .1rem;min-width:0}
/* the existing "Handled recently" and the tucked tips use the same bar */
html body details.handled>summary{min-height:44px;display:flex;align-items:center}
html body .cmp-tip{margin:.5rem 0}
html body .cmp-tip>summary{font-size:.8rem;font-weight:600;color:var(--muted,#8FA6BD);min-height:44px;background:none;box-shadow:none;padding:.2rem .3rem}
html body .cmp-tip>summary::before{content:"\24D8";margin-right:.4rem;color:var(--muted,#8FA6BD)}
html body .cmp-tip[open]>summary{color:var(--ink2,#B4C8DC)}
html body .cmp-tip .note,html body .cmp-tip .jce-legend{margin:.1rem 0 .2rem}

/* owner-only cards: the fold bar is the card's title, the old box is its body */
html body .cmp-own .cmp-fb{padding:.2rem 0 0}
html body .cmp-own .pvcard{margin:.3rem 0 !important;padding:.6rem .7rem !important}

/* ------------------------------------------------------------ the ⋯ menu -- */
html body .cmp-more{position:static;grid-column:1/-1;grid-row:2;margin:0;min-width:0}
html body .cmp-more>summary{list-style:none;position:absolute;right:.15rem;top:.35rem;z-index:1;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  cursor:pointer;font-size:1.4rem;line-height:1;font-weight:700;color:var(--ink2,#B4C8DC);
  background:rgba(255,255,255,.05);-webkit-tap-highlight-color:transparent}
html body .cmp-more[open]>summary{background:rgba(255,106,26,.18);color:var(--or-lt,#FFB259)}
html body .cmp-mb{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.5rem 0 .2rem;margin-top:.2rem;
  border-top:1px solid var(--line2,#132335);min-width:0}
html body .cmp-mb>*{min-width:0}
html body .cmp-mb .b,html body .cmp-mb .linkish,html body .cmp-pa .linkish,html body .cmp-mb a.b,html body .cmp-mb button.b{min-height:44px;box-sizing:border-box}
html body .cmp-mb .jct-x,html body .cmp-mb .jc-x{position:static !important;width:44px;height:44px;margin:0 !important;order:9;margin-left:auto !important}

/* --------------------------------------------- the Needs you rows (app.js) -- */
html body .needs{gap:.2rem}
html body .cmp-need{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto 48px;align-items:center;
  column-gap:.55rem;row-gap:0;min-height:64px;padding:.35rem .4rem .35rem .65rem;margin:.3rem 0;border-radius:12px;
  box-sizing:border-box;overflow:hidden}
html body .cmp-need::before,html body .cmp-need::after{content:none;display:none}
html body .cmp-need .cmp-ic{width:22px;height:22px;color:var(--or,#FF6A1A);display:flex;align-items:center}
html body .cmp-need.money .cmp-ic{color:var(--warn,#FFC24D)}
html body .cmp-need.ask .cmp-ic{color:var(--blue,#4FA8FF)}
html body .cmp-need .cmp-ic svg{width:20px;height:20px}
html body .cmp-need .cmp-nb{min-width:0}
html body .cmp-need .nm{font-size:.95rem;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .cmp-need .cmp-ph{font-size:.82rem;color:var(--muted,#8FA6BD);font-variant-numeric:tabular-nums;line-height:1.3}
html body .cmp-need .cmp-call{min-height:44px;padding:0 .7rem;font-size:.85rem}
html body .cmp-need .cmp-call svg{width:16px;height:16px}
html body .cmp-need .cmp-mb .acts{display:flex;gap:.4rem;flex-wrap:wrap;width:100%}
html body .cmp-need .cmp-mb .top{width:100%;display:flex;gap:.5rem}
html body .cmp-need .cmp-mb .what,html body .cmp-need .cmp-mb .quote{width:100%;font-size:.82rem;line-height:1.4;margin:0}

/* ------------------------------------- the calendar day rows (board.js) -- */
html body #boardtoday .jcal .jct-i{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto 46px;align-items:center;
  column-gap:.35rem;row-gap:0;min-height:64px;padding:.35rem .3rem .35rem .45rem;margin:.3rem 0;box-sizing:border-box}
html body #boardtoday .jcal .jct-i>.jce-k,html body #boardtoday .jcal .jct-i>.jc-k{grid-column:1;grid-row:1;width:22px;flex:none;min-width:0;justify-self:center}
html body #boardtoday .jcal .jct-i .jce-k i{display:none}
html body #boardtoday .jcal .jct-i .jce-k .jce-e{font-size:1.25rem}
html body #boardtoday .jcal .jct-i .jct-b{min-width:0}
html body #boardtoday .jcal .jct-i .jct-n{font-size:.92rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
html body #boardtoday .jcal .jct-i .jct-h{gap:.4rem}
html body #boardtoday .jcal .jct-i .jct-a,html body #boardtoday .jcal .jct-i .jct-w{margin:.05rem 0 0;font-size:.8rem;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #boardtoday .jcal .jct-i .jc-pill{display:none}
html body #boardtoday .jcal .jct-i .cmp-pa,html body #boardtoday .jcal .jct-i .jc-acts{grid-column:3;grid-row:1;display:flex;flex-wrap:nowrap;align-items:center;gap:.3rem;margin:0;padding:0}
html body #boardtoday .jcal .jct-i .cmp-pa .b,html body #boardtoday .jcal .jct-i .cmp-pa a{min-height:44px;padding:0 .4rem;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center}
html body #boardtoday .jcal .jct-i .cmp-pa .linkish{min-width:44px;max-width:3.6rem;text-align:center;line-height:1.1;padding:.2rem .15rem;
  font-size:.74rem;white-space:normal;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line,#243449)}
/* the in-progress "tell" list under the jobs keeps its own layout, just tighter */
html body #boardtoday .jcal .jc-hd{margin:.5rem 0 .3rem;font-size:1rem}
html body #boardtoday .jcal .jct-c{margin:0 0 .4rem}
html body #boardtoday .jcal .jcs-acts{margin:.2rem 0 .3rem}
html body #boardtoday .jcal .jc-add{min-height:44px}

/* --------------------------------------------- leads (board.js Leads card) -- */
html body .leads{gap:.25rem}
html body .leads .ld-h{min-height:44px}

/* ------------------------------------------------------- calls (app.js) -- */
html body .calls .call>.hd{padding:.5rem .65rem}
html body .calls .call .sum{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
html body .dates{gap:.4rem;margin:.4rem 0}
html body .dates input{min-height:44px;box-sizing:border-box}
html body .filters{margin:.4rem 0}

/* ------------------------------------------ the rest of Today, tightened -- */
html body #main .hud{margin:.6rem 0 .1rem;gap:.4rem}
html body #main .hud .hud-r:not(.asof):not(.hud-on){padding:.45rem .6rem;gap:.15rem;border-radius:12px;font-size:.7rem}
html body #main .hud .hud-r:not(.asof):not(.hud-on) b{font-size:1.25rem}
html body #main .greet{padding:.4rem 0 .1rem}
html body #main .greet .hi{font-size:1.35rem}
html body #main .greet .sub{font-size:.85rem;line-height:1.35}
html body .bc{margin:.6rem 0;border-radius:14px}
html body .bc-hd{padding:.7rem .85rem .35rem}
html body .bc-hd h2{font-size:1rem}
html body .bc-bd{padding:0 .85rem .8rem}
html body #boardtoday,html body #boardtoday2{margin-top:.5rem !important}
html body .att .at{min-height:44px}
html body .att .at>.b.sm{min-height:44px}
html body .h{margin:.7rem 0 .3rem}
html body .empty{padding:.9rem 1rem}

/* Today's jobs rows */
html body .jobs .jobwrap{margin:.3rem 0}
html body .jobs .job{padding:.5rem .7rem;min-height:56px}
html body .jobs .job .ad{font-size:.8rem}
html body .jobs .jacts{padding:0 .5rem .4rem}
html body .jobs .jacts .b{min-height:44px}

html body #boardtoday .jcal .jct-i .cmp-pa .linkish{min-height:44px;display:inline-flex;align-items:center;justify-content:center}