/* Wave 8 L2: screen-by-screen pass against the "rapport" UI study (round3/research-r3.md "E16", critique in
   round3/rapport/L2-critique.md). Layout ideas only, rebuilt in our own code, brand tokens and words: the key-number strip
   under each title, the won revenue chart and hot deals on Today, contact cards, the colored deal stage track, invoice
   aging, a sticky settings section list on wide screens, and deeper surfaces in dark mode.
   Colors come from the theme tokens (app.css, themes.css), so every palette and both modes keep their contrast.
   Sizes in rem; touch sizes come from a11y.css. Only transform and opacity move; Reduce Motion turns movement off. */

/* ---------- key-number strip (LS.strip) ---------- */
.ls-strip{list-style:none;margin:16px 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.ls-stat{display:flex;align-items:center;gap:12px;min-width:0}
.ls-si{width:2.5rem;height:2.5rem;border-radius:999px;display:grid;place-items:center;flex:none;background:var(--surface);border:1px solid var(--line);color:var(--lake);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent)}
.ls-si .ico{width:1.125rem;height:1.125rem}
.ls-st{display:flex;flex-direction:column;min-width:0}
.ls-sv{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ls-n{font-family:var(--f-display);font-size:1.25rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.ls-sl{font-size:.75rem;color:var(--muted);line-height:1.35}
.ls-badge{font-size:.75rem;font-weight:650;padding:1px 8px;border-radius:99px;background:var(--sunk);color:var(--ink);white-space:nowrap}
.ls-badge.p-good{background:var(--good-soft);color:var(--good)}
.ls-badge.p-eye{background:var(--eye-soft);color:var(--eye)}
.ls-badge.p-amb{background:var(--amber-soft);color:var(--amber)}
.ls-badge.p-lake{background:var(--lake-soft);color:var(--lake)}
@media (max-width:640px){
  .ls-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ls-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;align-items:flex-start}
  .ls-si{width:2rem;height:2rem}
  .ls-n{font-size:1.0625rem}
}

/* ---------- Today: won revenue chart and hot deals ---------- */
.hm-rev{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
@media (max-width:1100px){.hm-rev{grid-template-columns:1fr}}
.ls-rev{display:flex;flex-direction:column;gap:6px}
.ls-rev-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ls-rev-h h2{margin:0}
.ls-rev-total{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:2px}
.ls-rev-total .big{font-family:var(--f-display);font-weight:750;font-size:2rem;letter-spacing:-.02em;line-height:1.1}
.ls-rev-total .muted{font-size:.8125rem}
.ls-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.75rem;color:var(--muted);margin:2px 0 4px}
.ls-legend span{display:inline-flex;align-items:center;gap:6px}
.ls-legend i{display:inline-block;width:14px;height:3px;background:var(--lake);border-radius:2px}
.ls-legend i.avg{height:2px;background:repeating-linear-gradient(90deg,var(--muted) 0 4px,transparent 4px 7px)}
.ls-chartbox{position:relative;padding-left:3rem}
.ls-chart{width:100%;height:11.5rem;display:block;overflow:visible}
.ls-chart .grid-l{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.ls-yl{position:absolute;left:0;width:2.6rem;text-align:right;font-size:.75rem;color:var(--muted);transform:translateY(-50%);font-family:var(--f-mono)}
.ls-xl{display:flex;justify-content:space-between;margin:6px 0 0 3rem;font-size:.75rem;color:var(--muted)}
.ls-xl span{flex:1;text-align:center;min-width:0}
@media (max-width:640px){.ls-xl span:nth-child(even){visibility:hidden}}
.ls-chart .area{fill:url(#lsRevFill)}
.ls-chart .line{fill:none;stroke:var(--lake);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ls-chart .avg{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 5;fill:none;vector-effect:non-scaling-stroke}
.ls-chart .stop-a{stop-color:var(--lake);stop-opacity:.22}
.ls-chart .stop-b{stop-color:var(--lake);stop-opacity:0}
.ls-chart-empty{display:grid;place-items:center;min-height:180px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);text-align:center;padding:16px}
.ls-hot .ls-hot-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.ls-hot .ls-hot-h h2{margin:0}
.ls-hot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:480px){.ls-hot-grid{grid-template-columns:1fr}}
/* Each hot deal is one button. In light mode a navy tile, in dark mode a light tile (both are --ink on --surface). */
.ls-deal{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-height:8.5rem;padding:12px 13px;border-radius:12px;cursor:pointer;
  background:var(--ink);color:var(--surface);position:relative;overflow:hidden;min-width:0;transition:transform 160ms var(--ease-out,ease),box-shadow 160ms ease}
.ls-deal:focus-visible{outline:2px solid var(--lake);outline-offset:2px}
.ls-deal .ls-when{font-size:.75rem;opacity:.86}
.ls-deal .ls-dn{font-family:var(--f-display);font-weight:650;font-size:.9375rem;line-height:1.25;margin-top:4px;overflow-wrap:anywhere}
.ls-deal .ls-who{font-size:.75rem;opacity:.86;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-deal .ls-amt{font-family:var(--f-display);font-weight:750;font-size:1.125rem;margin-top:auto;padding-top:8px}
.ls-deal .ls-stage{font-size:.75rem;opacity:.86;display:flex;align-items:center;gap:6px}
.ls-deal .ls-stage::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sc,var(--lake));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--surface) 70%,transparent);flex:none}
@media (hover:hover) and (pointer:fine){.ls-deal:hover{transform:translateY(-2px);box-shadow:var(--shadow)}}
.ls-deal:active{transform:scale(.98)}

/* ---------- Contacts: table or cards ---------- */
.ct-viewbar{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.ct-viewbar .grow{flex:1}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:12px}
.ct-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;
  transition:transform 160ms var(--ease-out,ease),box-shadow 160ms ease,border-color 160ms ease}
@media (hover:hover) and (pointer:fine){.ct-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--lake) 40%,var(--line))}}
.ct-top{display:flex;align-items:center;gap:10px;min-width:0}
.ct-top .grow{min-width:0;flex:1}
/* The name is the card's one button; it covers the card (::after) so the whole card opens the record. */
.ct-open{all:unset;cursor:pointer;font-family:var(--f-display);font-weight:650;font-size:.9375rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.ct-open::after{content:"";position:absolute;inset:0;border-radius:14px}
.ct-open:focus-visible{outline:none}
.ct-open:focus-visible::after{outline:2px solid var(--lake);outline-offset:2px}
.ct-sub{font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--sunk);border-radius:10px;padding:8px 10px}
.ct-facts dt{font-size:.75rem;color:var(--muted);margin:0}
.ct-facts dd{margin:0;font-weight:600;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-foot{display:flex;align-items:center;gap:6px}
.ct-foot .grow{flex:1;min-width:0;display:flex;gap:6px;flex-wrap:wrap}
/* Mail and call links sit above the card's cover so they stay their own targets. */
.ct-foot a.iconbtn{position:relative;z-index:1;text-decoration:none}

/* ---------- Contact record: profile header ---------- */
.rec-head.rec-profile{background:linear-gradient(180deg,color-mix(in srgb,var(--lake) 9%,var(--surface)),var(--surface) 70%)}
.rec-profile .av{box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in srgb,var(--lake) 55%,transparent)}

/* ---------- Deal record: hero header and stage track colored by stage ---------- */
.rec-head.rec-deal{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.rec-deal .rec-name{color:var(--surface)}
.rec-deal .rec-keys{color:color-mix(in srgb,var(--surface) 84%,var(--ink))}
.rec-deal .rec-keys a,.rec-deal .rec-keys .crm-link{color:inherit;text-decoration:underline}
.rec-deal .rec-keys .num{color:var(--surface)!important;font-size:1.125rem}
.rec-deal .crm-coicon{background:color-mix(in srgb,var(--surface) 14%,transparent);color:var(--surface)}
.rec-deal .rec-acts .btn{background:color-mix(in srgb,var(--surface) 10%,var(--ink));border-color:color-mix(in srgb,var(--surface) 22%,transparent);color:var(--surface)}
.rec-deal .rec-acts .btn .ico{color:inherit}
.stage-track button{position:relative}
.stage-track button.past,.stage-track button.cur{--tone:var(--sc,var(--lake))}
.stage-track button.past{background:color-mix(in srgb,var(--tone) 18%,var(--surface));color:var(--ink)}
.stage-track button.cur{background:var(--tone);color:var(--sc-ink,var(--lake-ink))}

/* Phones: quick actions sit three to a row; a long label ("Text from my phone") wraps inside its button instead of
   running under the next one (seen in the L2 before shots). */
@media (max-width:860px){.rec-acts .btn{white-space:normal;line-height:1.2;text-align:center;min-width:0;overflow-wrap:anywhere}}

/* ---------- Invoices: aging ---------- */
.aging{margin-bottom:14px}
.aging-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.aging-h h2{margin:0}
.aging-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 4px}
.aging-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.aging-col{height:5.5rem;border-radius:10px;background:var(--sunk);display:flex;align-items:flex-end;overflow:hidden}
.aging-fill{width:100%;border-radius:10px;background:var(--ink);transform-origin:bottom;transition:transform 400ms var(--ease-out,ease)}
.aging-b.late .aging-fill{background:var(--eye)}
.aging-l{font-size:.75rem;color:var(--muted);text-align:center}
.aging-v{font-weight:650;font-size:.8125rem;text-align:center}
.aging-v .muted{font-weight:500}

/* ---------- Settings: a sticky section list beside the panel on wide screens ---------- */
@media (min-width:1100px){
  .pf .pf-body{display:grid;grid-template-columns:13.5rem minmax(0,1fr);gap:20px;align-items:start;margin-top:14px}
  .pf .pf-side{position:sticky;top:12px}
  .pf .pf-side .tabs{flex-direction:column;border-bottom:0;overflow:visible;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px}
  .pf .pf-side .tabs button{text-align:left;border-bottom:0;border-radius:8px;padding:9px 12px;white-space:normal}
  .pf .pf-side .tabs button[aria-selected="true"]{background:var(--lake-soft);color:var(--lake)}
  .pf .pf-side .tabs button:hover:not([aria-selected="true"]){background:var(--sunk);color:var(--ink)}
}

/* ---------- dark mode depth: a faint sky glow at the top of the work area, lit card edges ---------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .work{background:radial-gradient(1200px 420px at 30% -120px,color-mix(in srgb,var(--lake) 12%,transparent),transparent 70%),var(--bg)}
  :root:not([data-theme="light"]) .card,:root:not([data-theme="light"]) .ct-card{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 7%,transparent)}}
:root[data-theme="dark"] .work{background:radial-gradient(1200px 420px at 30% -120px,color-mix(in srgb,var(--lake) 12%,transparent),transparent 70%),var(--bg)}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .ct-card{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 7%,transparent)}

/* ---------- icon rail label: settles in quickly ---------- */
.rail-tip:not([hidden]){animation:ls-tip 120ms var(--ease-out,ease)}
@keyframes ls-tip{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .ls-deal,.ct-card,.aging-fill{transition:none}
  .ls-deal:hover,.ls-deal:active,.ct-card:hover{transform:none}
  .rail-tip:not([hidden]){animation:none}
}
.ct-viewbar .chan button{display:inline-flex;align-items:center;gap:6px}
.ct-viewbar .chan .ico{width:15px;height:15px}
.ct-viewbar .ls-strip{margin:0}
@media (max-width:640px){.ct-viewbar{flex-direction:column;align-items:stretch}.ct-viewbar .chan{align-self:flex-end}}