/* racon app polish (2026-11): loaded after app.css and modern.css, so it only restyles. Same palette, same markup.
   Ideas: a mist page ground so the white cards stand out, softer layered shadows, a calmer top bar, one wave motif on the hero. */
:root {
  --ground: #f3f6f2;
  --shadow-1: 0 1px 2px rgba(26, 41, 45, .06), 0 4px 14px rgba(26, 41, 45, .05);
  --shadow-2: 0 2px 4px rgba(26, 41, 45, .06), 0 18px 40px rgba(26, 41, 45, .10);
  --ring: rgba(26, 41, 45, .07);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
body { background: var(--ground); }
::selection { background: var(--teal-soft); color: var(--navy); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
main { padding-top: 32px; }
h1 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -.025em; }
main > h1, .wb-title h1 { font-weight: 650; }

/* top bar */
.topbar { height: 62px; background: linear-gradient(180deg, #1d2f33, var(--navy)); box-shadow: 0 1px 0 rgba(135, 203, 164, .14), 0 8px 24px rgba(26, 41, 45, .12); }
.nav { gap: 2px; }
.nav a { padding: 7px 14px; border-radius: 999px; font-weight: 500; opacity: .86; transition: background .18s var(--ease), color .18s, opacity .18s; }
.nav a:hover { opacity: 1; background: rgba(135, 203, 164, .12); color: var(--white); }
.nav a.active { opacity: 1; background: var(--teal); color: var(--navy); box-shadow: 0 4px 16px rgba(135, 203, 164, .35); font-weight: 600; }
.brand-logo { flex: none; }

/* buttons and small controls */
.btn { border-radius: 10px; font-weight: 550; transition: background .15s, border-color .15s, transform .15s var(--ease), box-shadow .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn.primary { background: linear-gradient(180deg, #223a3f, var(--navy)); box-shadow: 0 6px 16px rgba(26, 41, 45, .22); }
.btn.primary:hover { background: linear-gradient(180deg, #2c4a44, #24403a); border-color: var(--mid-navy); }
.btn.quiet:hover { transform: none; }
.pill { transition: background .15s, border-color .15s, color .15s; }
.pill:hover { background: var(--teal-soft); border-color: var(--teal); }
.pill.on:hover { background: var(--navy); }
.wb-bar input[type=search], .wb-sort select, .wb-f select, .wb-f input { transition: border-color .15s, box-shadow .15s; }
.wb-bar input[type=search]:focus, .wb-sort select:focus, .wb-f select:focus, .wb-f input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(135, 203, 164, .28); }

/* cards: one look for every white surface */
.viz-card, .call-card, .side-card, .wb-list, .wb-drawer, .wb-panel, .table-wrap, .card {
  border: 1px solid var(--ring); box-shadow: var(--shadow-1); border-radius: 16px; }
.viz-card { transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.viz-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.viz-card h3, .call-card h3, .side-card h3 { letter-spacing: -.01em; }
.dash-switch { border: 1px solid var(--ring); box-shadow: var(--shadow-1); }
.dash-switch a { transition: background .15s, color .15s; }
.dash-switch a:hover:not(.active) { background: var(--ground); }

/* dashboard hero: a wave along the bottom edge */
.t-hero { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(135, 203, 164, .18); box-shadow: 0 18px 44px rgba(26, 41, 45, .28); }
.t-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: -1; pointer-events: none; opacity: .9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C150 10 300 82 450 46 S750 10 900 46 S1100 70 1200 40 V80 H0Z' fill='%2387cba4' fill-opacity='.10'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 58 C200 28 330 80 520 56 S850 24 1010 56 S1130 70 1200 54 V80 H0Z' fill='%23709a95' fill-opacity='.16'/%3E%3C/svg%3E") bottom / 100% 70% no-repeat; }
.kpi-tile { backdrop-filter: blur(6px); transition: background .2s, transform .2s var(--ease); }
.kpi-tile:hover { background: rgba(255, 255, 255, .11); transform: translateY(-2px); }
.kpi-value { font-variant-numeric: tabular-nums; }

/* prospect list */
.wb-hd { background: #f8faf7; letter-spacing: .07em; }
.wb-row { transition: background .12s; }
.wb-row:hover { background: #f4f9f5; }
.wb-row.open { background: #ecf5ef; box-shadow: inset 3px 0 0 var(--teal); }
.wb-co .nm { letter-spacing: -.005em; }
.wbar { height: 6px; border-radius: 4px; }
.wbar i { background: linear-gradient(90deg, var(--mid-navy), var(--teal)); border-radius: 4px; }
.wbar.tim i { background: linear-gradient(90deg, #c9b57f, var(--lavender)); }
.sig b { border-radius: 5px; }
.wb-drawer { box-shadow: var(--shadow-2); }
.wb-empty { padding: 56px 24px; }
.wb-empty::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: var(--navy);
  -webkit-mask: none; mask: none;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M8 32 C16 20 22 20 28 32 S40 44 48 28' fill='none' stroke='%2387cba4' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.wb-empty b, .wb-empty strong { display: block; margin-bottom: 6px; color: var(--navy); font-size: 1.05rem; }

/* what changed */
.chg { border-radius: 12px; transition: background .12s; }
.chg:hover { background: rgba(255, 255, 255, .7); }
.chip { border-radius: 999px; font-weight: 550; }
.chg-add, .chg-rem { border-radius: 8px; }

/* tables elsewhere */
table th { letter-spacing: .06em; }
table tbody tr { transition: background .12s; }
table tbody tr:hover { background: #f6faf6; }

/* quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c9d6cf transparent; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .viz-card:hover, .kpi-tile:hover, .btn:hover { transform: none; } }
@media (max-width: 760px) { .topbar { height: 56px; } main { padding-top: 22px; } }

/* team view (today.js renderTeamHome) */
.team-list, .open-list { list-style: none; margin: 0; padding: 0; }
.team-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 70px auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line, #e3ebe8); }
.team-row:first-child { border-top: 0; }
.av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600;
  background: linear-gradient(135deg, var(--navy), var(--mid-navy)); color: #fff; }
.team-who { min-width: 0; display: flex; flex-direction: column; }
.team-who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-bar { height: 6px; border-radius: 3px; background: var(--ground); overflow: hidden; }
.team-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--teal), #5fd0c0); }
.team-n { font-variant-numeric: tabular-nums; text-align: right; }
.team-n small { font-weight: 400; color: var(--mid-navy); }
.open-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line, #e3ebe8); }
.open-row:first-child { border-top: 0; }
.open-row .call-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }