/* home: greeting, the assistant card, the deal form, my deals */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 0 6px; }
.acct { position:relative; } .acct > summary { list-style:none; width:44px; height:44px; padding:0; justify-content:center; border-radius:50%; background:var(--primary); color:var(--on-primary); font:700 18px var(--display); } .acct > summary::-webkit-details-marker { display:none; }
.menu { position:absolute; inset-inline-end:0; top:52px; z-index:20; min-width:240px; background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow); padding:10px; }
.menu .who { padding:6px 10px 10px; border-bottom:1px solid var(--rule); margin-bottom:6px; } .menu .who b { display:block; font:700 16px var(--display); } .menu .who span { color:var(--soft); font-size:13px; word-break:break-all; }
.menu button { display:block; width:100%; text-align:start; font:500 15px var(--body); background:none; border:0; color:var(--ink); padding:10px; min-height:44px; border-radius:10px; cursor:pointer; } .menu button:hover { background:var(--sunk); } .menu .danger { color:var(--coral); }
.assist { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; background:var(--sea); color:var(--on-sea); border-radius:var(--r-lg); padding:18px; margin:16px 0 8px; position:relative; overflow:hidden; }
.assist::after { content:""; position:absolute; inset:auto auto -60% -10%; width:240px; height:240px; background:radial-gradient(closest-side, rgba(179,233,228,.2), transparent); pointer-events:none; }
.assist .pearl { --s:52px; } .assist b { font:700 18px var(--display); display:block; } .assist p { margin:2px 0 0; color:var(--on-sea-soft); font-size:14px; line-height:1.6; }
.assist button.link { color:var(--on-sea); grid-column:1 / -1; justify-self:start; position:relative; z-index:1; }
.home-side > h2:first-child { margin-top:20px; }
@media (min-width:960px) {
  body[data-screen=setup] #app { max-width:1080px; }
  .home { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:40px; align-items:start; } .home-side { position:sticky; top:16px; }
}
.deal { display:grid; gap:2px; width:100%; text-align:start; font:inherit; color:inherit; background:var(--panel); border:1.5px solid var(--rule); border-radius:var(--r); padding:13px 16px; margin:8px 0; cursor:pointer; transition:border-color .15s; }
.deal:hover { border-color:var(--primary); } .deal.on { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); } .deal b { font:700 18px var(--display); } .deal small { color:var(--soft); font-size:13px; }
.st { font:700 11px var(--body); border-radius:6px; padding:1px 8px; margin-inline-start:8px; border:1.5px solid currentColor; } .st.draft { color:var(--soft); } .st.open { color:var(--brass-text); } .st.closed { color:var(--jade); } .st.lost { color:var(--coral); }
#sc { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#sc .chip { border-radius:var(--r); text-align:start; padding:14px 16px; display:flex; flex-direction:column; gap:2px; font:700 18px var(--display); }
#sc .chip small { font:400 13px/1.4 var(--body); opacity:.8; }
.intake { display:grid; gap:10px; margin:6px 0 4px; } .intake label { display:grid; gap:4px; font:600 14px var(--body); color:var(--soft); }
.intake input { font:inherit; font-size:16px; color:var(--ink); background:var(--panel); border:1.5px solid var(--rule); border-radius:var(--r); padding:11px 14px; min-height:48px; }
.intake input:focus-visible { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
details.form { padding:6px 18px 16px; } details.form > summary { font:700 17px var(--display); } details.form > h2:first-of-type { margin-top:8px; }
details.more { margin-top:4px; } details.more > summary { color:var(--primary); font:600 14px var(--body); }
.setup-links { display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
#lg { display:inline-flex; border:1.5px solid var(--rule); border-radius:999px; padding:3px; background:var(--panel); } #lg .chip { border:0; background:transparent; min-height:40px; padding:6px 20px; } #lg .chip.on { background:var(--primary); }
.pledge { border:1.5px solid var(--primary); border-radius:var(--r); padding:15px 17px; margin:26px 0 12px; background:var(--panel); }
.pledge-h { font:700 14px var(--body); color:var(--primary); margin-bottom:6px; }
label.consent { display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.6; cursor:pointer; }
label.consent input { flex:none; margin:4px 0 0; width:22px; height:22px; accent-color:var(--primary); }
.go-hint { text-align:center; margin:8px 0 0; }
label.consent.extra { margin-top:14px; padding-top:14px; border-top:1px dashed var(--rule); color:var(--soft); }
#weakBox strong { font:700 15px var(--body); color:var(--coral); }
dialog { border:1px solid var(--rule); border-radius:var(--r-lg); padding:22px; background:var(--panel); color:var(--ink); max-width:min(420px, calc(100% - 32px)); box-shadow:var(--shadow); } dialog::backdrop { background:rgba(7,13,36,.6); backdrop-filter:blur(3px); }
dialog h3 { margin:0 0 6px; font:700 20px var(--display); } dialog p { margin:0 0 6px; color:var(--soft); font-size:15px; }

.deal .next { color:var(--ink); font-size:14px; } .deal .due { font:600 13px var(--body); } .deal .due.late { color:var(--coral); } .deal .due.today { color:var(--brass-text); } .deal .due.soon { color:var(--jade); } .deal .due.none { color:var(--soft); font-weight:400; }
.row2.follow .inp { min-width:0; } .row2.follow input[type=date] { flex:0 0 11em; direction:ltr; }
.note-in { min-height:72px; } ul.notes { list-style:none; padding:0; margin:0; display:grid; gap:6px; } ul.notes li { background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:8px 12px; font-size:15px; } ul.notes small { color:var(--soft); }
#dealsBox .hint { margin:6px 2px 0; }

/* open deals: one calm row per deal, the colour of the badge says what needs you first */
.deals-h { display:flex; align-items:baseline; gap:8px; } .deals-h h2 { margin-block:20px 8px; font:700 20px var(--display); color:var(--ink); letter-spacing:0; }
.deals-h .cnt { font:700 13px var(--body); color:var(--on-primary); background:var(--primary); border-radius:999px; min-width:24px; text-align:center; padding:0 8px; }
#deals .deal { grid-template-columns:1fr auto; align-items:center; gap:2px 12px; padding:12px 16px; margin:8px 0; border-inline-start:5px solid var(--tone, var(--rule)); }
#deals .deal b, #dealsDone .deal b { font:700 17px/1.4 var(--display); grid-column:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#deals .deal .due, #dealsDone .deal .due { grid-column:2; grid-row:1; font:700 12px var(--body); padding:2px 10px; border-radius:999px; background:color-mix(in srgb, var(--tone, var(--soft)) 14%, transparent); color:var(--tone, var(--soft)); white-space:nowrap; }
#deals .deal .sub, #dealsDone .deal .sub { grid-column:1 / -1; color:var(--soft); font:400 13px/1.5 var(--body); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:none; }
.deal[data-tone=late] { --tone:var(--coral); } .deal[data-tone=today] { --tone:var(--brass-text); } .deal[data-tone=soon] { --tone:var(--jade); } .deal[data-tone=none] { --tone:var(--soft); }
.deal[data-tone=closed] { --tone:var(--jade); } .deal[data-tone=lost] { --tone:var(--soft); }
#dealsDone .deal { grid-template-columns:1fr auto; align-items:center; gap:2px 12px; padding:10px 14px; border-inline-start:5px solid var(--tone, var(--rule)); }
#dealsMore { margin-top:2px; }

/* ---- say the deal instead of typing it (optional) ---- */
.voicebox { margin:4px 0 14px; padding:14px; border:1.5px dashed var(--rule); border-radius:var(--r); background:var(--panel); --h:var(--primary); }
.voicebox .vi-row { display:flex; align-items:center; gap:12px; }
.vi-btn { font:inherit; font-weight:700; min-height:48px; padding:0 20px; border-radius:999px; border:0; background:var(--primary); color:#fff; cursor:pointer; }
.vi-btn:disabled { opacity:.55; }
.voicebox[data-state=rec] { border-style:solid; border-color:var(--h); }
.voicebox[data-state=rec] .vi-btn { background:#c0392b; }
.vi-tm { font-variant-numeric:tabular-nums; color:var(--muted, var(--ink)); }
.vi-lv { flex:1; height:8px; border-radius:99px; background:color-mix(in srgb, var(--ink) 10%, transparent); overflow:hidden; display:none; }
.vi-lv i { display:block; height:100%; width:var(--lv,0%); background:var(--h); transition:width .1s; }
.voicebox[data-state=rec] .vi-lv { display:block; }
.vi-msg { margin:10px 0 0; font-size:15px; }
.voicebox[data-state=err] .vi-msg { color:#b3261e; }
.voicebox[data-state=ok] .vi-msg { color:#1a7f4b; }
.vi-heard { margin-top:8px; font-size:14px; }
.vi-heard p { margin:6px 0 0; line-height:1.7; }
.vi-note { display:block; margin-top:8px; opacity:.7; }