/* Application shell and the base component system, plus the call kit and the record, pipeline, companies, notes and team pages. */

/* Base design system and shell */

:root{
  --navy:#002B47;--navyink:#9FBACE;--blue:#00619F;--bluedk:#004E80;--bluetint:#F1F6FA;
  --green:#1A7A4C;--amber:#A9711A;--hot:#C1611A;--red:#B93A2F;--violet:#5F4B93;--teal:#0E6E7A;
  --page:#F4F6F8;--card:#fff;--surf2:#FAFBFC;--sand:#FBFAF7;--line:#E2E7EC;--line2:#EDF1F4;
  --ink:#101C26;--ink2:#3B4A55;--mute:#6C7B86;--faint:#9AA7B1;--rule:#E6EBEF;--rule2:#D5DDE3;
  --raj:'Rajdhani',system-ui,sans-serif;--ui:'Inter',-apple-system,"Segoe UI",Roboto,sans-serif;
  --lift:none;--lift2:none;--pop:0 1px 2px rgba(16,28,38,.05),0 18px 44px -16px rgba(16,28,38,.28);
}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--page);color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--raj);font-weight:700;margin:0;letter-spacing:-.012em}
.num{font-family:var(--raj);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.lbl{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
.side{background:var(--navy);color:var(--navyink);display:flex;flex-direction:column;padding:16px 12px}

.who{background:rgba(255,255,255,.06);border-radius:8px;padding:10px 11px}
.who .lb{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7195AE;font-weight:600}
.who .rowf{display:flex;align-items:center;gap:11px;margin-top:9px}
.who .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--raj);font-weight:700;font-size:11.5px;flex:none}
.who b{color:#fff;font-size:13.5px;display:block;font-weight:600;letter-spacing:-.005em}
.who small{color:#7E9DB4;font-size:11.5px}
.swap{width:100%;margin-top:9px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#CBDCE7;
 font-family:var(--raj);font-weight:600;font-size:12.5px;padding:7px;border-radius:6px;cursor:pointer;text-align:center}
.swap:hover{background:rgba(255,255,255,.09);color:#fff}
.picker{margin-top:8px;background:rgba(0,0,0,.22);border-radius:9px;padding:6px;display:none}
.picker.on{display:block}
.picker button{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:0;color:#CBDCE7;
 padding:8px 9px;border-radius:7px;cursor:pointer;font-family:var(--ui);font-size:13.5px;text-align:left}
.picker button:hover{background:rgba(255,255,255,.09);color:#fff}
.picker button .ini{width:22px;height:22px;border-radius:50%;color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;flex:none}
.picker button small{margin-left:auto;color:#7E9DB4;font-size:11.5px}
.side .grp{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#5B7B92;padding:0 8px 6px;margin-top:14px;font-weight:600}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:10px;padding:0 10px;height:34px;border-radius:6px;color:#CBDCE7;
 font-family:var(--raj);font-size:14.5px;font-weight:600;cursor:pointer}
.side nav a svg{width:15px;height:15px;flex:none;opacity:.72}
.side nav a .c{margin-left:auto;font-family:var(--ui);font-size:11px;font-weight:600;color:#8FAEC4;font-variant-numeric:tabular-nums}
.side nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.side nav a.on{background:var(--blue);color:#fff}.side nav a.on svg{opacity:1}.side nav a.on .c{color:rgba(255,255,255,.8)}
.side .grow{flex:1}
.side .stat{padding:0 10px;margin-top:16px}
.side .stat .n{font-family:var(--raj);font-weight:700;font-size:19px;color:#fff;line-height:1}
.side .stat .l{font-size:11px;color:#7D9EB5;margin-top:3px;line-height:1.4}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:16px;padding:0 22px;height:54px;background:var(--card);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:6}
.top h1{font-size:17px;line-height:1.2}.top .sub{font-size:12.5px;color:var(--mute);margin-top:1px}.top .grow{flex:1}
.srch{display:flex;align-items:center;gap:8px;background:var(--page);border:1px solid var(--rule);border-radius:6px;padding:0 11px;height:32px;min-width:250px;cursor:pointer}
.srch svg{width:16px;height:16px;color:var(--faint);flex:none}
.srch input{border:0;background:transparent;outline:none;font:inherit;font-size:12.5px;width:100%;cursor:pointer;color:var(--ink)}
.wrap{padding:18px 22px 40px;max-width:1560px}
.foot{font-size:11.5px;color:var(--faint);text-align:center;padding:18px 0 0}
.hello{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.hello .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--raj);font-weight:700;font-size:13px;flex:none}
.hello h2{font-size:19px}.hello .d{font-size:13px;color:var(--mute);margin-top:1px}
.hello .rt{margin-left:auto;text-align:right}.hello .rt .n{font-size:19px}.hello .rt .l{font-size:11.5px;color:var(--mute)}
.shead{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px;flex-wrap:wrap}
.shead h2{font-size:16px}.shead .c{font-size:12.5px;color:var(--mute)}
.shead .rt{margin-left:auto;font-size:12px;color:var(--faint)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap;font-family:var(--ui)}
.st i{width:7px;height:7px;border-radius:50%;flex:none}
.st.new{color:var(--blue)}.st.new i{background:var(--blue)}
.st.working{color:var(--green)}.st.working i{background:var(--green)}
.st.hot{color:var(--hot)}.st.hot i{background:var(--hot)}
.st.quiet{color:var(--red)}.st.quiet i{background:var(--red)}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--mute);white-space:nowrap;flex:none}
.tag i{width:7px;height:7px;border-radius:50%;flex:none}
.tag.new{color:var(--blue)}.tag.new i{background:var(--blue)}
.tag.hold{color:var(--green)}.tag.hold i{background:var(--green)}
.tag.hot{color:var(--hot)}.tag.hot i{background:var(--hot)}
.tag.late{color:var(--red)}.tag.late i{background:var(--red)}
.dept{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;letter-spacing:.02em;white-space:nowrap}
.dept.sales{background:color-mix(in srgb,var(--blue) 12%,var(--surface));color:var(--blue)}
.dept.service{background:color-mix(in srgb,var(--green) 12%,var(--surface));color:var(--green)}
.dept.both{background:color-mix(in srgb,var(--violet) 12%,var(--surface));color:var(--violet)}
.dept.none{background:var(--page);color:var(--faint)}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;margin-bottom:12px;overflow:hidden}
.blk{padding:12px 16px;border-top:1px solid var(--rule)}
.blk .lbl{display:block;margin-bottom:5px}.blk p{margin:0;font-size:13.5px;line-height:1.55}
.chead{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 12px;flex-wrap:wrap}
.chead .idx{width:22px;height:22px;border-radius:50%;background:var(--page);color:var(--mute);display:grid;place-items:center;font-family:var(--raj);font-weight:700;font-size:12px;flex:none;margin-top:2px}
.chead .t{flex:1;min-width:170px}.chead h3{font-size:17px;line-height:1.2}
.chead h3 span{cursor:pointer}.chead h3 span:hover{color:var(--blue)}
.chead .sub{font-size:12.5px;color:var(--mute);margin-top:2px;font-variant-numeric:tabular-nums}
.ev{display:flex;flex-wrap:wrap;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--rule);list-style:none;padding-left:0}
.ev li{padding-right:22px;font-size:12px;color:var(--mute)}
.ev li b{display:block;font-family:var(--raj);font-weight:700;font-size:15.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.blk.script{background:var(--sand);box-shadow:inset 3px 0 0 var(--amber)}
.panel>.blk.script{padding-left:14px;padding-right:14px}
.blk.script .lbl{color:var(--amber)}.blk.script p{color:#3A2E19}
.pers{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.pers .p{flex:1;min-width:170px}.pers .p b{display:block;font-family:var(--raj);font-weight:700;font-size:16px;line-height:1.2}
.pers .p span{font-size:12px;color:var(--mute)}
.pers .tel{text-align:right}
.pers .tel .k{font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);display:block}
.pers .tel .n{font-size:20px;color:var(--navy);line-height:1.05}
.acts{display:flex;gap:8px;padding:12px 16px 14px;flex-wrap:wrap;border-top:1px solid var(--rule)}
.btn{border:0;border-radius:6px;padding:0 14px;height:34px;font-family:var(--raj);font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn svg{width:15px;height:15px}
.btn.go{background:var(--blue);color:#fff;flex:1;min-width:150px}.btn.go:hover{background:var(--bluedk)}
.btn.alt{background:var(--card);color:var(--ink2);border:1px solid var(--rule2)}.btn.alt:hover{background:var(--page)}
.btn.sm{height:30px;font-size:13px;padding:0 12px}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:start}
@media(max-width:1180px){.board{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.board{grid-template-columns:1fr}}
.col{background:#ECF0F3;border:1px solid var(--line);border-radius:6px;padding:4px 4px 6px}
.colh{display:flex;align-items:center;gap:7px;padding:9px 9px 3px}
.colh b{font-family:var(--raj);font-size:14.5px}
.colh .n{margin-left:auto;font-family:var(--raj);font-weight:700;font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.colh i{width:7px;height:7px;border-radius:50%;flex:none}
.colsub{padding:0 9px 8px;font-size:11px;color:var(--mute)}
.pc{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:10px 11px;margin-bottom:5px}
.pc b{font-weight:600;font-size:13px;cursor:pointer;display:block;line-height:1.3;letter-spacing:-.005em}
.pc b:hover{color:var(--blue)}
.pc .m{font-size:11.5px;color:var(--mute);margin-top:2px;font-variant-numeric:tabular-nums}
.pc .nt{font-size:12px;color:var(--ink2);margin-top:7px;padding-top:7px;border-top:1px solid var(--rule);line-height:1.45}
.pc .mv{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.pc .mv button{border:1px solid var(--rule2);background:var(--card);border-radius:5px;height:25px;padding:0 8px;
 font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--mute);cursor:pointer}
.pc .mv button:hover{border-color:var(--blue);color:var(--blue);background:var(--bluetint)}
.colempty{padding:14px 10px;color:var(--faint);font-size:12px;text-align:center}
.colmore{padding:9px 10px;border-top:1px solid var(--line);text-align:center}
.colmore a{font-size:12px;color:var(--blue);text-decoration:none}
.colmore a:hover{text-decoration:underline}
.tbl{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.tbl .th,.tbl .tr{display:grid;grid-template-columns:2.1fr .7fr 1.1fr 1.2fr 1.5fr;gap:12px;padding:0 14px;min-height:38px;align-items:center}
.tbl.n4 .th,.tbl.n4 .tr{grid-template-columns:2.1fr .7fr 1.1fr 1.2fr}
.tbl .th{background:#FAFBFC;border-bottom:1px solid var(--rule);min-height:32px}
.tbl .th div{font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.tbl .tr{border-top:1px solid var(--rule)}.tbl .tr:first-of-type{border-top:0}.tbl .tr:hover{background:#FAFCFD}
.tbl .co{font-weight:600;font-size:13px;cursor:pointer;line-height:1.3;padding:6px 0;letter-spacing:-.005em}.tbl .co:hover{color:var(--blue)}
.tbl .co span{display:block;font-family:var(--ui);font-weight:400;font-size:11.5px;color:var(--mute)}
.tbl .cell{font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.owncell{display:flex;align-items:center;gap:8px}
.owncell .ini{width:20px;height:20px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;flex:none}
.owncell select{border:1px solid transparent;background:transparent;font:inherit;font-size:12.5px;color:var(--ink2);
 border-radius:5px;padding:3px 4px;cursor:pointer;max-width:150px}
.owncell select:hover{border-color:var(--rule2);background:var(--card)}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.filters button{border:1px solid var(--rule2);background:var(--card);border-radius:6px;height:30px;padding:0 11px;
 font-family:var(--ui);font-size:12.5px;font-weight:500;color:var(--ink2);cursor:pointer}
.filters button:hover{border-color:var(--blue)}
.filters button.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.strip .s{background:var(--card);padding:12px 15px}
.strip .s .n{font-size:22px;line-height:1}.strip .s.key .n{color:var(--blue)}
.strip .s .l{font-size:11.5px;color:var(--mute);margin-top:5px;line-height:1.35}
@media(max-width:900px){.strip{grid-template-columns:repeat(2,1fr)}}
.brief{background:var(--card);border-radius:9px;box-shadow:var(--lift2);overflow:hidden;margin-bottom:12px}
.briefh{background:var(--navy);color:#fff;padding:22px 28px}
.briefh h2{font-size:24px;color:#fff}
.briefh .d{color:var(--navyink);font-size:14.5px;margin-top:3px}
.bsum{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);margin:18px -28px -22px;padding-top:1px}
.bsum div{background:var(--navy);padding:14px 28px}
.bsum .n{font-family:var(--raj);font-weight:700;font-size:25px;color:#fff;line-height:1}
.bsum .l{font-size:12.5px;color:var(--navyink);margin-top:4px;line-height:1.35}
@media(max-width:900px){.bsum{grid-template-columns:repeat(2,1fr)}}
.bsec{padding:22px 28px;border-top:1px solid var(--rule)}
.bsec h3{font-size:18px;margin-bottom:4px}
.bsec .lead{font-size:14.5px;color:var(--mute);margin:0 0 15px}
.act{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--rule)}
.act:first-of-type{border-top:0;padding-top:2px}
.act .ini{width:24px;height:24px;border-radius:50%;color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;font-family:var(--ui);margin-top:1px}
.act .ah{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.act .ah b{font-weight:600;font-size:13px;cursor:pointer;letter-spacing:-.005em}.act .ah b:hover{color:var(--blue)}
.act .ah .w{font-size:11.5px;color:var(--mute)}
.act .q{font-size:12.5px;color:var(--ink2);line-height:1.5;margin-top:4px;padding-left:9px;box-shadow:inset 2px 0 0 var(--rule2)}
.act .cx{font-size:11.5px;color:var(--mute);margin-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.act .cx svg{width:12px;height:12px;color:var(--blue);flex:none}
.flagbit{color:var(--amber);font-weight:600}
.mini{display:flex;align-items:center;gap:10px;min-height:34px;padding:5px 0;border-top:1px solid var(--rule);flex-wrap:wrap}
.mini:first-of-type{border-top:0}
.mini b{font-weight:600;font-size:12.8px;cursor:pointer;flex:1;min-width:120px;line-height:1.3;letter-spacing:-.005em}
.mini b:hover{color:var(--blue)}
.mini .m{font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:13px 14px;cursor:pointer}
.tcard:hover{border-color:#C4D0DA;background:#FCFDFE}
.tcard .h{display:flex;align-items:center;gap:12px}
.tcard .av{width:32px;height:32px;border-radius:50%;color:#fff;display:grid;place-items:center;font-family:var(--raj);font-weight:700;font-size:12px;flex:none}
.tcard b{font-family:var(--raj);font-size:15px;display:block;line-height:1.2}
.tcard small{font-size:11px;color:var(--mute)}
.tcard .bars{display:flex;gap:2px;margin-top:11px;height:5px;border-radius:4px;overflow:hidden;background:var(--page)}
.tcard .bars span{display:block}
.tcard .st2{display:flex;gap:12px;margin-top:9px;flex-wrap:wrap}
.tcard .st2 div .n{font-family:var(--raj);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;line-height:1}
.tcard .st2 div .l{font-size:10.5px;color:var(--mute);margin-top:1px}
.tcard .warn{margin-top:9px;padding-top:8px;border-top:1px solid var(--rule);font-size:11.5px;color:var(--red);font-weight:500;line-height:1.45}
.tcard .ok{margin-top:9px;padding-top:8px;border-top:1px solid var(--rule);font-size:11.5px;color:var(--mute);line-height:1.45}
.back{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule2);background:var(--card);color:var(--mute);
 font-family:var(--raj);font-weight:700;font-size:13px;padding:0 11px;height:28px;border-radius:6px;cursor:pointer}
.back:hover{background:var(--page)}
.cobar{display:flex;align-items:center;gap:12px;margin-bottom:11px;flex-wrap:wrap}
.cohead{background:var(--navy);color:#fff;border-radius:6px;padding:0 16px;min-height:54px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cohead h2{font-size:19px;color:#fff;line-height:1.15}
.cohead .meta{font-size:12px;color:var(--navyink);margin-top:2px;font-variant-numeric:tabular-nums}
.cohead .rtc{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cohead .tag{color:#fff;background:rgba(255,255,255,.1);padding:5px 11px;border-radius:20px}
.cohead .tag i{background:currentColor}
.cohead .own{font-size:12px;color:var(--navyink);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cohead .own .ini{width:19px;height:19px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;font-family:var(--ui)}
.cohead select{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:5px;padding:3px 6px;font:inherit;font-size:12px;cursor:pointer}
.cohead select option{color:var(--ink)}
.cols{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin-top:12px;align-items:start}
@media(max-width:1080px){.cols{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:0;margin-bottom:12px}
.panel>h3{padding:0 14px;height:34px;display:flex;align-items:center;background:var(--surf2);border-bottom:1px solid var(--line);margin:0;font-size:12px;letter-spacing:.02em}
.panel>*:not(h3){padding-left:14px;padding-right:14px}
.panel>*:nth-child(2){padding-top:12px}
.panel>*:last-child{padding-bottom:13px}
.panel h3{font-size:14.5px;margin-bottom:10px}
.panel h3 .sm2{font-family:var(--ui);font-size:11.5px;font-weight:400;color:var(--faint);margin-left:7px;letter-spacing:0}
.stagerow{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.stagerow button{border:1px solid var(--rule2);background:var(--card);border-radius:6px;height:30px;padding:0 9px;
 font-family:var(--raj);font-weight:600;font-size:13px;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.stagerow button i{width:7px;height:7px;border-radius:50%}
.stagerow{gap:6px}
.stagerow button:hover{border-color:var(--blue)}
.stagerow button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pl{display:flex;align-items:flex-end;gap:12px;padding:9px 0;border-top:1px solid var(--rule);flex-wrap:wrap}
.pl.first{border-top:0;padding-top:0}
.pl .pi{flex:1;min-width:110px}.pl .pi b{font-family:var(--raj);font-weight:700;font-size:15px;display:block;line-height:1.25}
.pl .pi span{font-size:11.5px;color:var(--mute)}
.pl .pn{text-align:right}.pl .pn small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.pl .pn b{font-family:var(--raj);font-weight:700;font-size:17px;color:var(--navy);font-variant-numeric:tabular-nums}
.rsn2{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--rule)}
.rsn2.first{border-top:0;padding-top:0}
.rsn2 .tk{width:17px;height:17px;border-radius:50%;background:#EAF5EE;color:var(--green);display:grid;place-items:center;flex:none;margin-top:2px}
.rsn2 .tk svg{width:10px;height:10px}
.rsn2 b{font-size:13px;font-weight:600;display:block}.rsn2 span{font-size:12px;color:var(--mute);line-height:1.45}
.lede{font-size:13px;line-height:1.55;margin:0 0 10px}.lede b{font-family:var(--raj);font-size:14.5px}
.agebar{height:22px;background:var(--page);border-radius:5px;position:relative;overflow:hidden;margin-bottom:6px}
.agebar .zone{position:absolute;top:0;bottom:0;background:#E7F2EA}
.agebar .mk{position:absolute;top:0;bottom:0;width:3px;background:var(--blue)}
.agescale{display:flex;justify-content:space-between;font-size:11px;color:var(--faint)}
.mix{display:flex;height:22px;border-radius:5px;overflow:hidden}
.mix span{display:grid;place-items:center;font-family:var(--raj);font-weight:700;font-size:11.5px;color:#fff}
.mixkey{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.mixkey i{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);font-style:normal}
.mixkey i b{width:9px;height:9px;border-radius:2px}
.eq{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink2)}
.eq.first{border-top:0;padding-top:0}.eq b{font-family:var(--raj);font-size:14px;color:var(--ink);text-align:right}
.src{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--rule);font-size:12px;color:var(--ink2);line-height:1.45}
.src.first{border-top:0;padding-top:0}
.src i{width:5px;height:5px;border-radius:50%;background:var(--rule2);flex:none;margin-top:6px}
.addnote{background:var(--bluetint);border-radius:7px;padding:10px 11px;margin-bottom:10px}
.addnote .kinds{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.kind{border:1px solid var(--rule2);background:var(--card);border-radius:6px;height:29px;padding:0 10px;
 font-family:var(--raj);font-weight:600;font-size:13px;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.kind:hover{border-color:var(--blue)}.kind.on{background:var(--blue);border-color:var(--blue);color:#fff}
.addnote textarea{width:100%;min-height:58px;resize:vertical;border:1px solid var(--rule2);border-radius:6px;padding:8px 10px;
 font-family:var(--ui);font-size:13px;line-height:1.5;outline:none;color:var(--ink);background:var(--card)}
.addnote textarea:focus{border-color:var(--blue)}
.addnote .brow{display:flex;gap:8px;align-items:center;margin-top:7px;flex-wrap:wrap}
.addnote .hint{font-size:11.5px;color:var(--mute)}
.notefilt{display:flex;gap:7px;margin-bottom:4px;flex-wrap:wrap}
.notefilt button{border:0;background:transparent;color:var(--mute);font:inherit;font-size:12px;font-weight:500;
 padding:4px 8px;border-radius:5px;cursor:pointer}
.notefilt button:hover{background:var(--page)}
.notefilt button.on{background:var(--page);color:var(--ink);font-weight:600}
.note{display:grid;grid-template-columns:18px 1fr;gap:9px;padding:10px 0;border-top:1px solid var(--rule)}
.note.first{border-top:0}
.note .dot{width:8px;height:8px;border-radius:50%;margin:6px 0 0 5px}
.note .nh{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.note .nk{font-family:var(--raj);font-weight:700;font-size:13px}
.note .nw{font-size:11.5px;color:var(--mute)}
.note .badge{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 5px;border-radius:4px}
.note .badge.sales{background:#EAF2F8;color:var(--blue)}
.note .badge.service{background:#EFF4EE;color:var(--green)}
.note .nt{font-size:12.5px;color:var(--ink2);line-height:1.55;margin-top:3px}
.note.fresh{background:#F4FBF6;border-radius:6px;padding:10px 9px;margin:4px 0}
.ov{position:fixed;inset:0;z-index:60;display:none}.ov.on{display:block}
.ov .bg{position:absolute;inset:0;background:rgba(16,28,38,.42)}
.ov .box{position:relative;max-width:720px;margin:56px auto 0;background:var(--card);border-radius:8px;box-shadow:var(--pop);overflow:hidden}
.ov .oh{display:flex;align-items:center;gap:13px;padding:18px 20px;border-bottom:1px solid var(--rule)}
.ov .oh svg{width:19px;height:19px;color:var(--faint);flex:none}
.ov .oh input{flex:1;border:0;outline:none;font-family:var(--raj);font-weight:600;font-size:20px;color:var(--ink)}
.ov .oh .esc{border:1px solid var(--rule2);background:var(--page);color:var(--mute);font-size:12.5px;padding:7px 12px;border-radius:7px;cursor:pointer}
.ov .res{max-height:60vh;overflow-y:auto}
.ov .hint{padding:36px 24px;text-align:center;color:var(--mute);font-size:15.5px;line-height:1.6}
.ov .r{display:flex;gap:16px;align-items:center;padding:15px 20px;border-top:1px solid var(--rule)}
.ov .r:hover{background:#FAFCFD}
.ov .rn{flex:1;min-width:0}.ov .rn b{font-family:var(--raj);font-weight:700;font-size:17px;display:block}
.ov .rn span{font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.ov .ru{text-align:right}.ov .ru b{font-family:var(--raj);font-weight:700;font-size:19px;color:var(--blue);display:block;line-height:1}
.ov .ru span{font-size:12px;color:var(--faint)}
.ov .sfoot{padding:12px 20px;border-top:1px solid var(--rule);font-size:13px;color:var(--faint);background:#FAFBFC}
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,190%);background:var(--navy);color:#fff;padding:15px 22px;border-radius:11px;
 box-shadow:0 20px 44px -14px rgba(16,28,38,.55);display:flex;align-items:center;gap:13px;font-size:15.5px;z-index:80;transition:transform .3s cubic-bezier(.2,.9,.3,1.15)}
.toast.show{transform:translate(-50%,0)}
.toast .tk{width:27px;height:27px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
.toast .tk svg{width:15px;height:15px;color:#fff}
.toast b{font-family:var(--raj)}.toast small{display:block;color:var(--navyink);font-size:13px}
@media(max-width:820px){.app{grid-template-columns:1fr}.side{display:none}.wrap{padding:18px}}

/* ---- layout grids ---- */
.g2{display:grid;grid-template-columns:1.55fr 1fr;gap:12px;align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.gc2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:start}
@media(max-width:1240px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1080px){.g2,.gc2{grid-template-columns:1fr}.g3{grid-template-columns:1fr}}
.pane{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pane .ph{padding:0 14px;height:34px;background:var(--surf2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.pane .ph h3{font-size:12px;letter-spacing:.02em}
.pane .ph svg{width:13px;height:13px;flex:none;color:var(--violet)}
.pane .ph .n{white-space:nowrap}
.pane .ph .n{margin-left:auto;font-family:var(--raj);font-weight:700;font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.pane .pb{padding:3px 14px 11px}
.summary{padding:14px 16px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.62;color:var(--ink2)}
.summary b{color:var(--ink);font-weight:600}
.pane .pnote{padding:8px 14px 9px;font-size:11.5px;color:var(--mute);line-height:1.5;border-bottom:1px solid var(--rule);background:#FBFCFD}

/* ---- AI summary ---- */
.ai{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:12px}
.ai .ah2{display:flex;align-items:center;gap:8px;padding:0 16px;height:34px;border-bottom:1px solid var(--rule);background:#FAFBFD}
.ai .ah2 svg{width:13px;height:13px;color:var(--violet);flex:none}
.ai .ah2 .k{font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--violet)}
.ai .ah2 .src2{margin-left:auto;font-size:11px;color:var(--faint)}
.ai .ab{padding:13px 16px 14px}
.ai h4{font-size:15.5px;line-height:1.35;margin-bottom:8px;max-width:80ch}
.ai p{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--ink2);max-width:96ch}
.ai p:last-child{margin-bottom:0}
.ai p b{color:var(--ink);font-weight:600}
.ai.sm2x .ab{padding:11px 14px 12px}.ai.sm2x h4{font-size:14px;margin-bottom:6px}.ai.sm2x p{font-size:12.5px}
.nextup{margin-top:10px;padding-top:9px;border-top:1px solid var(--rule);display:flex;gap:8px;align-items:flex-start}
.nextup svg{width:13px;height:13px;color:var(--blue);flex:none;margin-top:2px}
.nextup .l2{font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:1px}
.nextup p{font-size:13px;color:var(--ink);margin:0;max-width:90ch}


.sbar{display:flex;gap:2px;height:16px;border-radius:4px;overflow:hidden;background:var(--page)}
.sbar span{display:grid;place-items:center;font-family:var(--raj);font-weight:700;font-size:10px;color:#fff;min-width:0}

.mic{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule2);background:var(--card);
 border-radius:6px;height:29px;padding:0 12px;font-family:var(--raj);font-weight:600;font-size:13px;
 color:var(--ink);cursor:pointer;position:relative}
.mic svg{width:14px;height:14px;flex:none}
.mic:hover{border-color:var(--blue);color:var(--blue)}
.mic.rec{background:#B93A2F;border-color:#B93A2F;color:#fff}
.mic.rec svg{color:#fff}
.mic.rec:before{content:"";position:absolute;inset:-3px;border-radius:8px;border:2px solid #B93A2F;
 opacity:.5;animation:mp 1.3s ease-out infinite}
@keyframes mp{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.14);opacity:0}}
.mic[disabled]{opacity:.45;cursor:not-allowed}
.dict{display:flex;align-items:center;gap:9px;margin-top:8px;font-size:12px;color:var(--mute);min-height:17px}
.dict .lv{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.dict .lv i{width:2.5px;background:#B93A2F;border-radius:2px;animation:lv .9s ease-in-out infinite}
.dict .lv i:nth-child(2){animation-delay:.15s}.dict .lv i:nth-child(3){animation-delay:.3s}
.dict .lv i:nth-child(4){animation-delay:.45s}
@keyframes lv{0%,100%{height:3px}50%{height:12px}}
#noteBox.live{border-color:#B93A2F;background:#FFFBFA}


/* ---------------- phone ---------------- */
a.tel{text-decoration:none}
.callbar{display:none}
@media(max-width:820px){
 .app{grid-template-columns:1fr}
 .side{display:none}
 .wrap{padding:12px 12px 92px;max-width:100%}
 .top{padding:0 13px;height:50px;gap:10px}
 .top h1{font-size:16px}.top .sub{display:none}
 .srch{min-width:0;flex:1;max-width:180px}
 .g2,.g3,.gc2,.cols,.board,.team,.strip,.metrics,.split,.hon,.cards,.c2,.c3,.c4{grid-template-columns:1fr!important}
 .alert{grid-template-columns:1fr!important;gap:7px;padding:13px 14px}
 .alert .mx{text-align:left;display:flex;align-items:baseline;gap:7px}
 .alert .mx b{font-size:19px}
 .alert .ac{width:100%;height:36px;margin-top:2px}
 .cohead{padding:13px 14px;min-height:0;gap:9px}
 .cohead h2{font-size:19px}.cohead .rtc{margin-left:0;width:100%}
 .clockrow{flex-wrap:wrap}.clockrow .cg{width:140px}
 .donutrow{flex-wrap:wrap}
 .tbl .th{display:none}
 .tbl .tr{grid-template-columns:1fr auto!important;gap:4px 10px;padding:11px 13px;min-height:0}
 .tbl .tr .cell{font-size:12px}
 .addnote textarea{min-height:86px;font-size:16px}
 .kind,.mic{height:38px;font-size:14.5px}
 .btn{height:44px}
 .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:8px;
   padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
   border-top:1px solid var(--line);backdrop-filter:blur(8px)}
 .callbar a,.callbar button{flex:1;height:46px;border-radius:9px;border:0;display:inline-flex;align-items:center;
   justify-content:center;gap:8px;font-family:var(--raj);font-weight:700;font-size:16px;text-decoration:none;cursor:pointer}
 .callbar .c1{background:var(--green);color:#fff}
 .callbar .c2{background:var(--blue);color:#fff}
 .callbar svg{width:17px;height:17px}
}


.buys{width:100%;border-collapse:collapse}
.buys th{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
 text-align:left;padding:0 0 7px;border-bottom:1px solid var(--rule)}
.buys td{padding:7px 0;border-bottom:1px solid var(--line2);font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.buys tr:last-child td{border-bottom:0}
.buys td.m{font-weight:600;color:var(--ink)}
.buys td.r{text-align:right;color:var(--mute);font-size:11.5px}
.buys .nw{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 5px;border-radius:4px;
 background:#EAF2F8;color:var(--blue)}
.buys .us{background:var(--page);color:var(--mute)}
.buyhead{display:flex;gap:16px;flex-wrap:wrap;padding-bottom:11px;margin-bottom:3px;border-bottom:1px solid var(--rule)}
.buyhead div .n{font-family:var(--raj);font-weight:700;font-size:19px;line-height:1;font-variant-numeric:tabular-nums}
.buyhead div .l{font-size:10.5px;color:var(--mute);margin-top:3px}
.buymore{font-size:11.5px;color:var(--faint);padding-top:8px}


/* ---- deliberate colour on panel headers ---- */
.pane .ph{background:var(--surf2)}
.ph.nv{background:var(--navy);border-bottom-color:var(--navy)}
.ph.nv h3,.ph.nv .n{color:#fff}.ph.nv svg{color:#8FC7E8}
.ph.nv .n{font-family:var(--ui);font-weight:500;font-size:11px;color:#9FBACE}
.ph.bl{background:#EAF2F8;border-bottom-color:#CFE0EE}.ph.bl h3{color:var(--blue)}.ph.bl .n{color:var(--blue)}
.ph.gr{background:#EAF5EE;border-bottom-color:#CDE7D8}.ph.gr h3{color:var(--green)}.ph.gr .n{color:var(--green)}
.ph.am{background:#FDF4E6;border-bottom-color:#F0E0C4}.ph.am h3{color:var(--amber)}.ph.am .n{color:var(--amber)}
.ph.rd{background:#FBEDEC;border-bottom-color:#F2D5D2}.ph.rd h3{color:var(--red)}.ph.rd .n{color:var(--red)}
.ph.vi{background:#F2EFF7;border-bottom-color:#DFD7EC}.ph.vi h3{color:var(--violet)}.ph.vi .n{color:var(--violet)}
.srule h2{color:var(--navy)}
.srule .ln{background:linear-gradient(90deg,var(--rule2),var(--rule))}

/* ---- digest ---- */
.digest{padding:16px 20px;font-size:15.5px;line-height:1.7;color:var(--ink2);max-width:104ch}
.digest b{color:var(--ink);font-weight:600}
.dayline{display:flex;align-items:center;gap:10px;padding:9px 18px;background:var(--navy);color:#fff}
.dayline .d{font-family:var(--raj);font-weight:700;font-size:15px}
.dayline .s{margin-left:auto;font-size:11.5px;color:#9FBACE;font-variant-numeric:tabular-nums}

/* ---- activity feed ---- */
.feedwrap{max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
@media(max-width:1080px){.feedwrap{grid-template-columns:1fr}}
.fday{grid-column:1/-1;background:#EDF1F4;padding:6px 16px;font-size:10px;font-weight:700;
 letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.fit{display:grid;grid-template-columns:3px 1fr;gap:11px;padding:12px 16px 12px 0;background:var(--card)}
.fit:hover{background:#FAFCFD}
.fit .bar{border-radius:0 2px 2px 0}
.fit .h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fit .h b{font-size:13px;font-weight:600;cursor:pointer;letter-spacing:-.005em}
.fit .h b:hover{color:var(--blue)}
.fit .h .w{font-size:11.5px;color:var(--mute)}
.fit .tm{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:4px}
.fit .tm.sales{background:#EAF2F8;color:var(--blue)}
.fit .tm.service{background:#EAF5EE;color:var(--green)}
.fit .tx{font-size:12.5px;color:var(--ink2);line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fit .mt{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:5px}
.fit .mt .c{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.fit .tg{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:4px;
 background:var(--page);color:var(--mute)}
.fit .tg.assigned{background:#EAF2F8;color:var(--blue)}
.fit .tg.followup{background:#FDF4E6;color:var(--amber)}
.fit .tg.asked{background:#FBEDEC;color:var(--red)}


/* ---- command bar ---- */
.srch{position:relative}
.srch kbd{font-family:var(--ui);font-size:10.5px;font-weight:600;color:var(--faint);background:var(--card);
 border:1px solid var(--rule2);border-radius:4px;padding:1px 5px;margin-left:auto;flex:none}
.ov .box{max-width:640px}
.ov .oh input{font-family:var(--ui);font-weight:400;font-size:16px}
.ov .grp{padding:7px 20px 5px;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 color:var(--faint);background:#FAFBFC;border-top:1px solid var(--rule)}
.ov .grp:first-child{border-top:0}
.ov .r{display:grid;grid-template-columns:9px 1fr auto;gap:12px;align-items:center;padding:10px 20px;cursor:pointer;border-top:0}
.ov .r.sel{background:var(--bluetint)}
.ov .r .dt{width:8px;height:8px;border-radius:50%}
.ov .r .rn b{font-weight:600;font-size:14px;display:block;letter-spacing:-.005em;font-family:var(--ui)}
.ov .r .rn span{font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.ov .r .rt2{text-align:right;font-size:11px;color:var(--faint);white-space:nowrap}
.ov .r .rt2 b{display:block;font-family:var(--raj);font-size:15px;color:var(--ink2)}
.ov .sfoot{padding:9px 20px;border-top:1px solid var(--rule);font-size:11.5px;color:var(--faint);background:#FAFBFC;
 display:flex;gap:14px;align-items:center}
.ov .sfoot kbd{font-size:10px;border:1px solid var(--rule2);border-radius:3px;padding:0 4px;color:var(--mute)}

/* ---- section spine ---- */
.spine{position:sticky;top:54px;z-index:5;display:flex;gap:2px;background:var(--card);border-bottom:1px solid var(--line);
 padding:0 22px;margin:-18px -22px 16px}
.spine a{padding:11px 12px;font-size:12.5px;font-weight:500;color:var(--mute);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.spine a:hover{color:var(--ink)}
.spine a.on{color:var(--navy);font-weight:600;border-bottom-color:var(--or2,var(--blue))}
.spine .ct{margin-left:5px;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}

/* ---- filter bar ---- */
.fbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:11px 14px;background:var(--card);
 border:1px solid var(--line);border-radius:6px;margin-bottom:10px}
.fgrp{display:flex;align-items:center;gap:6px}
.fgrp .fl{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-right:2px}
.fgrp button{border:1px solid var(--rule2);background:var(--card);border-radius:5px;height:26px;padding:0 9px;
 font-family:var(--ui);font-size:12px;font-weight:500;color:var(--ink2);cursor:pointer}
.fgrp button:hover{border-color:var(--blue);color:var(--blue)}
.fgrp button.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
/* The kind chips went from nine to nineteen. The second row is
   full-width so it breaks cleanly UNDER the first one, never squeezing the
   "N shown of M" readout off the end of the bar, and a hairline carries the
   break, in the same language as every other divider in the system. */
.fgrp.kindgrp2{flex:1 1 100%;min-width:0;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--rule)}
.fbar .res{margin-left:auto;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.fbar .res b{color:var(--ink);font-weight:600}

/* ---- company pager ---- */
.pager{display:flex;align-items:center;gap:5px;margin-left:auto}
.pager button{border:1px solid var(--rule2);background:var(--card);border-radius:5px;height:28px;width:28px;
 display:grid;place-items:center;cursor:pointer;color:var(--mute)}
.pager button:hover:not([disabled]){border-color:var(--blue);color:var(--blue)}
.pager button[disabled]{opacity:.35;cursor:default}
.pager svg{width:13px;height:13px}
.pager .pc2{font-size:11.5px;color:var(--faint);padding:0 6px;font-variant-numeric:tabular-nums;white-space:nowrap}

.chartpad{padding:10px 14px 12px}
.ph svg,.srule svg{flex:none}
svg.ch{display:block;width:100%;height:auto}
.donutrow svg{flex:none}
.spark{width:100%;margin-top:9px}
.spk{display:flex;align-items:flex-end;gap:9px;margin-top:10px;padding-top:9px;border-top:1px solid var(--rule)}
.spk .sv{flex:1;min-width:0}
.spk .sl{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.clockrow{display:flex;align-items:center;gap:14px}
.clockrow .cg{width:168px;flex:none}
.clockrow .ct{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.clockrow .ct b{font-family:var(--raj);font-size:14.5px;color:var(--ink)}
.donutrow{display:flex;align-items:center;gap:14px}
.donutrow .dk{flex:1;min-width:0}
.tlnote{font-size:11.5px;color:var(--mute);margin-top:6px;line-height:1.5}
.pc{position:relative;padding-left:13px}
.pc:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--acc,transparent)}
.card.acc{position:relative}
.card.acc:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc,transparent)}


/* ---- metrics band ---- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:12px}
.metrics .m{background:var(--card);padding:11px 15px 12px}
.metrics .k{font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.metrics .v{font-family:var(--raj);font-weight:700;font-size:27px;line-height:1.02;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.metrics .c{font-size:11.5px;color:var(--mute);margin-top:4px;line-height:1.35}
@media(max-width:900px){.metrics{grid-template-columns:repeat(2,1fr)}}
/* ---- prioritised action list ---- */
.alertgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:1080px){.alertgrid{grid-template-columns:1fr}}
.alert{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"chip metric" "body body" "meta action";
 gap:8px 12px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-radius:8px;
 background:var(--card);box-shadow:inset 3px 0 0 var(--sv)}
.alert .sevchip{grid-area:chip}
.alert .mx{grid-area:metric}
.alert>div:not(.mx){grid-area:body}
.alert .ac{grid-area:action;justify-self:end}
.alert:hover{border-color:#C4D0DA}
.sevchip{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.07em;
 text-transform:uppercase;color:var(--sv);white-space:nowrap;padding-top:2px}
.sevchip i{width:6px;height:6px;border-radius:50%;background:var(--sv);flex:none}
.alert .ti{font-weight:600;font-size:13.5px;letter-spacing:-.005em;cursor:pointer;line-height:1.3}
.alert .ti:hover{color:var(--blue)}
.alert .de{font-size:12.5px;color:var(--ink2);line-height:1.5;margin-top:4px}
.alert .me{grid-area:meta;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;align-self:center;margin:0}
.alert .mx{text-align:right;padding-top:1px}
.alert .mx b{display:block;font-family:var(--raj);font-weight:700;font-size:23px;line-height:1;color:var(--sv);font-variant-numeric:tabular-nums}
.alert .mx span{display:block;font-size:10.5px;color:var(--mute);margin-top:2px}
.alert .ac{border:1px solid var(--rule2);background:var(--card);border-radius:5px;height:29px;padding:0 12px;
 font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap}
.alert .ac:hover{border-color:var(--blue);color:var(--blue);background:var(--bluetint)}

/* ---- section rule ---- */
.srule{display:flex;align-items:center;gap:10px;margin:18px 0 9px}
.srule h2{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-family:var(--ui)}
.srule .ln{flex:1;height:1px;background:var(--line)}
.srule .ct{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
/* ---- toolbar ---- */
.top{border-bottom:1px solid var(--line)}
.ctxbar{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--mute);padding:10px 0 0}
.ctxbar b{color:var(--ink2);font-weight:600}
.ctxbar .dot{width:3px;height:3px;border-radius:50%;background:var(--rule2)}

button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ===================== END BASE MOCKUP SYSTEM ============================= */

/* ============================================================================
   App additions
   Rules the mockup did not need (login, routing shell, mobile tab bar, table
   sorting/pagination, team rows, company record layout). Everything here obeys
   the same metrics: 1px hairlines, 6px radius, no shadows on panels, 34px
   panel headers, 34px buttons, 38px table rows, tabular-nums on figures.
   ========================================================================== */

/* ---- boot / loading / error / empty --------------------------------------- */
#root.booting{min-height:100vh;background:var(--navy);display:grid;place-items:center}
.bootpane{text-align:center;color:#fff}
.bootmark{font-family:var(--raj);font-weight:700;font-size:30px;letter-spacing:.08em;display:block}
.bootnote{font-size:13px;color:var(--navyink);margin-top:6px;display:block}
.loadingpane{padding:40px 0;color:var(--faint);font-size:13px}
.errpane{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:26px 22px;
 display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:520px}
.errpane b{font-family:var(--raj);font-size:17px}
.errpane span{font-size:13px;color:var(--mute)}
.errpane .btn{margin-top:6px}
a.btn{text-decoration:none}
.emptyst{padding:26px 4px;color:var(--mute)}
.emptyst b{display:block;font-family:var(--raj);font-size:15.5px;color:var(--ink);margin-bottom:3px}
.emptyst span{font-size:12.5px}
.nojs{padding:20px;font-family:system-ui,sans-serif}
.fixflag{position:fixed;left:8px;bottom:8px;z-index:90;background:#5F4B93;color:#fff;
 font-family:var(--raj);font-weight:700;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
 padding:4px 9px;border-radius:5px;opacity:.85;pointer-events:none}

/* ---- login ---------------------------------------------------------------- */
.loginwrap{min-height:100vh;background:var(--navy);display:grid;place-items:center;padding:24px 16px}
.logincard{background:var(--card);border-radius:10px;width:100%;max-width:394px;padding:28px 28px 22px}
.loginbrand{display:flex;align-items:center;gap:10px;background:var(--navy);margin:-28px -28px 0;
 padding:22px 28px;border-radius:10px 10px 0 0}

.wordmark{font-family:var(--raj);font-weight:700;font-size:19px;color:#fff;letter-spacing:.02em;
 padding-left:10px;margin-left:2px;border-left:1px solid rgba(255,255,255,.28);line-height:1}
.loginlede{font-size:13px;color:var(--mute);margin:16px 0 18px}
.lf{margin-bottom:13px}
.lf label{display:block;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
 color:var(--mute);margin-bottom:5px}
.lf input{width:100%;height:42px;border:1px solid var(--rule2);border-radius:6px;padding:0 11px;
 font-family:var(--ui);font-size:16px;color:var(--ink);background:var(--card);outline:none}
.lf input:focus{border-color:var(--blue)}
.lerr{background:#FBEDEC;border:1px solid #F2D5D2;color:var(--red);border-radius:6px;padding:9px 11px;
 font-size:12.5px;margin-bottom:12px}
.loginbtn{width:100%;height:44px;margin-top:4px}
.loginbtn[disabled]{opacity:.6;cursor:default}
.loginfoot{font-size:11px;color:var(--faint);text-align:center;margin:16px 0 0}

/* ---- rail + top bar ------------------------------------------------------- */
.side .brand{display:flex;align-items:center;margin:2px 4px 18px;text-decoration:none}
/* Southport Signal lockup (ui.js brandLockup): mark + SOUTHPORT / SIGNAL in Rajdhani */
.lockup{display:inline-flex;align-items:center;gap:10px;line-height:1}
.lockup .bmark{flex:none;display:block}
.lockup .bmark svg{display:block}
.lockup .btext{display:flex;flex-direction:column}
.lockup .bname{font-family:var(--raj);font-weight:700;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.lockup .bsub{font-family:var(--raj);font-weight:600;font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:#22B8F0;margin-top:3px}
.lockup.lg{gap:13px}
.lockup.lg .bname{font-size:22px}
.lockup.lg .bsub{font-size:13.5px;margin-top:4px}
.side .who .swap{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.side .who .swap svg{width:13px;height:13px}
.side nav a{text-decoration:none}
.srch{border:1px solid var(--rule);background:var(--page);border-radius:7px;height:34px;padding:0 10px;
 display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--faint);min-width:0;max-width:330px;
 font:inherit;text-align:left}
.srch:hover{border-color:var(--rule2);background:var(--card)}
.srch .srchtxt{font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tophd{min-width:0}
.wrap{width:100%}

/* ---- mobile tab bar ------------------------------------------------------- */
.tabbar{display:none}
@media(max-width:820px){
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:48;
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);backdrop-filter:blur(8px);
  padding-bottom:env(safe-area-inset-bottom)}
 .tabbar a,.tabbar button{flex:1;min-width:0;min-height:56px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--mute);
  background:transparent;border:0;cursor:pointer;font:inherit;padding:6px 2px}
 .tabbar svg{width:19px;height:19px}
 .tabbar span{font-size:10px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .tabbar a.on{color:var(--blue)}
 body.on-company .tabbar{display:none}
}

/* ---- KPI strip (clickable figures) --------------------------------------- */
.metrics.kpi7{grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-width:1400px){.metrics.kpi7{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.metrics.kpi7{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* With the "New signals" figure the band becomes an 8-up. minmax(0,1fr)
   is what stops a long label from pushing the track wider than its share. */
.metrics.kpi8{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:1400px){.metrics.kpi8{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.metrics.kpi8{grid-template-columns:repeat(2,minmax(0,1fr))}}
.metrics a.m{text-decoration:none;color:inherit;display:block}
.metrics a.m:hover{background:#FAFCFD}
.metrics a.m:hover .v{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* ---- end-of-list line ----------------------------------------------------- */
/* ---- rep call cards ------------------------------------------------------- */
.endline{font-family:var(--raj);font-weight:700;font-size:15px;color:var(--mute);
 text-align:center;padding:16px 0 2px;margin:0}
.endline.sm{font-size:13px;padding:12px 0}

/* ---- pipeline ------------------------------------------------------------- */
.reppick{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.reppick label{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.reppick select{border:1px solid var(--rule2);background:var(--card);border-radius:6px;height:32px;
 padding:0 9px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.reppick select:hover{border-color:var(--blue)}
.pc{cursor:pointer}
.pc:hover{border-color:#C4D0DA;background:#FCFDFE}
.pcfoot{display:flex;align-items:center;gap:8px;margin-top:7px;padding-top:7px;border-top:1px solid var(--rule)}
.pcfoot .ago{font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.pcfoot .ago.late{color:var(--red);font-weight:500}

/* ---- companies table ------------------------------------------------------ */
.fbar .fsearch{display:flex;align-items:center;gap:7px;border:1px solid var(--rule2);background:var(--card);
 border-radius:6px;height:32px;padding:0 10px;flex:1;min-width:210px;max-width:340px}
.fbar .fsearch svg{width:14px;height:14px;color:var(--faint);flex:none}
.fbar .fsearch input{border:0;outline:none;background:transparent;font:inherit;font-size:13px;
 width:100%;min-width:0;color:var(--ink)}
.tbl.co7 .th,.tbl.co7 .tr{grid-template-columns:2.4fr .9fr 1.25fr .6fr .75fr .9fr .7fr}
.tbl .tr{cursor:pointer}
.tbl.busy{opacity:.55;transition:opacity .12s}
.tbl .co .stwrap{display:flex;align-items:center;gap:7px}
.dt2{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.tbl .co span{padding-left:15px}
.tbl .cell.num2{font-variant-numeric:tabular-nums;font-family:var(--raj);font-weight:600;font-size:13.5px;color:var(--ink)}
.tbl .owncell .onm{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl .unass{color:var(--faint)}
.custchip{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;
 border-radius:4px;background:#F1EEF6;color:var(--violet);white-space:nowrap}
.tbl .th .sortbtn{border:0;background:transparent;padding:0;cursor:pointer;font:inherit;font-size:9.5px;
 font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);display:inline-flex;
 align-items:center;gap:4px}
.tbl .th .sortbtn:hover{color:var(--blue)}
.tbl .th .sortbtn.on{color:var(--navy)}
.tbl .th .sortbtn .arw{font-size:11px;line-height:1}
.tbl .tr.norows{grid-template-columns:1fr!important;cursor:default}
.tbl .tr.norows .cell{color:var(--faint);padding:10px 0}
.tblpager{display:flex;align-items:center;gap:10px;justify-content:center;padding:12px 0 0}
.tblpager .btn{text-decoration:none}
.tblpager .btn[disabled]{opacity:.4;cursor:default}
.tblpager .btn svg{width:12px;height:12px}
.tblpager .pc2{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}

/* ---- feed ----------------------------------------------------------------- */
/* Sticky day headers. Two things fight this:
   1. `.pane{overflow:hidden}` (from the mockup) is a scroll container, which
      neutralises sticky, so the feed's own pane opts out and re-declares the
      corner radii the overflow was clipping.
   2. The top bar is sticky at 54px, so headers park below it, not under it. */
.feedpane{overflow:visible}
.feedpane>.ph{border-radius:6px 6px 0 0}
.feedpane>.feedmore{border-radius:0 0 6px 6px;background:var(--card)}
.feedpane .fday{position:sticky;top:54px;z-index:3}
@media(max-width:820px){.feedpane .fday{top:50px}}
.feedmore{padding:11px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px}
.feedmore .btn{text-decoration:none}
.fit .h b.nolink{cursor:default}
.fit .h b.nolink:hover{color:inherit}

/* ---- team ----------------------------------------------------------------- */
.treps{display:flex;flex-direction:column}
.treprow{display:grid;grid-template-columns:1.5fr repeat(5,.62fr) .8fr 1.15fr 1.5fr;gap:12px;
 align-items:center;padding:12px 16px;border-top:1px solid var(--rule);cursor:pointer}
.treprow:first-child{border-top:0}
.treprow:hover{background:#FAFCFD}
.trep-who{display:flex;align-items:center;gap:10px;min-width:0}
.trep-who .av{width:30px;height:30px;border-radius:50%;color:#fff;display:grid;place-items:center;
 font-family:var(--raj);font-weight:700;font-size:11.5px;flex:none}
.trep-who b{font-family:var(--raj);font-size:14.5px;display:block;line-height:1.2}
.trep-who small{font-size:11px;color:var(--mute)}
.trep-fig,.trep-last{min-width:0}
.trep-fig .n,.trep-last .n2{font-family:var(--raj);font-weight:700;font-size:17px;line-height:1;
 font-variant-numeric:tabular-nums;display:block}
.trep-last .n2{font-size:13px;color:var(--ink2)}
.trep-fig .l,.trep-last .l{font-size:10px;color:var(--mute);margin-top:3px;display:block;line-height:1.25}
.treprow .spk{margin-top:0;padding-top:0;border-top:0;gap:8px}
.treprow .spk .sl{line-height:1.2}
.sparkempty{font-size:11px;color:var(--faint)}
@media(max-width:1240px){
 .treprow{grid-template-columns:1.4fr repeat(3,.7fr) 1fr;row-gap:10px}
 .treprow .trep-fig:nth-of-type(n+4){display:none}
 .treprow .spk,.treprow .trep-say,.treprow .trep-last{grid-column:1/-1}
}

/* ---- company record ------------------------------------------------------- */
.cohead .tag{max-width:100%;white-space:normal;line-height:1.35;text-align:left}
.cohead .btn.claim{background:var(--sky);color:var(--navy);height:30px;font-size:13px}
.cohead .btn.claim:hover{background:#4FC8F4}
.cobar .back{cursor:pointer}
.cobar .back svg{width:12px;height:12px}

/* Who to call, the number is the point of the panel. */
.pl .pn{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none}
.pl a.tel.pn b{font-size:23px;color:var(--navy);line-height:1.1}
.pl a.tel.pn:hover b{color:var(--blue)}
.pl .pn small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
 color:var(--faint)}
.pl .pn.nophone b{font-size:19px;color:var(--faint)}

.mixwrap{margin:11px 0 4px}
.mixwrap .lbl{display:block;margin-bottom:5px}
.buys.units{min-width:320px}
.buys td.vin{font-family:var(--raj);font-weight:600;letter-spacing:.02em;color:var(--ink)}
.buyhead div .n.sm3{font-size:13px;padding-top:4px}
.pane .pb>table.buys{margin-top:4px}

.flagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.fchip{border:1px solid var(--rule2);background:var(--card);border-radius:6px;height:29px;padding:0 10px;
 font-family:var(--ui);font-size:12.5px;font-weight:500;color:var(--ink2);cursor:pointer}
.fchip:hover{border-color:var(--amber);color:var(--amber)}
.fchip.on{background:#FDF4E6;border-color:#F0E0C4;color:var(--amber);font-weight:600}
.addnote .brow .hint{color:var(--mute)}
#noteList .note:first-child{border-top:0}
.note.fresh{animation:freshin .5s ease-out}
@keyframes freshin{0%{background:#DFF3E6}100%{background:#F4FBF6}}
.note .badge,.note .tm{margin-right:2px}
.note .tg{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;
 border-radius:4px;background:var(--page);color:var(--mute)}
.note .tg.followup{background:#FDF4E6;color:var(--amber)}
.note .tg.asked{background:#FBEDEC;color:var(--red)}
.note .tg.assigned{background:#EAF2F8;color:var(--blue)}

.callbar .c1.off{background:var(--rule2);color:var(--mute);cursor:default}

/* ---- search overlay additions -------------------------------------------- */
.ov .r{align-items:center}
.ov .r .addbtn{border:1px solid var(--rule2);background:var(--card);border-radius:5px;height:27px;
 padding:0 9px;font:inherit;font-size:11.5px;font-weight:600;color:var(--faint);cursor:not-allowed;
 white-space:nowrap;opacity:.75}
.ov .fedrow{grid-template-columns:9px 1fr auto auto}
.ov .sfoot kbd{margin-right:4px}
.ov .hint b{color:var(--ink2)}

/* ---- phone ---------------------------------------------------------------- */
@media(max-width:820px){
 .wrap{padding:12px 12px 96px}
 body.on-company .wrap{padding-bottom:86px}
 .metrics.kpi7{grid-template-columns:repeat(2,minmax(0,1fr))}
 .metrics.kpi8{grid-template-columns:repeat(2,minmax(0,1fr))}
 .srch{max-width:none;flex:1;height:38px}
 .srch .srchtxt,.srch kbd{display:none}
 /* Ten kind chips wrap to five rows on a phone and push the list off the
    screen. Nothing is hidden, the row swipes sideways instead, which is the
    only way to keep every kind reachable AND the first signal above the fold. */
 .fgrp.kindgrp{flex:1 1 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;
   scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
 .fgrp.kindgrp::-webkit-scrollbar{display:none}
 .fgrp.kindgrp>*{flex:none}
 /* Touch targets ≥52px and 16px inputs (no iOS zoom). */
 .btn,.btn.go,.btn.alt{height:52px;font-size:16px}
 .btn.sm{height:44px;font-size:14.5px}
 .kind,.mic,.fchip{height:46px;font-size:15px;padding:0 14px}
 .filters button,.fgrp button,.stagerow button,.notefilt button{height:44px;font-size:14px;padding:0 13px}
 .fbar{gap:10px;padding:10px 11px}
 .fbar .fsearch{height:46px;max-width:none;flex:1 1 100%}
 .fbar .fsearch input{font-size:16px}
 .fgrp{flex-wrap:wrap;gap:5px}
 /* Picking a named rep is a desk affordance, those chips wrapped to three
    rows and pushed the table below the fold. Any/Unassigned/Mine remain. */
 .fgrp button.deskonly{display:none}
 /* The header row is hidden on phones, so figures would lose their meaning.
    Put the column name back in front of each one. */
 .tbl .cell[data-l]::before{content:attr(data-l);font-size:9.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);margin-right:6px}
 .addnote textarea{font-size:16px;min-height:96px}
 .lf input{height:48px;font-size:16px}
 .ov .box{margin:10px auto 0;max-width:calc(100% - 16px)}
 .ov .oh input{font-size:16px}
 .ov .res{max-height:72vh}
 .ov .r{padding:14px 16px;min-height:56px}
 .tabbar a,.tabbar button{min-height:56px}
 .treprow{grid-template-columns:1fr 1fr;row-gap:10px;padding:14px 13px}
 .treprow .trep-who{grid-column:1/-1}
 .tblpager .btn{height:46px}
 .pl a.tel.pn b{font-size:24px}
 .reppick select{height:46px;font-size:16px}
 .metrics a.m{padding:13px 14px}
 .endline{padding:18px 0 4px}
}
@media(max-width:420px){
 .pl{gap:6px}
 .pl .pn{align-items:flex-start}
}

/* ==========================================================================
   Reserved-route placeholders
   --------------------------------------------------------------------------
   A reserved route (#/data #/people #/rules #/reports #/parked
   #/welcome/:token) ships with a real panel explaining what is coming,
   not a blank page: ?fixtures=1 walks every route in the table and a route that
   renders nothing is indistinguishable from a route that broke.

   Delete this block once every route has a real view. Token-driven,
   so it reads correctly in default, dark and road.
   ======================================================================== */
.w5soon{padding:4px 2px 2px}
.w5soon .w5lead{margin:0 0 14px;font-size:14px;line-height:1.62;color:var(--ink2);max-width:70ch}
.w5soon .w5list{margin:0 0 16px;padding:0 0 0 18px;color:var(--ink2);max-width:70ch}
.w5soon .w5list li{margin:0 0 7px;line-height:1.55}
.w5soon .w5list li::marker{color:var(--accent)}
.w5soon .w5note{margin:0;padding-top:13px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--mute);line-height:1.6;max-width:70ch}
.w5soon .w5note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink2)}
.w5soon .w5note .btn{margin-top:8px}

/* Today, the call kit and the manager home */

/* ------------------------------------------------------------- shell bits */

/* index.html ships an empty <div class="toast"> so it survives re-renders. Its
   parked transform (190% of a 30px empty box) leaves it one pixel below a
   900px fold, a small navy blob that shows up on any shorter viewport and in
   every full-page capture. An empty toast was never meant to be visible. */
.toast:empty { display: none; }

.dtwrap { display: flex; align-items: center; }
.dtchip {
  font-family: var(--ui); font-size: 11.5px; font-weight: 500; color: var(--mute);
  background: var(--surf2); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; white-space: nowrap; margin-right: 12px;
  font-variant-numeric: tabular-nums;
}

/* Mobile tab badge, a small count, never a zero (app.js will not render one). */
.tabbar .tbadge {
  position: absolute; top: 5px; left: 50%; margin-left: 6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--blue); color: #fff; font-family: var(--raj); font-weight: 700;
  font-size: 12px; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.tabbar a { position: relative; }

/* ---- More sheet (phones only) ---------------------------------------------
   The rail carries six destinations, an identity and Sign out; the tab bar can
   hold four things at a 56px target. Everything that does not fit lives here,
   so nothing in the product is desktop-only. Hairline + white surface + 6px
   radius, no shadow, the sheet is a panel that happens to slide up. */
.msheet { display: none; }
.msheet[hidden] { display: none !important; }

@media (max-width: 820px) {
  .tabbar .tabmore.on { color: var(--blue); }

  .msheet { display: block; position: fixed; inset: 0; z-index: 60; }
  .msheet .mbg {
    position: absolute; inset: 0; background: rgba(0, 43, 71, .34);
    opacity: 0; transition: opacity .18s ease;
  }
  .msheet.on .mbg { opacity: 1; }

  .msheet .mbox {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--card); border-top: 1px solid var(--line);
    border-radius: 10px 10px 0 0; padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .2s ease;
  }
  .msheet.on .mbox { transform: translateY(0); }

  .msheet .mgrab {
    width: 36px; height: 4px; border-radius: 2px; background: var(--line);
    margin: 2px auto 10px;
  }

  .msheet .mnav { display: flex; flex-direction: column; gap: 2px; }
  .msheet .mnav a {
    display: flex; align-items: center; gap: 12px; min-height: 52px;
    padding: 0 10px; border-radius: 6px; text-decoration: none;
    color: var(--ink); font-size: 16px; font-weight: 500;
  }
  .msheet .mnav a svg { width: 18px; height: 18px; flex: none; color: var(--mute); }
  .msheet .mnav a.on { background: var(--bluetint); color: var(--blue); }
  .msheet .mnav a.on svg { color: var(--blue); }

  .msheet .mwho {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 0 8px; padding-top: 12px; border-top: 1px solid var(--line);
  }
  /* `.av` has no base rule in app.css, every use is scoped (.who .av, .hello
     .av, .tcard .av), so an unscoped one renders as a coloured square. */
  .msheet .mwho .av {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: grid; place-items: center; color: #fff;
    font-family: var(--raj); font-weight: 700; font-size: 11.5px;
  }
  .msheet .mwho b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
  .msheet .mwho small { display: block; font-size: 12px; color: var(--mute); margin-top: 1px; }

  .msheet .swap {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--surf2); color: var(--ink2); font: inherit; font-size: 15px;
    font-weight: 600; cursor: pointer;
  }
  .msheet .swap svg { width: 15px; height: 15px; }
  .msheet .swap:hover { border-color: var(--blue); color: var(--blue); }
}

/* -------------------------------------------------------- section headings */

.k4head { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; }
.k4head:first-child { margin-top: 4px; }
.k4head h2 {
  font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mute); white-space: nowrap;
}
.k4head .k4rule { flex: 1; height: 1px; background: var(--line); }
.k4head .k4meta { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k4head .k4see {
  font-family: var(--raj); font-weight: 700; font-size: 13px; color: var(--blue);
  text-decoration: none; white-space: nowrap;
}
.k4head .k4see:hover { text-decoration: underline; }

/* ------------------------------------------------------------- band dot */
/* `bandDot()` lives in ui.js and the shared `.band` rule later in this file
   describes it the same way (dot + word, 7px dot, no pill). This is the kit's
   scoped copy so the Today/Reasons cards render correctly on their own. */

:is(.k4card, .k4tbl) .band {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--ui); font-size: 12px; font-weight: 600; white-space: nowrap;
}
:is(.k4card, .k4tbl) .band i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ------------------------------------------------------------- the list */

.k4list { background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.k4list > * + * { border-top: 1px solid var(--line); }
.k4gone { opacity: 0; transform: translateX(10px); transition: opacity .16s ease, transform .16s ease; }

/* NAMESPACE NOTE: the company record rules later in this file also
   write into the `w4*` prefix and come AFTER these, so they win every
   single-class tie. They already claim `.w4phone`, `.w4why`, `.w4who` and
   `.w4reason` for the company record. The component kit therefore lives in its
   own `k4*` prefix and styles no `w4*` class at all. Rules are additionally
   scoped to a kit container so specificity, not source order, decides. */

/* --------------------------------------------------------- company card */
/* The Reasons / What-changed row: identity + why on the left, the four quiet
   controls on the right. ~72px, so twenty-five of them fit the page budget. */

.k4card {
  display: flex; align-items: center; gap: 16px; padding: 9px 14px;
  background: var(--card); cursor: pointer;
}
.k4card:hover { background: var(--surf2); }
.k4card .k4body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.k4card .k4top { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 20px; }

.k4card .k4name {
  font-family: var(--raj); font-weight: 700; font-size: 15.5px; line-height: 20px;
  color: var(--ink); letter-spacing: -.01em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 340px;
}
.k4card:hover .k4name { color: var(--blue); }
.k4card .k4mt {
  font-size: 12.5px; line-height: 18px; color: var(--mute); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.k4card :is(.k4stage, .k4contact) {
  font-size: 11.5px; line-height: 17px; color: var(--faint); white-space: nowrap;
}
.k4card :is(.k4stage, .k4contact)::before {
  content: "\00b7"; margin-right: 8px; color: var(--rule2);
}

/* ------------------------------------------------------------- why now */
/* One line. The reason type is a quiet chip, the headline is plain English and
   the quote is verbatim; anything that will not fit is one click away on the
   company record rather than wrapped into a third line. */

.k4card .k4reason {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 20px;
}
.k4card .k4type {
  font-family: var(--ui); font-size: 11px; line-height: 16px; font-weight: 600;
  color: var(--ink2); background: var(--surf2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 7px; white-space: nowrap; flex: none;
}
/* Both can ellipsise, but they must not do it together: the headline is the
   plain-English "why", so the quote gives way first (shrink 8:1). */
.k4card .k4hl {
  font-size: 13px; line-height: 18px; color: var(--ink2); flex: 0 1 auto; flex-shrink: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k4card .k4q {
  font-size: 12.5px; line-height: 18px; color: var(--mute); font-style: italic;
  flex: 0 1 auto; flex-shrink: 8;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* On the scanning list the actions column eats ~380px, so cap the quote rather
   than let it truncate the headline alongside it, two ellipses in one line
   reads as broken text. The full quote is one click away on the record. */
.k4card .k4q { max-width: 34%; }
.k4card .k4more {
  font-size: 12px; line-height: 18px; color: var(--blue); text-decoration: none;
  white-space: nowrap; flex: none;
}
.k4card .k4more:hover { text-decoration: underline; }

/* ------------------------------------------------------ outcome controls */
/* 34px, hairline, no fill. Four of them and a text link, NOT a
   full-width blue button, which is what made the old call cards 275px tall. */

.k4card .k4acts { display: flex; align-items: center; gap: 6px; flex: none; }
.k4card .k4b {
  height: 34px; padding: 0 12px; border: 1px solid var(--rule2); border-radius: 6px;
  background: var(--card); color: var(--ink2); font-family: var(--raj); font-weight: 600;
  font-size: 13.5px; line-height: 1; cursor: pointer; white-space: nowrap;
}
.k4card .k4b:hover { background: var(--bluetint); border-color: var(--blue); color: var(--blue); }
.k4card .k4b:active { background: #E6EFF6; }
.k4card .k4b:disabled { opacity: .5; cursor: default; }
:is(.k4card, .k4fup, .k5parkrow) .k4open {
  font-family: var(--raj); font-weight: 700; font-size: 13px; line-height: 18px;
  color: var(--blue); text-decoration: none; padding: 0 4px 0 8px; white-space: nowrap;
}
:is(.k4card, .k4fup, .k5parkrow) .k4open:hover { text-decoration: underline; }

/* ------------------------------------------------- retired call card ---- */
/* The 275px call card (`.k4today`), its four-row internals and the "promised
   follow-ups" strip under it (`.k4fups`) were the 1,715px Today page. The work
   surface replaces all three with 44px rows and one detail pane, so
   their rules are gone rather than left to rot: `todayCard`, `followupRows`
   and today-parts' two block builders are no longer rendered by any view (the
   builders stay in the module because test/workflow.review.test.js pins their
   wording). The row shapes that replaced them live in web/styles/worklists.css. */

/* ----------------------------------------------------------- ends + empties */

.k4end {
  padding: 12px 2px 4px; font-family: var(--raj); font-weight: 600; font-size: 13.5px;
  color: var(--faint); text-align: center;
}
.k4empty {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 26px 18px; text-align: center; display: grid; gap: 5px;
}
.k4empty b { font-family: var(--raj); font-size: 15.5px; color: var(--ink2); font-weight: 700; }
.k4empty span { font-size: 12.5px; color: var(--mute); }

/* ------------------------------------------------------------- filter bar */

.k4bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 9px 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; margin-bottom: 10px;
}
.k4chips { display: flex; align-items: center; gap: 6px; }
.k4clb {
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin-right: 2px;
}
.k4chip {
  height: 28px; display: inline-flex; align-items: center; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--ink2); font-family: var(--raj); font-weight: 600; font-size: 13px;
  text-decoration: none; white-space: nowrap;
}
.k4chip:hover { border-color: var(--rule2); background: var(--surf2); }
.k4chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.k4res { margin-left: auto; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.k4res b { color: var(--ink); font-weight: 600; }

.k4pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.k4pager .btn { text-decoration: none; }
.k4pg { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- brief */

.k4brief { margin-bottom: 4px; }
.k4brief .ph.vi { background: #F5F3FA; border-bottom-color: #E4DFF0; }
.k4brief .ph.vi h3 { color: var(--violet); }
.k4bb { padding: 12px 14px 12px; }
.k4bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.k4bgrp { min-width: 0; }
.k4blb {
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 6px;
}
.k4bgrp ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.k4bgrp li { font-size: 13px; color: var(--ink2); line-height: 1.45; padding-left: 13px; position: relative; }
.k4bgrp li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--rule2); }
.k4bmore { display: flex; align-items: center; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--rule); }
.k4link {
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--blue);
  font-family: var(--raj); font-weight: 700; font-size: 13px;
}
.k4link:hover { text-decoration: underline; }
.k4bmore .k4dt {
  margin-left: auto; font-size: 11.5px; color: var(--mute); background: var(--surf2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.k4narr { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.k4narr p { margin: 0 0 9px; font-size: 13.5px; color: var(--ink2); line-height: 1.6; }
.k4narr p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- tables */
/* 38px rows, aligned columns, tabular numerals. */

.k4tbl { display: block; }
.k4tr {
  display: grid; align-items: center; gap: 14px; padding: 0 14px; min-height: 38px;
  border-top: 1px solid var(--rule);
}
.k4tr:first-child { border-top: 0; }
.k4th {
  min-height: 30px; background: var(--surf2); border-top: 0; border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--mute);
}
.k4handout .k4tr { grid-template-columns: minmax(150px, 1.5fr) minmax(96px, .8fr) 106px minmax(180px, 2fr) 168px; }
.k4team .k4tr { grid-template-columns: minmax(150px, 2fr) 92px 116px 108px minmax(96px, 1fr); }

.k4tbl .k4cn { display: flex; align-items: center; gap: 9px; min-width: 0; }
.k4tbl .k4cn b { font-family: var(--raj); font-weight: 700; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k4tbl .k4cn small { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.k4handout .k4cn { display: grid; gap: 0; line-height: 1.35; }
.k4cf { font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k4cw { display: grid; line-height: 1.3; min-width: 0; }
.k4cw { font-size: 12.5px; color: var(--ink2); }
.k4cw small { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k4handout .k4tr:hover { background: var(--surf2); }

.k4sel {
  width: 100%; height: 30px; border: 1px solid var(--rule2); border-radius: 6px;
  background: var(--card); color: var(--ink2); font-family: var(--ui); font-size: 12.5px;
  padding: 0 8px; cursor: pointer;
}
.k4sel:hover { border-color: var(--blue); }

.k4n { font-family: var(--raj); font-weight: 700; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.k4n.k4zero { color: var(--faint); font-weight: 600; }      /* grey, never red */
.k4n.k4soft { font-family: var(--ui); font-weight: 400; font-size: 12.5px; color: var(--mute); }
.k4av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--raj); font-weight: 700; font-size: 10px; flex: none; }

/* ============================================================== mobile ==== */
/* Under 820px the rail becomes the bottom tab bar (app.css). Cards stack, every
   control clears 52px, and the phone number gets BIGGER, not smaller. */

@media (max-width: 820px) {
  .dtchip { margin-right: 8px; font-size: 11px; padding: 3px 9px; }

  .k4head { margin: 18px 0 8px; }
  .k4head .k4meta { display: none; }

  .k4card { display: block; padding: 11px 13px; }
  .k4card .k4body { gap: 5px; }
  .k4card .k4top { flex-wrap: wrap; gap: 4px 10px; }
  .k4card .k4name { max-width: none; white-space: normal; }
  .k4card .k4reason { flex-wrap: wrap; gap: 4px 8px; }
  .k4card :is(.k4hl, .k4q) { white-space: normal; }
  .k4card :is(.k4stage, .k4contact) { display: none; }

  .k4card .k4acts { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .k4card .k4b { flex: 1 1 calc(50% - 4px); min-height: 52px; font-size: 15px; }
  /* The whole card already opens the record on tap, so a separate "Open"
     control on a phone is a redundant 52px of thumb travel per card. */
  .k4card .k4open { display: none; }

  .k4bar { gap: 10px 14px; padding: 10px 12px; }
  .k4chips { flex-wrap: wrap; }
  .k4chip { height: 34px; font-size: 14px; padding: 0 13px; }
  .k4res { margin-left: 0; flex: 1 1 100%; }

  .k4bgrid { grid-template-columns: 1fr; gap: 14px; }

  /* Tables restack into blocks, a five-column grid on a 390px screen is a
     horizontal scrollbar, and reps never find the far column. */
  .k4th { display: none; }
  .k4handout .k4tr, .k4team .k4tr {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
    padding: 11px 13px; min-height: 0;
  }
  .k4handout .k4cn, .k4team .k4cn { grid-column: 1 / -1; }
  .k4handout .k4cw { grid-column: 1 / -1; }
  .k4handout .k4ca { grid-column: 1 / -1; margin-top: 4px; }
  .k4sel { height: 52px; font-size: 16px; }              /* 16px: no iOS zoom */
  .k4team .k4n { font-size: 13.5px; }
  .k4team .k4n::before { content: attr(data-lb); }
  .k4cf, .k4cb { justify-self: start; }
}

/* Narrow desktop: keep the outcome buttons from crushing the reason text. */
@media (min-width: 821px) and (max-width: 1180px) {
  .k4card .k4name { max-width: 220px; }
  .k4card .k4b { padding: 0 9px; font-size: 13px; }
  .k4handout .k4tr { grid-template-columns: minmax(130px, 1.4fr) 92px 100px minmax(120px, 1.4fr) 150px; }
}

/* ==========================================================================
   The rep loop: dated follow-ups, the outcome sheet, undo + parked, the
   hand-out block and the reason-feedback taps.
   --------------------------------------------------------------------------
   Everything below is token-driven. Two rules it must not break:

   1. --navy is a BACKGROUND here and never text (the ink
      usages of --navy are re-pointed for dark mode in tokens.css by name, and a
      new navy TEXT rule would render #051622 on #101C26 at 6am with no test to
      catch it). Strong text is --ink; links are --blue.
   2. Motion comes from the tokens (--dur-*, --ease) and the keyframes in
      tokens.css. Nothing invents a transition.
   ========================================================================== */

/* ------------------------------------------------- retired blocks -------- */
/* "Due today" and "New from the manager" were two sections stacked ABOVE the
   ranked list (`.k5blk`, `.k5duerow`, `.k5newrow` and their internals). The work
   surface folds both into the SAME list as pinned groups, so the rows are `listRow`
   now and their rules live in web/styles/worklists.css. The sentences did not change,
   `promiseLine` and "Flagged N days ago" still come out of today-parts.js, only
   the shape they are drawn in did.

   What stayed below: the outcome sheet, the undo bar, the dialer prompt, the
   reason-feedback taps, the footer and the parked rows. Every one of those is
   still rendered, and the sheet is now hosted by the detail pane. */

/* --------------------------------------------------------- the sheet ---- */
/* Desktop: an inline row that grows out of the card the rep tapped, NOT a
   modal, because a modal over a list is a page you have to escape from before
   you can make the next call. Mobile: the same markup as a bottom sheet. */

.k5sheet {
  display: grid; gap: 8px; padding: 12px 14px 13px;
  background: var(--surf2); border-top: 1px solid var(--line);
  animation: sig-fade-in var(--dur-2) var(--ease) both;
}
.k5sh { display: flex; align-items: center; gap: 9px; }
.k5stag {
  font-family: var(--raj); font-weight: 700; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: #fff; background: var(--blue);
  border-radius: 4px; padding: 2px 8px; white-space: nowrap;
}
.k5sco {
  font-family: var(--raj); font-weight: 700; font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k5x {
  margin-left: auto; width: 28px; height: 28px; border: 0; background: transparent;
  color: var(--mute); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.k5x:hover { background: var(--line2); color: var(--ink); }

.k5srow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.k5spre {
  font-family: var(--raj); font-weight: 700; font-size: 13.5px; color: var(--mute);
  white-space: nowrap; flex: none;
}
.k5snote {
  flex: 1 1 260px; min-width: 0; height: 38px; padding: 0 11px;
  border: 1px solid var(--rule2); border-radius: 6px; background: var(--card);
  color: var(--ink); font-family: var(--ui); font-size: 14px;
}
.k5snote:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--bluetint); }
.k5snote.live { border-color: var(--red); }
.k5snote::placeholder { color: var(--faint); }
.k5mic {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  border: 1px solid var(--rule2); border-radius: 6px; background: var(--card);
  color: var(--ink2); font-family: var(--raj); font-weight: 600; font-size: 13.5px;
  cursor: pointer; flex: none;
}
.k5mic:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.k5mic:disabled { opacity: .45; cursor: default; }
.k5mic svg { width: 15px; height: 15px; }
.k5mic.rec { border-color: var(--red); color: var(--red); }
.k5dict { font-size: 12px; color: var(--mute); min-height: 0; display: flex; align-items: center; gap: 7px; }
.k5dict:empty { display: none; }
.k5dict .lv { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.k5dict .lv i { width: 2.5px; background: var(--red); border-radius: 2px; animation: lv .9s ease-in-out infinite; }
.k5dict .lv i:nth-child(2) { animation-delay: .15s; }
.k5dict .lv i:nth-child(3) { animation-delay: .3s; }
.k5dict .lv i:nth-child(4) { animation-delay: .45s; }

.k5chips .k5clb {
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
  font-weight: 600; white-space: nowrap; flex: none;
}
.k5chip { height: 30px; font-size: 12.5px; }
.k5pick { display: inline-flex; align-items: center; gap: 6px; }
.k5pick span {
  font-size: 12.5px; color: var(--mute); white-space: nowrap;
}
.k5pick input[type="date"] {
  height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink); font-family: var(--ui); font-size: 12.5px;
}
.k5lost .k5chip { font-size: 12px; }

.k5sfoot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.k5shint { font-size: 12px; color: var(--faint); flex: 1 1 auto; min-width: 0; }
.k5sfoot .k5save { flex: none; min-width: 0; height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; }
.k5sfoot .k5save svg { width: 14px; height: 14px; }

/* ------------------------------------------------------ quiet controls --- */
/* `.k4b` was only ever styled INSIDE a card (`:is(.k4card, .k4today) .k4b`), and
   the three places that still use it, the sheet's Cancel, the footer's "Show
   10 more" and the pane banner's Done / Got it, are all outside one, so they
   were falling back to the browser's own button. Same 34px hairline control,
   declared where they can see it. The pane's own copy stays in worklists.css. */

:is(.k5sheet, .k5foot, .w6tban) .k4b {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 12px;
  border: 1px solid var(--rule2); border-radius: 6px;
  background: var(--card); color: var(--ink2);
  font-family: var(--raj); font-weight: 600; font-size: 13px; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
:is(.k5sheet, .k5foot, .w6tban) .k4b:hover { background: var(--bluetint); border-color: var(--blue); color: var(--blue); }
:is(.k5sheet, .k5foot, .w6tban) .k4b:disabled { opacity: .5; cursor: default; }
:is(.k5sheet, .k5foot, .w6tban) .k4b svg { width: 13px; height: 13px; }

/* --------------------------------------------- the brief, compact -------- */
/* The manager's page now carries a summary strip above the brief and a work surface
   below it, so the brief gives back the rhythm it had when it was the top of an
   otherwise empty page. Same panel, same three groups, same toggle. */

.k4brief { margin-bottom: 12px; }
.k4brief .k4bb { padding: 10px 13px 11px; }
.k4brief .k4bgrid { gap: 16px; }
.k4brief .k4bgrp li { font-size: 12.5px; line-height: 1.4; }
.k4brief .k4bmore { margin-top: 9px; padding-top: 9px; }

/* ----------------------------------------------------------- undo bar --- */
/* The toast IS the undo. --navy as a BACKGROUND (its other job), white ink on
   it, so dark mode needs no special case. */

.k5undo {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 190%);
  display: flex; align-items: center; gap: 13px; z-index: 82;
  background: var(--navy); color: #fff; padding: 13px 16px 13px 20px; border-radius: 11px;
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-3) cubic-bezier(.2,.9,.3,1.15);
}
.k5undo.show { transform: translate(-50%, 0); }
.k5undo .k5uk { width: 25px; height: 25px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex: none; }
.k5undo .k5uk svg { width: 14px; height: 14px; color: #fff; }
.k5undo .k5ut b { font-family: var(--raj); font-size: 15px; }
.k5undo .k5ut small { display: block; color: var(--navyink); font-size: 12.5px; }
.k5undo .k5ub {
  flex: none; height: 32px; padding: 0 14px; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-family: var(--raj); font-weight: 700; font-size: 13.5px;
}
.k5undo .k5ub:hover { background: rgba(255,255,255,.22); }
.k5undo .k5ub:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------------------ dialer return --- */
/* "How did it go with Sunny Grove?", asked once, on returning to the tab
   within half an hour of tapping the number, and never again that day. */

.k5dial {
  position: fixed; left: 12px; right: 12px; bottom: 74px; z-index: 84;
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 13px; box-shadow: var(--shadow-float);
  backdrop-filter: var(--blur-float);
  transform: translateY(180%); transition: transform var(--dur-3) var(--ease);
}
.k5dial.show { transform: translateY(0); }
.k5dial .k5dt { flex: 1 1 auto; min-width: 0; }
.k5dial .k5dt b { font-family: var(--raj); font-size: 14.5px; color: var(--ink); display: block; }
.k5dial .k5dt small { font-size: 12px; color: var(--mute); }
.k5dial .btn.go { flex: none; min-width: 0; height: 38px; padding: 0 16px; }

/* --------------------------------------------------------- card extras -- */
/* A text link beside the number on a phone, and two taps that say whether the
   reason was worth reading. Both inline: the card's height budget is fixed. */

.k5sms {
  display: inline-flex; align-items: center; gap: 5px; flex: none; text-decoration: none;
  font-family: var(--raj); font-weight: 700; font-size: 13px; color: var(--blue);
}
.k5sms svg { width: 14px; height: 14px; }
.k5fb { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.k5fb .k5fbb {
  height: 22px; padding: 0 8px; border: 1px solid transparent; border-radius: 11px;
  background: transparent; color: var(--faint); font-family: var(--ui); font-size: 11px;
  cursor: pointer; white-space: nowrap; opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.k4card:hover .k5fb .k5fbb, .k5fb.done .k5fbb { opacity: 1; }
.k5fb .k5fbb:hover { border-color: var(--line); color: var(--ink2); background: var(--card); }
.k5fb .k5fbb.on { border-color: var(--blue); color: var(--blue); background: var(--bluetint); opacity: 1; }
.k5fb.done .k5fbb:not(.on) { opacity: .35; }

/* --------------------------------------------------------- the footer --- */
/* One line: the sentence that ends the page, what is left, what is behind it,
   and where the parked companies went. */

.k5foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 0 2px; min-height: 30px;
}
.k5foot .k4end { margin: 0; padding: 0; text-align: left; flex: none; }
.k5left { font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; flex: none; }
/* The rolling count. `vertical-align:bottom` is the token default (it clips a
   digit travelling upward); on a 12.5px meta line that drops it below the
   baseline of the word beside it, so this one sits on the baseline instead. */
.k5left .numroll {
  font-family: var(--raj); font-weight: 700; font-size: 15px; color: var(--ink);
  vertical-align: baseline; line-height: 18px;
}
.k5wait { font-size: 12.5px; color: var(--faint); flex: 1 1 auto; min-width: 0; }
.k5showmore { height: 28px; padding: 0 12px; font-size: 12.5px; flex: none; }
.k5parked { flex: none; }
.k5parked a {
  font-size: 12.5px; color: var(--mute); text-decoration: none;
  border-bottom: 1px dashed var(--rule2); padding-bottom: 1px;
}
.k5parked a:hover { color: var(--blue); border-color: var(--blue); }
/* The footer after the last card is logged: the end line, the counter and
   "Show 10 more" are stripped and only the parked link is left, so it centres
   under the empty state rather than hanging off the left edge on its own. */
.k5footalone { justify-content: center; margin-top: 4px; min-height: 0; }

/* ------------------------------------------------------------- parked --- */

.k5parkrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--card); cursor: pointer; min-width: 0;
}
.k5parkrow:hover { background: var(--surf2); }
.k5parkrow .k5pl { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.k5parkrow .k5pr { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
.k5pwhy { font-size: 12.5px; color: var(--ink2); white-space: nowrap; flex: none; }
.k5pnote {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--mute); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k5pnote.k5none { color: var(--faint); font-style: normal; }
.k5pwhen { font-size: 11.5px; color: var(--faint); white-space: nowrap; flex: none; }
.k5back { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.k5back svg { width: 13px; height: 13px; }

/* =============================================================== phone === */

@media (max-width: 820px) {
  .k5parkrow { flex-wrap: wrap; gap: 4px 10px; padding: 10px 13px; }
  .k5parkrow .k5pl, .k5parkrow .k5pr { flex-wrap: wrap; gap: 4px 10px; flex: 1 1 100%; }
  .k5pnote { flex: 1 1 100%; white-space: normal; }
  .k5parkrow .k4name { flex: 1 1 auto; max-width: none; }
  .k5parkrow .k4b { min-height: 44px; height: auto; padding: 0 14px; }
  .k5foot { gap: 8px 12px; }
  /* A 30px control is a desk control; a thumb in a truck yard needs 44. */
  :is(.k5sheet, .k5foot, .w6tban) .k4b { min-height: 44px; font-size: 14px; }

  /* The bottom sheet. Same markup as the desktop inline row; the layer is the
     only difference, and floating layers may carry one soft shadow.

     IT SITS ABOVE THE TAB BAR, and `z-index` cannot do that job here. The sheet is
     a sibling of the card, so it lives inside `#wrap`, and `#wrap` carries the
     `.viewswap` cross-fade, a transform, even the identity one it settles on,
     opens a NEW STACKING CONTEXT. Every z-index inside it, 86 included, is then
     sealed under `#wrap`'s own paint order and can never rise above `.tabbar`
     (z-index 48, a child of #root). Measured on a 390x844 phone with the sheet
     open: `document.elementFromPoint` at the centre of Save returned
     `BUTTON.tabsrch`, a rep aiming at Save hit the tab bar's Search.

     So the sheet clears the bar geometrically instead, which is what its two
     siblings in this file already do (`.k5undo` bottom:70px, `.k5dial` bottom:74px)
     and which leaves the nav reachable rather than covering it. 56px is
     `.tabbar`'s min-height in app.css. */
  .k5sheet {
    position: fixed; left: 0; right: 0; z-index: 86;
    bottom: calc(56px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    background: var(--card); box-shadow: var(--shadow-float);
    padding: 14px 14px 16px;
    animation: sig-slide-up var(--dur-2) var(--ease) both;
    max-height: 68vh; overflow-y: auto;
  }
  .k5snote { height: 46px; font-size: 16px; flex: 1 1 100%; }   /* 16px: no iOS zoom */
  .k5mic { height: 46px; }
  .k5chip { height: 40px; font-size: 14px; padding: 0 13px; }
  .k5pick input[type="date"] { height: 40px; font-size: 14px; }
  .k5sfoot { flex-wrap: wrap; }
  .k5shint { flex: 1 1 100%; order: -1; }
  .k5sfoot .k4b, .k5sfoot .btn { min-height: 46px; flex: 1 1 40%; justify-content: center; }
  .k5undo { left: 10px; right: 10px; bottom: 70px; transform: translateY(200%); }
  .k5undo.show { transform: translateY(0); }
  /* The reason-feedback taps are a desk affordance. On a phone they would sit
     between the reason and the four buttons a rep is aiming at in a truck yard,
     and DESIGN is explicit that nothing impressive may cost clarity. */
  .k5fb { display: none; }
}

@keyframes sig-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .k5sheet, .k5undo, .k5dial { animation-duration: 1ms; transition-duration: 1ms; }
}

/* Company record, pipeline, companies, notes and team */

/* ------------------------------------------------------- band (shared) --- */
/* Dot + word. Never a number, the client rejected bare scores. Rendered
 * everywhere through ui.js's bandDot(). */

.band{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  white-space:nowrap;font-family:var(--ui);letter-spacing:-.004em}
.band i{width:7px;height:7px;border-radius:50%;flex:none}
.band.unlikely{color:var(--faint)}

/* ================================================== COMPANY RECORD =======
 * The old two-column scroll (a sticky header, a 400px rail of
 * six stacked panes, one timeline) measured 2,611px on the real book. What
 * replaces it: a ~64px sticky vitals header, one facts grid, Reasons and Who
 * to call side by side, then tabs. The `w4*` names are kept wherever the part
 * itself survived, the timeline entries, the expanders, the Why popover and
 * the write-path forms are unchanged components in a new frame.
 */

/* ---- vitals: everything you need before you dial, on one line ----------- */

.w4sum{position:sticky;top:54px;z-index:20;background:var(--card);border:1px solid var(--line);
  border-radius:6px}
.w6vrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 14px;min-height:64px}

/* `.cobar .back svg` (app.css) was the only rule sizing this icon, and the
   cobar is gone, an unsized inline SVG stretches to fill its flex line. */
.w6back{flex:0 0 auto;cursor:pointer;max-width:170px}
.w6back svg{width:12px;height:12px;flex:none}
.w6back span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.w6vid{flex:1 1 150px;min-width:0}
.w6vid h2{font-family:var(--raj);font-size:18px;line-height:1.15;color:var(--ink);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w4facts{font-size:11.5px;color:var(--mute);margin-top:2px;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w4alias{color:var(--faint)}
/* "Service knows them" used to be its own chip (`.dept
 * service`) on a bare 24px `.w6marks` line under this header, a whole row
 * spent on four words when it was the only mark a company had. It rides in
 * the meta line now, so it costs nothing: green (matching `.dept.service`'s
 * own colour) is enough to keep it findable without a pill around it. */
.w4svc{color:var(--green);font-weight:600}

.w6vstate{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.w4say{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);min-width:0;max-width:170px}
.w4say i{width:7px;height:7px;border-radius:50%;flex:none}
.w4say b{font-weight:600;white-space:nowrap}
#stagesel{background:var(--card);border:1px solid var(--line);color:var(--ink2);border-radius:5px;
  padding:2px 4px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;max-width:150px}
#stagesel:focus{outline:2px solid var(--blue);outline-offset:-1px}

.w4band{display:flex;align-items:center;gap:8px;position:relative}
.w4why{height:22px;padding:0 8px;border:1px solid var(--line);background:var(--surf2);
  border-radius:5px;font:inherit;font-size:11px;font-weight:600;color:var(--mute);cursor:pointer}
.w4why:hover{color:var(--blue);border-color:var(--rule2);background:var(--card)}

/* A floating layer, so the one soft ambient shadow is allowed. */
.w4pop{position:absolute;top:calc(100% + 8px);left:0;right:auto;width:340px;max-width:78vw;z-index:40;
  background:var(--card);border:1px solid var(--rule2);border-radius:6px;padding:4px 0;box-shadow:var(--shadow-float)}
.w4poph{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  padding:9px 13px 7px}
.w4basis{display:flex;gap:12px;align-items:baseline;justify-content:space-between;
  padding:7px 13px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--ink2);line-height:1.45}
.w4basis b{font-family:var(--raj);font-size:13px;color:var(--blue);font-variant-numeric:tabular-nums;flex:none}
.w4basis .w4bl{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.w4popf{padding:8px 13px 10px;border-top:1px solid var(--line2);font-size:11px;color:var(--faint);line-height:1.45}

.w4own{flex:none;position:relative;font-size:11.5px;color:var(--mute);max-width:165px}
.w4own .own{display:flex;align-items:center;gap:6px;min-width:0}
.w4own .ol{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px}
.w4own .ini{width:19px;height:19px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;
  display:grid;place-items:center;font-family:var(--ui);flex:none}
.w4own select{background:var(--card);border:1px solid var(--line);color:var(--ink2);border-radius:5px;
  padding:3px 5px;font:inherit;font-size:11.5px;cursor:pointer;max-width:118px}
.w4own .btn.claim{height:28px;font-size:12px}

/* The phone: the biggest thing on the page, and the one control a rep
   reaches for first. Every other number on the record is quieter than this. */
.w4call{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0}
.w4phone{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:6px;
  background:var(--blue);color:#fff;font-family:var(--raj);font-size:21px;font-weight:600;
  text-decoration:none;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.w4phone:hover{background:var(--bluedk)}
.w4phone svg{width:15px;height:15px;flex:none}
.w4phone.off{background:var(--surf2);color:var(--faint);border:1px solid var(--line);font-size:13px}
.w4who{font-size:11px;color:var(--mute);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.w6vacts{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.w4ol{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.w6vacts .k4acts{display:flex;align-items:center;gap:5px}
.w6vacts .k4b{height:30px;padding:0 8px;border:1px solid var(--line);background:var(--card);
  border-radius:5px;font:inherit;font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;
  white-space:nowrap}
.w6vacts .k4b:hover{border-color:var(--blue);color:var(--blue);background:var(--bluetint)}
.w6vacts .k4b:disabled{opacity:.5;cursor:default}
.w6vacts .k4b.done{background:#EFF6F1;border-color:#BFDBC8;color:var(--green)}

/* The hand-out "why" prompt floats under the owner control instead of growing
   the header by a row (the flow is unchanged, only where it appears). */
.w5assignmsg{position:absolute;top:calc(100% + 6px);right:0;z-index:45;display:flex;align-items:center;
  gap:6px;flex-wrap:wrap;width:330px;max-width:80vw;padding:9px 10px;background:var(--card);
  border:1px solid var(--rule2);border-radius:6px;box-shadow:var(--shadow-float);margin:0}
.w5assignmsg[hidden]{display:none}
.w5assignmsg input{height:30px;min-width:150px;flex:1 1 150px;border:1px solid var(--line);
  border-radius:5px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;padding:0 9px}
.w5assignmsg input:focus{outline:2px solid var(--blue);outline-offset:-1px}

/* ---- the body ----------------------------------------------------------- */

.w4rec{max-width:1440px}
.w6marks{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:9px;min-height:0}
.w6pager{margin-left:auto}

.w6two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;
  margin-bottom:10px}
.w6bandpane{margin:0}
.w6bandpane .pb{padding:9px 12px}
/* A record with nothing to say should not spend 130px saying it. */
.w6bandpane .emptyst{padding:8px 0 6px}
.w6bandpane .emptyst b{font-size:13.5px;margin-bottom:2px}
.w6bandpane .emptyst span{font-size:11.5px}

/* ---- reasons ------------------------------------------------------------ */

.w6rr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 9px;align-items:baseline;
  padding:6px 0;border-top:1px solid var(--line2)}
.w6rr:first-child{padding-top:0;border-top:0}
.w6rr .w4rlab{margin-bottom:0;white-space:nowrap}
.w6rt{font-size:12.5px;color:var(--ink);line-height:1.35;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.w6rw{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.w4rlab{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--amber)}
.w4more2{padding-top:8px;margin-top:2px;border-top:1px solid var(--line2);font-size:11.5px;color:var(--faint)}

/* ---- who to call --------------------------------------------------------- */

.w6bandpane .pl{padding:6px 0;gap:10px;align-items:center}
.w6bandpane .pl .pi b{font-size:13.5px;line-height:1.2}
.w6bandpane .pl .pi span{font-size:11px}
.w6bandpane .pl .pi2{font-size:10.5px;margin-top:1px}
.w6bandpane .pl a.tel.pn b,.w6ppl .pl a.tel.pn b{font-size:18px}
.w6bandpane .pl .pn.nophone b,.w6ppl .pl .pn.nophone b{font-size:15px}
.w6golink{border:0;background:none;padding:8px 0 0;margin-top:2px;border-top:1px solid var(--line2);
  width:100%;text-align:left;font:inherit;font-size:11.5px;font-weight:600;color:var(--blue);cursor:pointer}
.w6golink:hover{text-decoration:underline}

/* ---- tabs: sub-blocks inside a panel ------------------------------------- */

.w6sub{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:11px 13px;
  margin-bottom:10px}
.w6sub:last-child{margin-bottom:0}
.w6sub h4{font-family:var(--raj);font-size:14px;font-weight:700;color:var(--ink);margin:0 0 8px;
  display:flex;align-items:baseline;gap:8px}
.w6subn{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--faint)}
.w6eqgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.w6eqgrid .eq{min-width:0}
.w6ppl{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:4px 13px 12px}

/* ---- expanders ---------------------------------------------------------- */

.w4exp{display:block;width:100%;height:30px;margin-top:10px;border:1px solid var(--line);
  background:var(--surf2);border-radius:5px;font:inherit;font-size:12px;font-weight:600;
  color:var(--ink2);cursor:pointer;text-align:center}
.w4exp:hover{border-color:var(--rule2);color:var(--blue);background:var(--card)}
.w4expbody{margin-top:9px;border-top:1px solid var(--line2);padding-top:9px;overflow-x:auto}

/* ---- summary strips (fleet, purchases) ---------------------------------- */

.w4strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.w4strip.w6s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.w4strip>div{min-width:0}
.w4strip b{display:block;font-family:var(--raj);font-size:20px;font-weight:700;color:var(--ink);
  line-height:1.05;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w4strip b.sm3{font-size:13px;font-weight:600;padding-top:5px;color:var(--ink2)}
.w4strip span{display:block;font-size:10px;color:var(--mute);margin-top:3px}

/* ---- federal amber line -------------------------------------------------- */

.w4warn{margin-top:10px;padding:9px 11px;border:1px solid #E7D4AE;border-left:3px solid var(--amber);
  background:#FCF8F0;border-radius:5px}
.w4warn b{display:block;font-size:12.5px;color:#7A5312;line-height:1.4}
.w4warn span{display:block;font-size:11.5px;color:var(--ink2);margin-top:4px;line-height:1.45}
html[data-theme="dark"] .w4warn{background:#2C2312;border-color:#463920}
html[data-theme="dark"] .w4warn b{color:#E7C588}
html[data-theme="road"] .w4warn{background:#F8EBD3;border-color:#DCC08A}

/* ---- timeline ------------------------------------------------------------ */

.w6tlbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.w6chips{display:flex;gap:5px;flex-wrap:wrap}
.w6chip{height:26px;padding:0 11px;border:1px solid var(--line);background:var(--card);border-radius:13px;
  font:inherit;font-size:11.5px;font-weight:600;color:var(--mute);cursor:pointer;white-space:nowrap}
.w6chip:hover{border-color:var(--rule2);color:var(--ink2)}
.w6chip.on{background:var(--bluetint);border-color:var(--blue);color:var(--blue)}
.w6tlbar .w5tlsearch{flex:1 1 180px;max-width:270px;margin:0 0 0 auto}

/* One line until it is touched. The kinds, the flags and the dictation message
   unfold together on focus, so the record opens on history, not on an empty box. */
.w6comp{padding:8px 9px;margin-bottom:10px}
.w6crow{display:flex;align-items:flex-start;gap:8px}
.w6comp textarea{flex:1 1 auto;width:auto;min-width:0;height:34px;min-height:34px;resize:none;
  padding:8px 10px;font-size:13px;line-height:1.3}
.w6comp.open textarea{height:76px;min-height:76px;resize:vertical}
.w6comp .mic,.w6comp #saveNote{flex:none;height:34px}
.w6cmore{display:none;margin-top:8px}
.w6comp.open .w6cmore{display:block}
.w6cmore .kinds{margin-bottom:7px}
.w6cmore .flagrow{margin-bottom:2px}
.w6cmore .hint{display:block;margin-top:6px;font-size:11.5px;color:var(--mute)}

.w4tl{margin-top:2px}
/* The date lives in a left gutter, not on a heading row of its own: a 313-note
   record averages barely one entry per day, so a 29px heading above each entry
   was 319px of chrome saying what 60px says beside it. */
.w4dayg{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;
  padding:8px 0;border-top:1px solid var(--line2)}
.w4tl>.w4dayg:first-child{border-top:0;padding-top:0}
.w4when{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);font-variant-numeric:tabular-nums;line-height:1.35;padding-top:2px}
.w4evs{min-width:0}

.w4ev{display:grid;grid-template-columns:9px minmax(0,1fr);gap:10px;padding:0 0 9px}
.w4evs>.w4ev:last-child{padding-bottom:0}
.w4dot{width:7px;height:7px;border-radius:50%;margin-top:5px}
.w4evb{min-width:0}

.w4note .nh{display:flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1;margin-bottom:4px}
.w4note .nk{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.w4note .nw{font-size:11px;color:var(--mute)}
.w4note .nt{font-size:12.5px;color:var(--ink2);line-height:1.35;white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w4note.open .nt{-webkit-line-clamp:unset;display:block;overflow:visible}
.w4nmore{margin-top:3px;border:0;background:none;padding:0;font:inherit;font-size:11.5px;
  font-weight:600;color:var(--blue);cursor:pointer}
.w4nmore:hover{text-decoration:underline}
.w4ev.fresh{background:var(--bluetint)}

.w4line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);line-height:1.4}
.w4line .w4rlab{margin-bottom:0;flex:none}
.w4evmeta{margin-top:3px;font-size:11px;line-height:1.4;color:var(--mute)}
.w4evmeta a{color:var(--blue);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.w4evmeta a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.w4buyev .w4rlab{color:var(--green)}
.w4inspev .w4rlab{color:var(--teal)}

#w4tlmore{margin-top:12px}

/* ================================================== PIPELINE ============= */
/* The board is viewport-bound and each column scrolls on its
 * own, so "Gone quiet" running 1,792 cards deep (real data) no longer sets the
 * PAGE height. Nothing here touches `.board`/`.col` themselves (the base
 * system), every rule is scoped to `.w4board`/`.w4col`, the page's own classes. */

/* A `.board` bare column is a CSS Grid `1fr` track (the base
 * system), so all four columns always split the width evenly no matter how
 * many cards any one of them holds, an empty "Talking pricing" column got the
 * same quarter of the page as "Gone quiet" with 1,792 cards in it. `.w4board`
 * switches the display model to flex, which per-column FLEX-BASIS can answer
 * for; app.css's own grid declaration is simply not the one that wins once
 * `display` itself is overridden here. */
.w4board{ display: flex; gap: 10px; height: calc(100vh - 230px); min-height: 480px; align-items: stretch; }
.w4board .w4col{
  flex: 1 1 0;
  min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
/* An empty column collapses to a narrow "Nothing here" instead of claiming the
 * same quarter-width as a column with real cards in it. */
.w4board .w4col.w4colempty{ flex: 0 0 160px; }

.colh{ position: relative; }
/* "See all N" in the column HEADER, beside the count, reachable without
 * scrolling past however deep the column runs (1,792 cards on "Gone quiet"
 * in real data). The bottom `.colmore` link (below) stays for anyone already
 * scrolled there; this is a second door, not a replacement. */
.colh .w4seeall{
  margin-left: 8px; font-size: 10.5px; font-weight: 600;
  color: var(--blue); text-decoration: none; white-space: nowrap;
}
.colh .w4seeall:hover{ text-decoration: underline; }

/* Two-line cards: name, then a single second line carrying
 * town · trucks · age · days-since-contact, with the band as a plain dot (the
 * word would not fit beside everything else, and the column already sorts by
 * opportunity, so the dot is confirmation, not new information). */
.w4pc{ padding:9px 11px 9px 13px; margin-bottom:4px; cursor:pointer; }
.w4pcline2{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:3px;
}
/* Town/fleet and days-since-contact used to share ONE
 * nowrap+ellipsis span, so a long fleet line cut the days count off the end
 * first, the one figure a rep scans the column for. They are now siblings:
 * `.w4pcmeta` is the elastic, ellipsising one; `.w4pcago` never shrinks and
 * never wraps, so the day count is always whole. */
.w4pcmeta{
  flex:1 1 auto; min-width:0; font-size:11px; color:var(--faint);
  font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.w4pcago{
  flex:0 0 auto; font-size:11px; color:var(--faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.w4pcago::before{ content:"\00b7"; margin-right:4px; }
.w4pcband{ flex:none; width:8px; height:8px; margin-left:8px; }
.w4board .colmore a{font-size:11.5px;color:var(--blue);text-decoration:none;font-weight:600}
.w4board .colmore a:hover{text-decoration:underline}

/* The strip's "scroll to and highlight" click target (pipeline.js): `.pulse-
 * once` (tokens.css) rings in `currentColor`, and a column's own ink colour is
 * a legible ring without inventing a second one just for this. */
.w4col.pulse-once{ position: relative; z-index: 1; }

@media (max-width: 820px){
  /* Mobile: columns stack, each capped near half the screen
   * with its own scroll, instead of one viewport-tall board. Flex, not grid
   * columns, now that `.w4board` is a flex container above 820px too, this
   * just changes its axis and lets each column size to its own content. */
  .w4board{ flex-direction: column; height: auto; min-height: 0; }
  .w4board .w4col{ flex: 1 1 auto; height: auto; max-height: 50vh; margin-bottom: 10px; }
  .w4board .w4col.w4colempty{ flex: 1 1 auto; }
  .w4board .w4col:last-child{ margin-bottom: 0; }
}

/* ================================================== ALL ACCOUNTS ======== */
/* The sortable 8-column table is gone (there is nothing to
 * click a header on any more: the list is always "Worth calling", ranked
 * server-side, see server/routes/companies.js). The page is now a `.w6list`
 * of `.w6row`s (components.js, styled entirely by worklists.css) plus this
 * page's own one-row filter bar. */

/* One row of dropdown chips + search, desktop only; `.fbar`'s
 * own wrap (the base system) is what lets this same markup stack cleanly under
 * 820px instead of overflowing. `#cres`'s `margin-left:auto` (the app additions,
 * `.fbar .res`) still pushes the readout to the end of the row. */
@media (min-width: 821px){
  .w4cofilters{ flex-wrap: nowrap; }
  .w4cofilters .fsearch{ min-width: 170px; }
}

/* `.cofchip`, a `<select>` styled as a labelled dropdown chip. Shared with
 * Notes' kind/rep selects below (the same look, the same "one row" job), so
 * it is defined once, here, at its first use. */
.cofchip{
  display:flex; flex-direction:column; gap:2px; flex:none;
}
.cofchip .fl{ font-size:9px; }
.cofchip select{
  height:32px; min-width:96px; max-width:150px;
  border:1px solid var(--rule2); border-radius:6px;
  background:var(--card); color:var(--ink);
  font:inherit; font-size:12.5px; padding:0 8px; cursor:pointer;
}
.cofchip select:hover{ border-color:var(--blue); }
.cofchip select:focus-visible{ outline:2px solid var(--blue); outline-offset:-1px; }

/* The territory toggle, a plain two-state pill, not a `<select>` (there is
 * nothing to pick, only Florida-or-everywhere to flip). */
.cofterr{
  flex:none; align-self:flex-end;
  height:32px; padding:0 12px;
  border:1px solid var(--rule2); border-radius:999px;
  background:var(--card); color:var(--ink2);
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.cofterr:hover{ border-color:var(--blue); color:var(--blue); }
.cofterr[aria-pressed="true"]{ background:var(--bluetint); border-color:var(--blue); color:var(--blue); }

/* Active filters, as removable chips, on their own row BELOW `.fbar`
 * (see companies.js's own comment on `activeChips`): components.js's `.w6tag` is the
 * shared pill, `.w6tagrm` only adds the pointer + hover a REMOVE affordance
 * needs that a read-only tag does not. */
.w6activef{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin: 10px 0 2px; }
.w6tag.w6tagrm{
  cursor:pointer; border:1px solid var(--rule2); background:var(--card);
  font-family:var(--ui);
}
.w6tag.w6tagrm:hover{ border-color:var(--danger); color:var(--danger); }
.w6clearall{
  border:0; background:none; padding:0; margin-left:2px;
  font-size:11.5px; font-weight:600; color:var(--mute); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.w6clearall:hover{ color:var(--ink2); }

/* The list itself sits right under the filters/chips, same rhythm as every
 * other section on the page. */
#colist{ margin-top: 10px; }
#colist.busy{ opacity:.55; transition:opacity .12s; }

@media (max-width: 820px){
  .cofchip select, .cofterr{ height:44px; font-size:14px; }
}

/* ================================================== NOTES =============== */
/* One dense list. `.feedwrap` (app.css) is a two-column card
 * grid built for the old ~140px cards; this page's entries are one line, so
 * it is single-column here (the ONLY page that uses `.feedwrap`/`.fday`, so
 * this is a safe, page-scoped override rather than a Part-1 edit). */
.feedwrap.w6entries{ display:block; background:none; }
/* Real notes cluster (a busy day is several notes); the fixture book spreads
 * 25 notes across 16 distinct days, which makes the day header, not the
 * entries, the thing worth shrinking to hold the 1,600px budget up
 * against that spread. Compact on purpose: a thin label, not a 34px bar. */
/* `.fday`'s own background (the base system, `#EDF1F4`) is a hardcoded hex with
 * no dark/road variant, invisible on the old two-column cards, a bright white
 * bar across a dense single-column list in dark mode. `--surf2` is the same
 * "quiet tint" token every other in-list header already uses (components.js's own
 * `.w6ghead`, this page's `.ph`), and it is themed correctly in all three modes. */
.feedwrap.w6entries .fday{ margin-bottom: 1px; padding: 2px 14px; font-size: 9px; background: var(--surf2); }

/* The filter row (companies.js's `.cofchip` reused here, see ALL ACCOUNTS
 * above): label beside the select instead of above it, and a touch less
 * padding, is what keeps 25 one-line entries plus 16 day headers (the
 * fixture's own spread; a busy real book is denser) inside the 1,600px
 * budget with room to spare. */
.w6nfbar{ padding: 8px 14px; }
.w6nfbar .cofchip{ flex-direction: row; align-items: center; gap: 6px; }
.w6nfbar .cofchip select{ height: 28px; }

.w6entry{
  display:block; padding:0; margin-bottom:1px;
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  cursor:pointer;
}
.w6entry:hover{ border-color:var(--rule2); }
.w6entry:focus-visible{ outline:2px solid var(--accent-2); outline-offset:-2px; }

.w6erow{
  display:flex; align-items:center; gap:9px;
  min-height:34px; padding:0 12px;
}
/* A fixed floor, not just a cap, a short company name in a
 * narrow window used to shrink to nothing beside a long preview (`min-width:
 * 0`), which is backwards: the company is the thing this list is organised
 * by, so the preview is the elastic one. */
.w6ecomp{
  flex:0 1 auto; min-width:180px; max-width:260px;
  font-family:var(--raj); font-weight:700; font-size:14px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.w6ecomp.w6enolink{ color:var(--faint); font-weight:600; }
.w6ekind{
  flex:none; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink2); background:var(--surf2); border:1px solid var(--line); border-radius:4px;
  padding:1px 6px; white-space:nowrap;
}
.w6eauthor{ flex:none; font-size:12px; color:var(--mute); white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
/* `ui.js`'s teamChip() carries no styling of its own outside
 * `.fit`/`.note` (its only two callers before this row), so inside `.w6erow`
 * it rendered as bare, row-sized text, not a chip, and not visually distinct
 * from the author's name beside it. It is smaller and lighter here on
 * purpose: the author is the person; the team is a tag on them. */
.w6erow .tm{
  flex:none; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:1px 6px; border-radius:4px; color:var(--faint); background:var(--surf2);
}
.w6erow .tm.sales{ color:var(--blue); background:color-mix(in srgb, var(--blue) 12%, var(--surf2)); }
.w6erow .tm.service{ color:var(--green); background:color-mix(in srgb, var(--green) 12%, var(--surf2)); }
.w6eprev{
  flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--ink2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.w6etime{ flex:none; font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }

.w6emore{ display:none; padding: 0 12px 12px 12px; border-top:1px solid var(--line2); margin-top:8px; padding-top:9px; }
.w6entry.open .w6emore{ display:block; }
.w6entry.open{ cursor:default; }
.w6efull{ margin:0 0 8px; font-size:13px; line-height:1.5; color:var(--ink2); white-space:pre-line; }
.w6emeta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.w6efdate{ font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.w6ectx{ font-size:11px; color:var(--mute); font-variant-numeric:tabular-nums; }
.w6eopen{ font-size:12.5px; font-weight:600; color:var(--blue); text-decoration:none; }
.w6eopen:hover{ text-decoration:underline; }

.w4fit .c{font-variant-numeric:tabular-nums}

/* app.css's `.feedmore` is 11px top/bottom padding (the app additions), fine for the
 * old page, a bit generous stacked on top of a now much shorter list. */
.feedpane .feedmore{ padding: 6px 16px; }

@media (max-width: 820px){
  .w6erow{ flex-wrap:wrap; min-height:0; padding:9px 12px; row-gap:3px; }
  .w6eprev{ flex-basis:100%; order:5; white-space:normal; }
  .w6etime{ margin-left:auto; }
}

/* ================================================== TEAM =============== */

.treprow.w4treprow{grid-template-columns:1.6fr repeat(4,.62fr) .85fr 1.7fr}
.w4treprow .trep-fig.unknown .n{color:var(--faint);font-weight:600}
.w4treprow .trep-fig .n,.w4treprow .trep-last .n2{color:var(--ink)}
.w4treprow .spk{flex-direction:column;align-items:flex-start;gap:4px;border-top:0;padding-top:0;margin-top:0}
.w4treprow .spk .sl{font-size:10px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.w4treprow .spk .sv{width:100%}
.w4treprow .spk .sc{font-size:11px;color:var(--mute)}
.w4treprow .sparkempty{font-size:11px;color:var(--faint)}

/* ================================================== RESPONSIVE ========== */

@media(max-width:1360px){
  /* The outcome bar takes the second line of the header rather than squeezing
     four labels into 40px each. Still one set, still above the fold. */
  .w6vacts{flex:1 1 100%;flex-direction:row;align-items:center;gap:8px;
    border-top:1px solid var(--line2);padding-top:7px}
  .w6vacts .k4b{flex:1 1 auto}
}

@media(max-width:1080px){
  .w6two{grid-template-columns:minmax(0,1fr)}
  .w6eqgrid{grid-template-columns:minmax(0,1fr)}
  .treprow.w4treprow{grid-template-columns:1.5fr repeat(4,.62fr) .9fr;row-gap:10px}
  .w4treprow .spk{grid-column:1 / -1;flex-direction:row;align-items:center;gap:10px;
    border-top:1px solid var(--line2);padding-top:9px}
  .w4treprow .spk .sv{width:auto;flex:1;min-width:0}
}

@media(max-width:820px){
  /* Phone first: the app bar already carries the company
     name, so the number a rep is aiming at is the first thing under it. */
  .w4sum{position:static}
  .w6vrow{padding:10px 12px;gap:9px}
  .w6back{order:1;flex:1 1 100%;max-width:none}
  .w4call{order:2;flex:1 1 100%;align-items:stretch}
  .w4phone{height:48px;font-size:24px;width:100%;justify-content:center}
  .w4who{max-width:none;text-align:center}
  .w6vid{order:3;flex:1 1 100%}
  .w6vid h2{font-size:17px;white-space:normal}
  .w6vstate{order:4;flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;
    gap:10px;flex-wrap:wrap}
  .w4say{max-width:none;flex:1 1 auto}
  .w4pop{left:auto;right:0;width:min(340px,86vw)}
  .w4own{order:5;flex:1 1 100%;max-width:none;border-top:1px solid var(--line2);padding-top:9px}
  .w4own .ol{max-width:none}
  .w5assignmsg{right:auto;left:0;width:min(330px,88vw)}

  /* The outcome bar docks above the record's own call bar. z-index cannot do
     this job: #wrap carries the .viewswap transform, which seals every z-index
     inside it (the transform trap), so it clears the bar
     geometrically. 64px = the call bar's height (9 + 46 + 9). The mobile tab
     bar is display:none on the record (`body.on-company`), so the call bar,
     not the tab bar, is what has to be cleared. */
  .w6vacts{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));
    z-index:47;flex:none;flex-direction:row;align-items:center;gap:6px;
    padding:8px 10px;background:var(--card);border-top:1px solid var(--line);
    backdrop-filter:blur(8px)}
  .w6vacts .w4ol{display:none}
  .w6vacts .k4acts{flex:1;display:flex;gap:6px}
  .w6vacts .k4b{flex:1 1 0;min-width:0;min-height:44px;height:auto;padding:0 6px;font-size:12.5px;
    overflow:hidden;text-overflow:ellipsis}

  .w6rec{padding-bottom:66px}
  .w6two{grid-template-columns:minmax(0,1fr)}
  .w6tlbar .w5tlsearch{flex:1 1 100%;max-width:none;margin-left:0}
  .w6crow{flex-wrap:wrap}
  .w6comp textarea{flex:1 1 100%;height:48px;min-height:48px}
  .w6comp.open textarea{height:88px;min-height:88px}
  .w6comp .mic,.w6comp #saveNote{flex:1 1 auto;min-height:44px;height:auto;justify-content:center}
  .w4dayg{grid-template-columns:52px minmax(0,1fr);gap:8px}
  .w4when{font-size:9.5px;letter-spacing:.03em}
  .w4strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .w6comp textarea{font-size:16px}          /* 16px: no iOS zoom on focus */
  .tbl.w4co8 .th{display:none}
}

@media(max-width:520px){
  .w6vid h2{font-size:16px}
  .w6vacts .k4b{font-size:11.5px;padding:0 4px}
}


/* ============================================== write path, provenance ===
 * Write path (create/edit contacts, edit company fields, the assignment
 * note) and "a record that tells the truth" (aliases, note edit/delete,
 * notes search, provenance). Text colour always via --ink/--ink2/
 * --mute/--faint, never --navy (that name is reserved for structural
 * backgrounds and is re-pointed for dark mode in tokens.css, a NEW rule
 * that put text in --navy would go invisible there with nothing to catch it).
 * Floating layers (the add-company modal, the notes-search dropdown) use the
 * `.floating` utility from tokens.css for their shadow. ================== */

/* ---- shared: a small two-column edit form (contacts, company details) --- */
.w5cgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:8px}
.w5cgrid label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.w5cgrid input[type="text"],.w5cgrid input[type="tel"],.w5cgrid input[type="email"]{
  height:32px;border:1px solid var(--line);border-radius:5px;background:var(--card);
  color:var(--ink);font:inherit;font-size:13px;padding:0 9px;font-weight:400;
  text-transform:none;letter-spacing:normal}
.w5cgrid input:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.w5cprimary{flex-direction:row !important;align-items:center;gap:6px !important;grid-column:1 / -1}
.w5cprimary input{width:auto;height:auto}
.w5cactions{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.w5cactions .hint{font-size:11.5px;color:var(--danger)}

/* ---- contacts: edit form + sms + secondary line ------------------------- */
.pl.w5c{position:relative;flex-wrap:wrap}
.w5cform{grid-column:1 / -1;width:100%;border:1px solid var(--line);border-radius:6px;
  background:var(--surf2);padding:10px 11px;margin:2px 0 10px}
.w5cedit{border:0;background:none;padding:4px;margin-left:4px;color:var(--faint);
  cursor:pointer;border-radius:4px;display:inline-flex;align-self:center}
.w5cedit svg{width:14px;height:14px}
.w5cedit:hover{color:var(--blue);background:var(--surf2)}
.pnwrap{display:inline-flex;align-items:center;gap:4px}
.smsbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:5px;color:var(--mute);flex:none}
.smsbtn svg{width:14px;height:14px}
.smsbtn:hover{background:var(--surf2);color:var(--blue)}
.pi2{display:block;width:100%;font-size:11px;color:var(--faint);margin-top:2px;
  font-variant-numeric:tabular-nums}
.w5addcontact{margin-top:12px;width:100%}

/* ---- company details panel ----------------------------------------------- */
#w4detailsedit .w5cgrid{margin-top:2px}

/* ---- aliases -------------------------------------------------------------- */
.w4alias{font-size:11.5px;color:var(--mute);margin-top:3px;line-height:1.4}

/* ---- parked, a quiet amber strip across the top of the sticky header,
 * same family as .w4warn's "worth checking" tone but full-width and un-missable
 * since the whole point is "do not hand this out while it is like this". */
.w5parked{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 16px;background:#FCF8F0;border-bottom:1px solid #E7D4AE;
  font-size:12.5px;color:var(--ink2);border-radius:6px 6px 0 0}
html[data-theme="dark"] .w5parked{background:#2C2312;border-bottom-color:#463920}
html[data-theme="road"] .w5parked{background:#F8EBD3;border-bottom-color:#DCC08A}
.w5parked .btn{flex:none}

/* ---- assignment-note "why" prompt ---------------------------------------- */
.w5assignmsg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;width:100%}
.w5assignmsg[hidden]{display:none}
.w5assignmsg input{height:30px;min-width:200px;flex:1 1 200px;border:1px solid var(--line);
  border-radius:5px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;padding:0 9px}
.w5assignmsg input:focus{outline:2px solid var(--blue);outline-offset:-1px}

/* ---- provenance ------------------------------------------------------------ */
.w5provdetail{font-size:12px !important;font-weight:600}

/* ---- undo, note edit / delete + tombstone --------------------------------- */
.nh{position:relative}
.w5nundo{border:1px solid var(--line);background:var(--surf2);color:var(--ink2);
  font:inherit;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:10px;
  cursor:pointer;margin-left:4px}
.w5nundo:hover{border-color:var(--blue);color:var(--blue)}
.w5nedit,.w5ndel{border:0;background:none;padding:3px;margin-left:2px;color:var(--faint);
  cursor:pointer;border-radius:4px;display:inline-flex}
.w5nedit svg,.w5ndel svg{width:13px;height:13px}
.w5nedit:hover{color:var(--blue);background:var(--surf2)}
.w5ndel:hover{color:var(--danger);background:var(--surf2)}
.w5neditform{margin-top:7px;border:1px solid var(--line);border-radius:6px;background:var(--surf2);padding:9px}
.w5neditform textarea{width:100%;min-height:60px;border:1px solid var(--line);border-radius:5px;
  background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;padding:7px 9px;resize:vertical}
.w5neditform textarea:focus{outline:2px solid var(--blue);outline-offset:-1px}
.w5tombtext{font-style:italic;color:var(--faint) !important;-webkit-line-clamp:unset !important;
  display:block !important;overflow:visible !important}
.w5tombstone .w4dot{background:var(--faint) !important}

/* ---- notes search on the record ------------------------------------------- */
.w5tlsearch{position:relative;margin-bottom:12px}
.w5tlsearch .fsearch{display:flex;align-items:center;gap:7px;border:1px solid var(--rule2);
  background:var(--card);border-radius:6px;height:34px;padding:0 11px}
.w5tlsearch .fsearch svg{width:14px;height:14px;color:var(--faint);flex:none}
.w5tlsearch .fsearch input{border:0;outline:none;background:transparent;font:inherit;
  font-size:13px;color:var(--ink);width:100%}
.w5tlsearchres{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;max-height:320px;
  overflow-y:auto;background:var(--card);border:1px solid var(--rule2);border-radius:6px;padding:4px}
.w5tlhit{padding:7px 8px;border-bottom:1px solid var(--line2)}
.w5tlhit:last-child{border-bottom:0}
.w5tlhitmeta{display:block;font-size:10.5px;color:var(--faint);margin-bottom:2px;
  font-variant-numeric:tabular-nums}
.w5tlhitsnip{display:block;font-size:12px;color:var(--ink2);line-height:1.4}
.w5tlsearchres .hint{padding:9px 8px;font-size:12px;color:var(--mute)}
mark{background:#FCE9B8;color:inherit;border-radius:2px;padding:0 1px}
html[data-theme="dark"] mark{background:#4A3A12;color:var(--ink)}
html[data-theme="road"] mark{background:#F5D889}

/* ---- add-company modal (companies.js) ------------------------------------- */
.w5modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:16px}
.w5modal[hidden]{display:none}
.w5modalbg{position:absolute;inset:0;background:rgba(6,14,20,.45)}
html[data-theme="road"] .w5modalbg{background:rgba(0,0,0,.6)}
.w5modalbox{position:relative;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--rule2);border-radius:8px;padding:18px 18px 16px}
.w5modalbox h3{font-family:var(--raj);font-size:18px;font-weight:700;color:var(--ink);margin:0}
.w5conflict{margin-top:12px;padding:10px 11px;border:1px solid #E7D4AE;border-left:3px solid var(--amber);
  background:#FCF8F0;border-radius:5px;font-size:12.5px;color:var(--ink2)}
.w5conflict p{margin:0 0 8px}
html[data-theme="dark"] .w5conflict{background:#2C2312;border-color:#463920}
html[data-theme="road"] .w5conflict{background:#F8EBD3;border-color:#DCC08A}

/* ---- notes search on the Notes view (feed.js) ------------------------------ */
.w5searchhit .tx{color:var(--ink2)}
/* #searchwrap reuses .feedwrap (app.css), which sets display:grid, an AUTHOR rule
 * always beats the UA's [hidden]{display:none} regardless of specificity, so the
 * panel would render even while hidden without this explicit override. */
#searchwrap[hidden]{display:none}

/* ---- danger button variant (red is accents-only) -------------------------- */
.btn.warn{background:var(--card);color:var(--danger);border:1px solid var(--rule2)}
.btn.warn:hover{background:var(--card);border-color:var(--danger)}

@media(max-width:640px){
  .w5cgrid{grid-template-columns:1fr}
  .w5modalbox{padding:16px 14px 14px}
}